|
|
 |
Jugery Benzeri Sosyal Paylaşım Butonları!
---------------------------------------------------------------
Jquery Tarzı Sosyal Paylaşım Butonları
Kodlarımız çok kullanışlıdır aynı zamanda css özelliği ve javascript özelliği ile güzel bir jquery tarzı sosyal paylaşım kodu oluşturmuş olduk. Bu kodu web sayfalarınızın menülerinde kullanmanızı tavsiye ediyorum.
Css Kodu
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://lh4.googleusercontent.com/-n5zj4LjXnmM/T8zwsOI_NhI/AAAAAAAADIg/tD-DgPUODu4/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}
Html Kodu
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<ul id="m-soc2">
<li><a class="twitter" href="http://twitter.com/dalli53"><span>Twitter</span></a></li>
<li><a class="facebook" href="http://facebook.com/ohalan.tv"><span>Facebook</span></a></li>
<li><a class="google" href="https://plus.google.com/"><span>Google+</span></a></li>
<li><a class="rss" href="http://feeds.feedburner.com/gonez"><span>RSS</span></a></li>
</ul>
Önizleme
http://i.hizliresim.com/xBnpWL.png
|
|
 |
|
|
|
|
