Sosyal takip butonları

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/AVvXsEhe8OC0cXJSTE4i9ybHJndQ0EMF8PylVg136wHzT3Brsxd4ib1_Mgs3t6g7Y6-CRsvvLu2frznPqPmgF3EKGTOlDcwgvbY9zMDUP3Gl5MwgVGfSvSJPBNp9suIWGNLaz6T7IzFHekmxPsGR/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/gokhaninguncesi"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/gokhaninguncesi"><span>Facebook</span></a></li><li><a class="google" href="https://plus.google.com/103681015263436777072/posts"><span>Google+</span></a></li><li><a class="rss" href="http://feeds.feedburner.com/gokhaninguncesi"><span>RSS</span></a></li></ul>

Kodlarda değiştirmeniz gereken yerler:

 http://twitter.com/gokhaninguncesi yerine kendi Twitter URL’niz.
 http://facebook.com/gokhaninguncesi yerine kendi Facvebook URL’niz.
 https://plus.google.com/103681015263436777072/posts yerine kendi Google+ URL’niz.    http://feeds.feedburner.com/gokhaninguncesi yerine kendi RSS URL’niz.

 NOT : Eğer yapamayanlar olursa yardım edebilirim.