Iconos de Redes Sociales con efecto hover

Hola amigos blogueros, hoy les vengo a traer un pack de iconos sociales con efecto hover, este gadget es muy bueno, ya que es otra forma de que otros usuarios se suscriban a tus redes sociales.

Vista Previa:

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos lo siguiente

<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/AVvXsEjKtgH84Xgf4QaQwA4wm_liJ6ufDV3jyKn5Jf5nZ5nYpIGQukhcuBEIb3LA3HXfgJDhK1LjWN6b13hLVXrfhkn_lYmSzh7C0-prtTuley_i2o5bd8XjIURboX-9l8RUxqG2kcojGQYf3oY/s1600/Twitter.png)no-repeat;

background-position:center center;

}

ul#social .googleplus a      {

    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJQlPkSsKXIf3Ozl-pxFiIyQIdWOynS-XY-SNbzMnIzMtlGwRCz8Jfyp0UmSPTMqXIoCsZYL78ugL_GRwG_dDRjyjeRAwLVNHsdzeGIQr2mR20Gjrod4vH72kQFkKxMLo-ayy4b1sbr-4/s1600/GOOGLE+PLus.png)no-repeat;

background-position:center center;

}

ul#social .facebook a      {

    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjOqJTpHkBFjibB3SD-Cn8zbDrbjlEWqTSEuCqG7ndYRaIF1Z4qawMYDKdmxp6vr9F1ZZ8gowjzzZ1slul4NJuliN-oUjzOpebfYPu1ANHBVklNnammbzeBMLEluzmmrJWAr817MaEZw/s1600/Facebook.png)no-repeat;

background-position:center center;

}

ul#social .rss a      {

    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOBIDeG1uYfblzw2OUMvb0-X4Kp58zt9O_oL4xH-VC3zbqHCt7KXfrmnA4nb1FU3R4RQ0fA8ZrZpgwJR5YDP4To2sjiMWaG6CjT3EgkWzxGjjTFfLvNTlmIy3vkqvDtEkqjjNiYkU3EE/s1600/rss.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>

</ul>

Cambiar el # por el link que corresponde en cada caso.