Blogunuza Sosyal Takip Butonları Ekleyin

Bu yazıda sizlere blogunuzun kenar çubuğuna ekleyebileceğiniz ve ziyartçileri sosyal profillerinize yönlendirebileceğiniz sosyal butonlar paylaşacağım.



Bu sosyal butonlar CSS sprite özelliği kullanılarak oluşturulmuş.Bu ne anlama geliyor? Sosyal ağlara ait ayrı ayrı butonlar kullamnak yerinr hepsi tek bir görselde toplanmış bu sayede sayfa boyutunda düşüş yani açılış hızında artış sağlanmış.

Ayrıca yine CSS sprite ile hover özellği verilmiş.Yani hepsi tek renk olan sosyal ikonların üzerine gelindiğinde renkli hale dönüşüyor ve o sosyal ağa ait tooltip dediğimiz bir açıklama metni çıkıyor.

Sosyal takip butonlarını blogunuza eklemek için öncelikle şablonunuzdan ]]></b:skin> kodunu buşun ve hemen üstüne aşağıdaki kodları ekleyin.
ul#m-soc2{ margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;} ul#m-soc2 li{ list-style: none;margin: 7px;padding: 0;float:left;border: none;} ul#m-soc2 li a{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAnP9Y8bzYeQgkYrzEyP3bemTYqxFhYdG_tItuSL7oKzucgVPeKIuHb6drvMgho-4uJkzNC2BhBN6VUtaX8qjkgoWWE2WG_AauTStwK8QUCdnmC94rnoRRoYIEabKdnwqdCiynnv7-qkab/s132/sosyal-butonlar.png) no-repeat 0 0; margin:0;padding:0;display: block;position:relative; width: 33px; height: 33px; overflow: visible; } ul#m-soc2 li a.twitter{ background-position: 0 0; } ul#m-soc2 li a.facebook{ background-position: -33px 0; } ul#m-soc2 li a.google{ background-position: -66px 0; } ul#m-soc2 li a.rss{ background-position: -99px 0; } ul#m-soc2 li a.twitter:hover{ background-position: 0 -33px; } ul#m-soc2 li a.facebook:hover{ background-position: -33px -33px; } ul#m-soc2 li a.google:hover { background-position:-66px -33px; } ul#m-soc2 li a.rss:hover{ background-position:-99px -33px; } ul#m-soc2 li a span{ background: #555;position:absolute; top:-10px;left:-10px;width:auto;height:auto;opacity:0; padding:3px;text-align:left; color:#fff;filter:alpha(opacity=0); white-space:nowrap;border-radius:3px;font-size:12px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none} ul#m-soc2 li a:hover span{ opacity:.7; filter:alpha(opacity=70); top:-23px}

Ardından sayfa yerleşimine gidin ve  HTML/JavaScript gadet olarak aşağıdaki kodları ekleyin.
<ul id="m-soc2"> <li><a class="twitter" href="http://twitter.com/phtmldrive"><span>Twitter</span></a></li> <li><a class="facebook" href="http://facebook.com/phtmldrive"><span>Facebook</span></a></li> <li><a class="google" href="https://plus.google.com/108761595756468128383"><span>Google+</span></a></li> <li><a class="rss" href="http://feeds.feedburner.com/phtmldrive"><span>RSS</span></a></li> </ul>

Kodlarda değiştirmeniz gereken yerler:

• http://twitter.com/phtmldrive yerine kendi Twitter URL’niz.
• http://facebook.com/phtmldrive yerine kendi Facvebook URL’niz.
• https://plus.google.com/108761595756468128383 yerine kendi Google+ URL’niz.
• http://feeds.feedburner.com/phtmldrive yerine kendi RSS URL’niz.