Blogger Sosyal Paylaşım Butonları

Bu yazımda sizlere blogunuzda sidebar çubuğuna ekleyebileceğiniz ve ziyaretçilerinizi sosyal profillerinize yönlendirebileceğiniz eklentiyi paylaşacağım.

Bu butonlarda css sprite tekniği kullanılmıştır. Aynı zamanda css sprite tekniğini kullanarak butonlara hover eklenmiştir. Ve her resimde açıklama metni bulunuyor. Hemen kodları vereyim.



Sosyal takip butonlarını blogunuza eklemek için ilk olarak aşağıdaki kodu buluyoruz.

]]></b:skin>

Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz.

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/AVvXsEjl7aY_UR4PIOpbA-MH9gow8DGTVhiH0o97tASPRbXYttmYWVSJZWCK7jSV3DgAFyOui8wvHjM2xS8Qh6eh3QwuFKo2SddF8TtQQPHRfMK7r07IEdg3p0FfLISIZgXvC04iBmBwYL7IPnJU/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 yerleşimden aşağıdaki kodu HTML/JavaScript olarak ekliyoruz.

<ul id="m-soc2"><li><a class="twitter" href="http://twitter.com/narqkoz"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/bayramcoskunx"><span>Facebook</span></a></li><li><a class="google" href="https://plus.google.com/113263141068980170410"><span>Google+</span></a></li><li><a class="rss" href="http://feeds.feedburner.com/antikawebmaster"><span>RSS</span></a></li></ul>

Blogger Sosyal Paylaşım Butonları, kodu