Blogger Sosyal Medya Profil Butonları v4

Çok uzun bir süreden sonra sosyal medya profil butonlarına 4.serisi ile devam ediyorum.Diğerlerinden farklı ve orjinal butonlar aradığım için bu süre daha da uzayabilirdi aslında, tesadüfen girdiğim bir blog da gördüm ve sizinle paylaşmak istedim umarım beğenirsiniz :)

Daha önceki butonları belki merak eden arkadaşlar olur onları da şöyle vereyim

• Blogger Sosyal Medya Profil Butonları
• Blogger Sosyal Medya Profil Butonları v2
• Blogger Sosyal Medya Profil Butonları v3

Evet şimdi kodları vereyim her zamanki gibi önce aşağıdaki kodumuzu buluyoruz ;)

]]><b:skin>

Bulduğumuz kodun hemen öncesine aşağıdaki CSS kodlarımızı 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/AVvXsEgscdoh5X8-sawnCxyXz-5hVJESnpmYYRw_BHtvU7bKTIlICxen53FfNKJmhAUTvhjKtWUwrUhP0bYxxdXYM92IVsbeLltMMWg5bmhdzUoPyINXg31569T1vfrHYZkjp2nsDV2pdyDKA86G/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}
#bloghocam {
margin-bottom:20px;}​

Şimdi ki kodlarımızı ister gadget olarak isterseniz kodların arasında size göre bir yere yerleştirebilirsiniz

<ul id='m-soc2'><li><a class='twitter' href='#'><span>Twitter</span></a></li>
<li><a class='facebook' href='#'><span>Facebook</span></a></li>
<li><a class='google' href='#'><span>Google+</span></a></li>
<li><a class='rss' href='#'><span>RSS</span></a></li></ul></div>​

Güle güle kullanın :) İyi bloglamalar.