0 Blogunuz için cicili bicili sosyal takip butonları

İyi geceler sayın okur.
Son zamanlarda blog tasarımı konusuna çok takılan ben her gün bir şeyleri kurcalaya kurcalaya ufak ufakta olsa bir takım şeyler öğreniyorum. Blog butonlarının (banner) nasıl yapıldığını öğrendikten sonraki hedefim de bu sosyal takip butonlarını kendi tasarımımla bir araya toplamaktı. Uzun süren uğraşlar sonucu onu da yapabildim. Butonların tasarımı benden, kodlar da tabii ki Blog Hocam 'dan. Kod yazmayı henüz bilmiyorum fakat bu merakla sanırım onu da öğreneceğim. :D Bu butonları blog hocamın şuradaki yazısında paylaştığı kodları kullanarak yaptım. Üzerine kullandığım Bloglovin' ve Pinterest'i de ekledim. Bu eklenti aynı zamanda  Facebook sayfanızın hayranlarını, Twitter takipçilerinizi, paylaşılan yazılarınızı ve yayınlanan yorumları da sayabiliyor. Bu butonları kendi blogumu düşünerek tasarlamıştım ama isteyen olursa kendi blogunda da kullanabilsin diye bu kodları paylaşmaya karar verdim.

Öncelikle ;

• istemediğiniz butonları kolaylıkla çıkartabilirsiniz. Örneğin pinterest kullanmıyorsanız belirteceğim yerleri silebilirsiniz.
• "width" değerini değiştirerek genişliğini istediğiniz gibi ayarlayabilirsiniz. Ben yazılarımın hemen üstünde olacak şekilde tasarladığım için width: 800 dür.
• yorum sayacı normal blogger şablonlarıyla çalışıyor. blogunuza eklediğiniz anda yazılarınız ve yorumlarınız sayıyor. ben sonradan disqus eklentisi eklediğim için benim yorum sayım sabit kaldı
• kodları gözükmesini istediğiniz yere gadget ekle kısmından HTML/Javascript i seçerek kolaylıkla ekleyebilirsiniz.

<style>.redesss img {-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;margin-bottom:3px;padding: 0 5px;} .redesss img:hover {opacity:0.65;-moz-opacity: 0.65;filter: alpha(opacity=65);} .redesss b {line-height: 16px;}</style> <div class="redesss" style="font-size:11px;text-align:center;"> <table border="0" cellspacing="0" cellpadding="0" width="800"><tbody> <tr> <td valign="top" width="51" align="center"><a title="ÇATI KATI'nı RSS ile takip et" href="http://feeds.feedburner.com/catikati" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="http://3.bp.blogspot.com/-5Vr8RSVbtkQ/ULYtXexazUI/AAAAAAAAGps/f2cuddlkvmE/s1600/rss.png" /></a> <br /><b style="font-size: 12px;"><script language='javascript' type='text/javascript' src='http://yourjavascript.com/057219301121/contadorfeed.js?uri=catikati'></script></b> <br />Abone ol</td> <td valign="top" width="51" align="center"><a title="ÇATI KATI'nı Facebook'ta beğen" href="https://www.facebook.com/CATIKATI.net" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="http://4.bp.blogspot.com/-OgBn7HOMHY0/ULYtTUE5GSI/AAAAAAAAGpE/kLa7zKH-y_I/s1600/75face.png" /></a> <br /><b style="font-size: 12px;"><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=353387581402177"></script></b> <br />Hayran</td> <td valign="top" width="51" align="center"><a title="ÇATI KATInı Twitter'da takip et" href="https://twitter.com/catikatinet" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="http://3.bp.blogspot.com/-QBHAcs_OWXs/ULYtZCzu3hI/AAAAAAAAGp4/4qjkMFQKlL8/s1600/twit.png" /></a> <br /><b style="font-size: 12px;"><script type='text/javascript' src="http://yourjavascript.com/170130217251/contadortwitter.js?usuario=catikatinet"></script></b> <br />Takipçi</td> <td valign="top" width="51" align="center"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="http://4.bp.blogspot.com/-P1skoW_viMg/ULYzcKxdfpI/AAAAAAAAGqY/QZ_dGtWNUAU/s1600/yaz%C4%B1.png" /> <br /><b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></b> <br />Yazı</td> <td valign="top" width="51" align="center"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="http://2.bp.blogspot.com/-XCMOPlGBuyQ/ULYzc2i4adI/AAAAAAAAGqc/mFRuMgx-g1c/s1600/yorum.png" /> <br /><b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></b> <br />Yorum</td> <td valign="top" width="51" align="center"><a href="http://pinterest.com/duygun/"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://3.bp.blogspot.com/-jkkgL8sMom8/ULYtW12cK8I/AAAAAAAAGpg/UM1uz20MB1k/s1600/pinterest.png" /></a> <br />Pinterest</td> <td valign="top" width="51" align="center"><a href="http://www.bloglovin.com/blog/3918717/cati-kati"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://2.bp.blogspot.com/-oE2zGRB0moY/ULYtT-jYXiI/AAAAAAAAGpI/002rLur3JQU/s1600/bloglovin.png" /></a> <br />Bloglovin</td> <td valign="top" width="51" align="center"><a href="https://plus.google.com/113917558327264660006/posts"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://4.bp.blogspot.com/-NpMMBxG743w/ULYtU0cnvDI/AAAAAAAAGpQ/h3DBfo-2L98/s1600/google+.png" /></a> <br />Google+ </td></tr> </tbody></table> </div>
Düzenlemeniz gereken yerler

• http://feeds.feedburner.com/catikati kısmı yerine kendi feedburner adresinizi,
• http://yourjavascript.com/057219301121/contadorfeed.js?uri=catikati catikati yazan yere kendi feedburner ID'nizi yazmanız gerekiyor. Bunlar >Abone ol< kısmının hemen üstünde

• https://www.facebook.com/CATIKATI.net yazan kısıma kendi facebook hayran sayfanızın adresini,
• http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=353387581402177 yazan yere hayran sayfanızın ID'sini yazmanız gerekiyor. Bunlarda >Hayran< kısmının üstünde.

• https://twitter.com/catikatinet yerine kendi twitter adresinizi yazın.
• http://yourjavascript.com/170130217251/contadortwitter.js?usuario=catikatinet yazan yere de twitter kullanıcı adresinizi yazın. Bunlarda >Takipçi< kısmının üstünde.

• http://pinterest.com/duygun/ yazan yere kendi pinterest adresinizi yazın. >Pinterest<> kısmının üstünde.

• http://www.bloglovin.com/blog/3918717/cati-kati yazan yere de kendi bloglovin adresinizi yazın. Bunlar >Bloglovin< kısmının üstünde.

• Son olarak https://plus.google.com/113917558327264660006/posts yazan yere kendi google+ adresinizi yazın.  >Google+ kısmının üstünde.

• Bunların dışında bir de ÇATI KATI'nı facebook ta beğen, ÇATI KATI'nı twitter da takip et, ÇATI KATI'nı rss ile takip et yazan yerlerdeki ÇATI KATI'nı da kendi blog isminizle değiştirin.

Kullanmak istemediğiniz buton varsa;
Örneğin Pinteresti kullanmak istemiyorsunuz. Kodların arasından

<td valign="top" width="51" align="center"><a href="http://pinterest.com/duygun/"><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="http://3.bp.blogspot.com/-jkkgL8sMom8/ULYtW12cK8I/AAAAAAAAGpg/UM1uz20MB1k/s1600/pinterest.png" /></a>         <br />Pinterest</td>
kısmını silmeniz yeterli.

Blog hocam'ın paylaştığı eklenti de aşağıdaki gibidir. Butonları sidebarda kullanmak için ideal. Blogunuza eklemek için buraya tıktık.