Gadget iconos sociales a la izquierda del blog con efecto Hover Blogger

Hoy, para quién lea y corresponda este excelente truco referenciado de blogtipsntricks, se trata de un buen Gadget simple y perfecto de iconos sociales al lado izquierdo de tu blog desde luego con un elegante efecto deslizante.

Por aquí, dando click abajo podremos ver un Demo:

VAMOS A COLOCARLO

1. Lo primero será colocar el script de Jquery en nuestra plantila OJO si ya lo tenemos saltar al paso 2, de lo contrario vamos a plantillla o tema y buscamos lo siguiente </head> justo arriba pegamos el siguiente código:

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

2. Ahora vamos a copiar el código CSS y parte con JS (Javascript) que se encargará del funcionamiento del truco para ello vamos a Diseño > Añadir un Gadget > HTML/Javascript 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/AVvXsEiWKjaJbcAbDIapaofoPsJlSolk0xWqc1dnuNT0cjcVsx6s7slEx9b3szb8kbK6BEsLhvdcT2Zbhf_XdxVfJxijeSwdPvCtO4OiRPT_SzxOOccXDZW_2zzuh5BjrTWQx11eyHVFObUrGpo/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJP4HMV40E7ln5GugMW56IAfbmlpqQb6H8E_y0hJk5rXF7u0C0u5myhVAr7SxSXwjTPF-cYqG2_f8yxzEPj4Z9tIxnIxMkS56SbhpUJ0jO7oDhleVcWL3HJiRgDsh8fZ_pVrooEGwJas/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUYRf1ijO4MoMtse9MVn4ME1o2CtIjVwtFy1v4rGqoyinx3ueTmYjAyeSwyMtZGe1ZMsPcVKkNkupLHDgHtmAZfoBRzCGGCDs_5qyx0DyQJFbhFXvXCMLXk4E19QKi4GwKFQ9w-6EM-4/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRDr38JJpckz2-1dJZhIy2IecAZB08O-rjkfhFmbkeZ0hYiXVZGdumqQ4s7BoJePChbNG67v-86TXEch6dPa_8Lvdd8e8qs9pQg6Hr7rBsmiomASao9UcFRaIQd8wgsoL6Dm6VkugLdU/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='AQUÍ ENLACE' title='Twitter'></a></li>
 <li class='googleplus'><a href='AQUÍ ENLACE' title='Google Plus'></a></li>
 <li class='facebook'><a href='AQUÍ ENLACE' title='Facebook'></a></li>
 <li class='rss'><a href='AQUÍ ENLACE' title='Rss'></a></li>
 </ul>

3. Guardamos y en esencia debería estar funcionando el truco, pero para este paso simplemente resaltaré que debemos modificar lo que dice "AQUÍ ENLACE" por la URL respectiva de cada Red social ¡Fácil!.

No siendo más ante la brevedad del asunto me retiro, cualquier duda comentar.

Hasta la próxima, ;)