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.
