Ver entrada completa. Menú de redes sociales con CSS Sprites

Clic sobre la imagen para descargar

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

.redes {
 }
.redes a{
    background-image     : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbW0YV1Rhv_Rbvb886YdZz95i7JRdDYOCvVKSRDqd_V90OyUGHhSwmZy3PPx_CwtxI6PevqbQtD-H4zIjUUeW73PcsfX4r1uvYjQ9t6WMSRDi_e3QcmiT-Hca5LKYwPbkoViqgJmFIp-Y/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;
 }

Pueden agregarle estilos a la clase redes Ej: margenes, etc..

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div class='redes'>
<a id='feedburner_png' href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH' target='_blank' title='Suscribirse a las entradas'></a>

<a id='googleplus_png' href='https://plus.google.com/110680434417680409578/posts' target='_blank' title='Google+'></a>

<a id='facebook_png' href='http://www.facebook.com/loseasi' target='_blank' title='facebook'></a>

<a id='twitter_png' href='http://www.twitter.com/v_ku' target='_blank' title='twitter'></a>

<a id='youtube_png' href='http://www.youtube.com/user/thevku' target='_blank' title='you tube'></a>

<a id='linkedin_png' href='http://uy.linkedin.com/in/alix' target='_blank' title='Ver perfil en Linkedin></a>
</div>

Cambiar la imagen y los enlaces por los suyos.

Si no quieren mostrar algún link, solo eliminen la línea desde <a -- hasta-- ></a>

Mover al lugar que se quiera mostrar el menú.