Menú de redes sociales con CSS Sprites

Hoy les quiero compartir un excelente truco en el cual se muestra un menu de redes sociales con efecto hecho a base de la tecnica llamada Sprites.

El menu contiene los iconos de FeedBurner,Facebook,Google+,Twitter,YouTube y Linkedin.

Aqui les dejo una imagen para que vean como queda el truco:

 Para añadir este truco ve a la Edicion HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

.redes {
}
.redes a{
background-image     : url(http://4.bp.blogspot.com/-fE6jY2sCjhE/TmjsS516Q8I/AAAAAAAACOc/pVUNDOgiw8Q/s1600/redes.png);
background-color      : transparent;
background-repeat    : no-repeat;
height                        : 48px;
width                        : 48px;
float                          : left;
display                      : block;
margin                       : 0 5px 0 0;
}

#feedburner_png {
background-position  : 0px -48px;
}

#feedburner_png:hover {
background-position  : 0px 0px;
}

#googleplus_png {
background-position  : -240px -48px;
}

#googleplus_png:hover {
background-position  : -240px 0px;
}

#facebook_png {
background-position  : -48px -48px;
}

#facebook_png:hover {
background-position  : -48px 0px;
}

#twitter_png {
background-position  : -144px -48px;
}

#twitter_png:hover {
background-position  : -144px 0px;
}

#youtube_png {
background-position  : -96px -48px;
}

#youtube_png:hover {
background-position  : -96px 0px;
}

#linkedin_png {
background-position  : -192px -48px;
}

#linkedin_png:hover {
background-position  : -192px 0px;
}

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:

 <div class='redes'>
<a id='feedburner_png' href='URL DE TU FEEDBURNER' target='_blank' title='Suscribirse a las entradas'></a>

<a id='googleplus_png' href='URL DE TU GOOGLE+' target='_blank' title='Google+'></a>

<a id='facebook_png' href='URL DE TU FACEBOOK' target='_blank' title='facebook'></a>

<a id='twitter_png' href='URL DE TU TWITTER' target='_blank' title='twitter'></a>

<a id='youtube_png' href='URL DE TU YOUTUBE' target='_blank' title='you tube'></a>

<a id='linkedin_png' href='URL DE TU LINKEDIN' target='_blank' title='Ver perfil en Linkedin></a>
</div>

Reemplazas lo que está en azul por lo que se indica y guardas.

Via/Como se Hace