Tutoriales Sobre Blogger: Iconos de Redes Sociales con Efecto Sprite

En este turorial veremos como Crear un gadget de Suscriptores de Redes Sociales Usando usando Efecto Sprite para blogger. El Efecto Sprite consiste en que los iconos de Redes Sociales se vean en blanco y negro , una ves que pace el curso
r por encima de ellos cambiaran con el efecto Rellover.
Efecto es que solo ocupa una imagen y no 14 por cada icono , y ayuda la velocidad de carga de tu blog

Demostracion

Vamos a empezar

• Paso 1: Agregaremos CSS Efect Sprite a nuestro blog, para eso vamos a 
• Blogger>>Plantilla>>Personalizar>>Avanzado>>Añadir CSS
• Paso 2: Copia y pega el siguiente código en Añadir CSS

/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyG7MDSdsLPmNIHzpIu1JHVU_UTt0jaSJU5J_Z48Aialq7gBINpOmZffXXDLE0aDOvHR96a2Vrr_i8Hq9f6hTuHSKqkq_DpD5yHB08k9EKmWOWWQScXQS89BAuPNHZjD7FZosxn3dRW6d/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}
#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}
#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}
#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}
#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}
#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}
#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Css http://www.tutorialesblogger.blogspot.com */

• Paso 3: Damos click en "Aplicar al blog" 
• Paso 4: Añadiremos el codigo HTML, para eso vamos a . . .
• Blogger>>Diseño>>Añadir un gadget>>HTML/Javascript
• Paso 5: Copia y pega el siguiente código en HTML/Javascript

<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="URL GOOGLE+">Google+</a></li>
<li id="rss"><a href="URL RSS FEED">RSS Feed</a> </li>
<li id="sub"><a href="URL">Subscribe</a></li>
<li id="fb"><a href="URL FACEBOOK">Facebook</a></li>
<li id="twit"><a href="URL TWITTER">Twitter</a></li>
<li id="li"><a href="URL LINKEDIN">LinkedIn</a></li>
<li id="youtube"><a href="URL YOUTUBE">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.tutorialesblogger.blogspot.com-->

Nota:- Nota solo tendremos que cambiar la URL por tus enlaces