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/AVvXsEidv86S_8bqb84vE5lewMyqDFXVS8WqwDPgoOmbIZG6TtaJlvLetwKdYl_NSLhoYwuQXYNAK3Np74VYtpIvhXy9OcC_pyC9FT6-2B-K8bNZjCzs-72B0UvgFHIH6L63huc5EZsvpoTX1xKP/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/bloghocam"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/bloghocam"><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/bloghocam"><span>RSS</span></a></li></ul>
Kodlarda değiştirmeniz gereken yerler:
- http://twitter.com/bloghocam yerine kendi Twitter URL’niz.
- http://facebook.com/bloghocam yerine kendi Facvebook URL’niz.
- https://plus.google.com/108761595756468128383 yerine kendi Google+ URL’niz.
- http://feeds.feedburner.com/bloghocam yerine kendi RSS URL’niz.
){kind=link}