Menú de redes sociales con CSS Sprites

lunes, 6 de febrero de 2012

Menú de redes sociales con CSS Sprites

lunes, 6 de febrero de 2012

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPJPSrrCLzXprJu7hEzaTCWWtVx_TzLkJ7tbwvsgWMTGLSIl2OOCyo6uhpvpUxe7Fl11-zRQf-20HDNOcURamdyspwdyKiyBAxvbLGHd4MVQ5gbMCxnEe4WL9IMvs4Xj00l2OzidyDDkg/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>