Floating Social Media Widget Mouse Hover Effect

Sitenizde kullanabileceğiniz sosyal medya eklentisi sitenizin solunda örnek resimde`de gördüğünüz gibi sabit bir şekilde.

Sosyal  medyanın ne kadar önemli olduğunu biliyoruz bu sebepten buna benzer bir çok eklenti görebilirsiniz. Ben  genelde göze hoş ve pek göze batmayan  eklentileri seçmeye çalışırım ve beğendiğim eklentileri arşiv olarak saklarım eminimki birgün lazım olur diye :) bunu sizede tavsiye ediyorum beğendiğiniz eklentileri arşiv olarak  bir köşeye ekleyin.  bu eklentimizide sizinle paylaşalım istedik umarım işinize yarar

Bu eklentiyi sadece Html/Javascript olarak ekliyoruz yani yerleşim bölgesinden gadget ekle diyip sonra html/javascript olarak  sitemize ekliyoruz.

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNzd02nEcg-pOgNGPhA2ZzGwFoQf2Hms4vnqT6F1JBNe91lmwnSPdvs0SWbma_q-b2OzRA44fXibGB-fjA0yvIwfeepi2Wk_Yju0uqBLkY9AITDUSgfLo0Z0viNEpaDQ6_We8jj7qo1M/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiB0g2J5zu-1tKY4B3dIEFy2c14u_Lli_NGJRU0nUAoEjitH5sD5aUVKL3A7ZIpMb0YC9uZA9cs2Jm19DjAzoGaGGituHM6dhcjLTQTOZ3oCtDB1M58tHfu_9e7Ewt7yE3y6FQ0QG6Qvg/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0lNyT9ZVdE6RaQ2wDta81g7b640N6sjj33d73ohxMPv5drlePKkgfjGmDU-kCt5c8x62eVTqeslz__qMu0j0tzzcY28rSigRdhA1gR9QYv-kRTnh5nNjDLvRv_-16-D-ICkZZxptMYM/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rzjl-XxZnSYEWDMzM3FszLrfk1kiEFnE55Ez_BAcbBd9XeTe8zLsuwmIBtNVmI2exa3MXPLCHQCZ7EE6jG2Pi3KNO_3S9m8SN_JPUTud29-k4dhKfYCEjfO_jZDWYO-UxOhrwNJgTv4/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLkoJEgwMZR9eE7E5FzqRWcDSLbl1-sGc0emkNreaQkMmPXHws9DMuReaS1-AX723PzR4cnLD-i7emY57sJkkUU_jPL4Gwe0AbiGWKJjUgxh7QZ3pcM4x5joy0XjRdsuM_DaK8YFFzbE/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>

Not: yukardaki kodlarda KIRMIZI ile belirttiğim
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> bu kod daha önceden sitenizde ekliyse bu kodu eklemiyorsunuz ekli değilse o zaman bu kodu olduğu gibi ekliyoruz.

Continue Reading