Tutoriales Sobre Blogger: Gadget para tus redes sociales con efecto hover

En este tutorial veremos como agregar un gadget de tus redes social en nuestro blog. En estos días, como muchos sabemos las redes sociales son muy importante para un bloggers. Ya que aumenta
consideradamente un trafico a nuestro blog.

Antes de comenzar veremos una demostración:

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>> Diseño>> Añadir un gadget nuevo>> HTML/Javascript
• Paso 2: Dentro de nuestro Gadget pegamos el siguiente codigo HTML

<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/AVvXsEgohQVSCDQTTaps2WYMVWDK08suB39rsvkXs4GOhFl_B0NiPxdgZY5UNFtZbL3gyiM-lP7ViDofgCY-egPhLiodJXeizxbIIeHPMtRFfT6OTHIDBEwRB1u6mkRkOxp_8wpUgr8Nie8BljU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimjjSQtSvT8wKBY3hGn5Fbax8Qji6pUFITyQBZGX19JTX59Lt_lK3_wmW_OM2nO2eNiSKCHbxYUSVKctzZ7PRn28x9hnPfYZhIievwtBTEXBrWA9uwNyjrHjJ99g_WLzCSdyjGbZoQPmw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMzqIfPXe1ZQYcjzCltUHmh2zlzkq4AN1SNeZZak1gIrkU36hyphenhyphenAfQ1R0sphfGagc-I1l06girHg5blZkwBP4wzz0EjRNCOJI2icZgbHBQTj967-bqoPZZJeAJff-iNqL8epy302yioeQ/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuudMpRJtKCOSQqEddm5-WWLu4A1aN6n-Lmqg0aAfIPu62N7gF19rbNzLx3NhDxpR8axiTqq_Q1XuTH2He3XwmYzPpw10vq7CScO3yM2ug2oyIVUNqxNc7UBJT1pTfBCslGKnhiqwEPE/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>

Nota: Si tu blog posee un plugin jQuery elimina lo en rojo
Nota: Solo debes de cambiar los # rojo por las URL de tu redes sociales: 

• Paso 3: Guardamos nuestro gadget y listo a disfrutar de tus redes sociales