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>
Reemplazas lo qu esta en azul por lo que se indica y guardas.
Via/
Como se Hace