Tutoriales Sobre Blogger: Gadget con tus rede sociales con efecto hover

En este tutorial veremos como agregar nuestras redes sociales con un efecto hover, si te gustan los colores mas vivos en tu blog y no tan apagados este estilo de redes sociales es para ti

Antes de comenzar veremos una demostración en vivo: 

Comencemos:

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

<div id="iconoshoverfade">
<ul>
<a href="http://www.facebook.com" target="_blank"> <img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUCwinjkXEmMOjdKUmxUd7oIyTg7kY7_UHpL5FRawru-CK9sHXo8po-IUEScytkaYV-X4Z83Zsem_5v6Bjq27ThrkftYpIREJyfDIHdnJIT7OEkXEGgOtOGAzG6D23D9ykO9riDc5VxI/s1600/Scribble-Facebook.png" title="Síguenos en Facebook" width="50" /></a>
<a href="https://plus.google.com" target="_blank"><img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwveSSl_M-DmQOHxL9UNO3bu31kYVRTgP0RsuhZKHL1_0Z-9HPTytPG07uB5bp0KIWYO5uWk2rwiuP_OV_nvRaBOocDjUYDTCpGjtUnmuei9X7X4kJPMEepbEjItf2YuYP-37w6OmPZ6k/s1600/Scribble-google+.png" title="Síguenos en Google+" width="50" /></a>
 <a href="https://www.twitter.com/" target="_blank"><img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipfxJeY8GLki5wcEZ_N7WplGJwqh5PI6SNRsnzD_Jys7xwU_grqqdgQ6tDS1gqtmYsstZuf5Rjg9qCPpzaU1cikG6ubLC6X0_GYG_e85EBjWK7IzjNY_pTIBw-usocwrOL3QlO8SHAd0M/s1600/Scribble-twitter.png" title="Siguenos en Twitter" width="50" /></a>
<a href="http://feeds.feedburner.com/" target="_blank"><img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKdybLTXR5UFPaiEnpDMI3UHRRd_HoyaprxN13C67MVOJ1wkCD0Vs1wpMocliJECwxzpZEWY7vjYcADYV2OjOYtxaRP_7HxUk_cJS2Eo1rhITsr_a9XVTCfw-HSX-Xepm4sJ4fyYumZE/s1600/Scribble-RSS.png" title="Subscribete " width="50" /></a>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#iconoshoverfade a').hover(function() {
        $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
    });
});
</script>
<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>
</ul>
</div>

• Paso 3: Guardamos nuestro gadget y listo

Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tus Redes Sociales