Blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

29 Mart 2013 Cuma

Blog Yazılarınız Twitter Hesabınızda Otomatik Yayınlansın

Twitter, her geçen gün kullanıcı sayısını arttıran bir platform ve Facebook'dan çok daha fazla aktif blogcunun olduğu bir ortam. Hal böyle olunca blog yazılarını şöyle bol takipçili bir twitter hesabında yayınlamak bize oldukça iyi trafik kazandırabilir. Ancak blog yazılarımızı manuel olarak eklediğimizden her yazı için twit atmak mümkün olmuyor. Özellikle blogunu sık güncelleyen blogcular için bir çare bulunması şarttı.

Bugün sizlere bu sorunu ortadan kaldırıp blog yazılarınızı twitter hesabınızda nasıl otomatik olarak yayınlayabileceğinizi anlatacağım.
Google'ın ücretsiz rss servisi olan Feedburner'ı kullanacağız. Bu soruna çözüm getiren birkaç yöntem daha bulmuştum ama hiçbiri Feedburner kadar kullanışlı ve basit değildi.

Öncelikle bu işlemi yapabilmeniz için bir Google ve Feedburner hesabınızın olması gerekiyor. Ben hesabınızın olduğunu varsayarak bu kısmı atlayıp direk anlatıma geçiyorum.

İlk olarak Google Feedburner adresine gidin ve yayın yaptığınız rss linkinin üzerine tıklayın;



Daha sonra açılan sayfada üst kısımdan "Publicize" yi seçin



Publicize kısmına gelin ve sol menüden "Socialize" yi seçin.



Publicize ➜ Socialize kısmına geldikten sonra aşağıdaki gibi ayarları uygulayın.
Buradaki "Add a twitter account" kısmından twitter hesabınızı bağlayın.




Ayarlayı yaptıysanız alt kısma inin ve "Save" butonuna tıklayın.

Twitter hesabınıza gönderilen yazı linkleri yine bir Google servisi olan Google Url Shortener tarafından kısaltılıyor bu da twitterda karakter sınırlaması olduğu için büyük avantaj.

İyi bloglamalar...

19 Mart 2013 Salı

Blogger Powered by Blogger Yazısını Kaldırma

Bloggerlerin rahatsız olduğu Poweted by Blogger yazısını kaldırmak için kullanacağınız css kodunu sizler ile yazımızda paylaşıyoruz.

İlk olarak CTRL + F yapıp aşağıdaki kodu aratıyoruz.

]]></b:skin>
Bu kodu bulduktan sonra üstüne aşağıdaki kodu ekliyoruz.

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

İşlemimiz bu kadar, kolay gelsin.

18 Mart 2013 Pazartesi

Blogger için Sitemap Eklentisi

Bütün bloggerlerin merak ettiği bir sorudur bu, bu sitenin sitemapı nerede :) Sitemapımızı kendimiz çok kısa bir kod ile oluşturuyoruz.

İlk önce bloğumuzun admin paneline gelip sol taraftan Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ediyoruz gelen editörten HTML kısmına geçip aşağıdaki kodları yaptışrıyoruz.

<style>
.comments {
display: none;
}
</style>
<script src="http://grafikers.tk/arsiv.js"></script>
<script src="http://speakex.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Önizleme


İşlemimiz bu kadar, canlı önizlemeyi görmek için tıklayın.

Blogger / Blogspot Etiketleri Yan Yana Koyma

Bir çok blogger kullanıcısın başına çeken bir sorunun çözümünden bahsedeceğiz size. Bildiğiniz üzere bloggerda etiketler alt alta gözüküyor ve etiket sayınız arttığı zaman bu gerçekten çok kötü bir görüntü kirliliğine yok açıyor.

Bunun çok kolay bir çözümü var. Aşağıda önizleme resmi ve nasıl yapacağınza dair bilgi var.

Önizleme


İlk olarak ]]></b:skin> kodunuz CTRL + F yapıp, arama yaparak buluyoruz. Bu kodun tam üstüne aşağıdaki kodu ekliyoruz.

#Label1 ul li{float: left;width: 45%;}

Son olarak temamızı kaydediyoruz ve herşey tamamdır.

Etiketler: blogger kategorileri yan yana dizme, etiketleri yan yana dizme, blogspot etiketleri yan yana, yanyana etiketler, etiketleri yanyana sıralama kodu

16 Mart 2013 Cumartesi

Blogger Sosyal Medya Eklentisi ve Email Takip Html Kodu

Herkes çogunlukla sosyal medyaya kayıtlı olduğu alanları toplu ve düzgün bir şekilde göstermek istiyor...
Buna istinaden bende böyle bişey paylaşmak istedim çok sade ve hoş görünüyor. Bütün renk te temalara koyuldugunda çok hoş bir görüntü bırakıyor sizlerle paylaşmak istedim. Biraz anlatmak gerekirse üzerine gelince renklenen ve parlayan java kodla yaptım. Önizlemesi aşağıdadır. İsterseniz demosu için buraya tıklayın.


Kodlarımızı şu şekilde ekliyoruz;
Tasarım>Gadget  Ekle>Html/JavaScript Ekle  aşağıdaki kodları sitenize eklemek  

Kod:
<style type="text/css">

.mbt a{
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbt a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
color: #000;
border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 130px; height:30px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 145px; height:28px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

</style> <!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px; width: 130px; height:18px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

</style> <![endif]-->
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table>
<tbody>
<tr>
<td><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ocabbaroglu"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAo4p_G-hkLy94VLLxxmhFLyvy7lEMgP6JoseqlxywjuL_HDUhvq6HyxegX1yZG4uClFCaCcHrnIV4Q4p-20VzBADpdygKjX9tWbkwhwKDEdHQcsI91Oe99fwD6bhqAq6hBoeLx3PFuEQ/s1600/rss.png" /></a></td>
<td><a style="margin-left:5px;" href="http://twitter.com/ozicab" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaCeZT7R3cqu7U7dS4ERPZXARwykhrIy13kw03vmkX3nMF7sieKgKUYg2LsnmJcExbfS1v9hCxY-eWcCAicMIDFqVCbE8gD88rt5We9R1urUvi8EJScz6wq1XLLjjG3CmQDaCaNdyabY/s1600/twitter.png" /></a></td>
<td><a style="margin-left:5px;" href="http://facebook.com/oguzhanpage" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdkwzgFAoLHcteQKGKe74VNvYmmFz98ldzBN4Mu9G1e4XdtA1VkYm4J7PCY4K9U7DYVGGueu-losatrJA811G83tw8t9vIFHMAyvif0QaL2Dcbs-hWaH4_BSzkkzAWePAqdOK62zPbNM/s1600/facebook.png" /></a></td>
</tr>
</tbody>
</table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="emailupdatesinput" name="email" value="Email Adresin..." onblur="if (this.value == '') {this.value = 'Email Adresin...';}" onfocus="if (this.value == 'Email Adresin...') {this.value = '';}" type="text" /><input value="yasarguner" name="uri" type="hidden" /><input value="Takip&ccedil;i ol" class="joinemailupdates" type="submit" />
</form>
</div>
</div>
</div>
</div>

Blogger Sayfa Numaralandırma

Yine Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar. Bugün, anlatımı birçok sitede mevcut olduğu halde herkesin yapamadığı bu eklentiyi yapıcaz inşallah.Benim blogumda da kullandığım üzere bu eklenti Wordpress bloglardan görülerek Blogger’a uyarlanmıştır. Yapacağımız bu sayfalandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Şimdi Gelelim yapımına..

Yerleşim/HTML’yi Düzenle sekmesine gelip “Widget Şablonlarını Genişlet” tikini aktif hale getirdikten sonra </b:skin> kodundan önce şu kodları yapıştıralım;

Kod:
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:14px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 0px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
color: #000;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd ;
}

.showpageNum a:hover {
border:1px solid #888;
background: #e0e0e0 ;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 ;
text-decoration: none;
}

Kodu Koyduk 3 tamam. Şimdi </body> Tagını Arıyoruz Ve Diğerindeki Gibi </body> Tagının Bi
Üstüne Aşağıdaki Kodları Koyuyoruz Bitti.

Kod:
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=9;
var numshowpage=4;
var upPageWord =&#39;Önceki&#39;;
var downPageWord =&#39;Sonraki&#39;;
</script>
<script src='http://tema.dataservis.org/eklentiler/blogger-numaralandirma.js' type='text/javascript'/>
Artık Blogumuz Önceki Sonraki Sayfalar Değilde, Numaralandırma Şeklinde Gözükecektir. Güle güle kullanın.

13 Mart 2013 Çarşamba

Blogger tema nasıl yüklenir?

Blogger'e yeni başlayanların sıkça sorduğu bir soru bu. Çözümü ise çok basit ama bloggerin bu yeni teması gerçekten biraz karışık gözüküyor. Nerden mi biliyorum? Çünkü bende bloggera ilk başladığımda bu konuda zorlanmıştım.

Şimdi sizlere 3 adımda bloggera nasıl tema yükleyeceğinizi göstereceğiz.

İlk olarak Şablon'a tıklıyoruz.



Ardından sayfanın sağ üst tarafında görebileceğiniz Yedekle / Geri Yükle tuşuna basıyoruz.


Gelen küçük pencereden Dosya Seç yazısına tıklarak .xml uzantılı tema dosyanızı seçiyorsunuz ve son olarak yükle tuşuna basıyorsunuz.