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


11 comentarios

Obed Calva · febrero 6, 2012 a las 4:15 pm

Gracias, andaba buscando algo similar a esto!

    Juvinao · febrero 6, 2012 a las 4:39 pm

    Obed Calva me da mucha alegria que te sirva el tutorial,Saludos.

Dryken · febrero 7, 2012 a las 11:18 am

Gran aporte compañero! 😀

    Juvinao · febrero 7, 2012 a las 4:19 pm

    Si compañero sin duda alguna es un excelente truco.

Yaiza · marzo 25, 2012 a las 8:17 am

Tengo una duda… ¿Esto es para que se suscriban o para que compartan los lectores? Siento mi ignorancia y gracias por adelantado 🙂
Es un gran truco, quiero saberlo para incorporarlo a mi blog.

    Juvinao · marzo 25, 2012 a las 2:58 pm

    Yaiza este truco es para que se suscriban y no te preocupes todos vamos aprendiendo pocoa poco.

Jaime Carreira Fuster · abril 1, 2012 a las 10:23 pm

Muy bueno ya esta agregado a mi blog.

http://tuxplaneta.blogspot.com.es/

para que lo veas como quedo 😎

    Juvinao · abril 2, 2012 a las 3:07 pm

    Quedo muy bueno amigo,gracias por comentar.

Casting Venezuela · junio 11, 2012 a las 10:28 pm

Hola Muy Buen Truco DesdeHaceTiempo He Seguisdo tus trucospero tengo una pregunta yodeseo que ese gadget me aparesca todo a la derecha como hago ya que lo coloque arriba cerca de la cabecera por que dividi la cabecera y del lado derecho puedo colocar gadget pero deseo que aparesca bien pegado a la derecha no se si me entiendes

Florian Danciu · noviembre 10, 2012 a las 6:07 pm

Amigo me podrias hacer uno = en caracteristicas a este pero solo con los iconos de facebook twiter y google + estaria muy agradecido de verdad
danciuurbano@gmail.com

    Juvinao · noviembre 16, 2012 a las 8:56 pm

    Con gusto lo hare pero cuando tenga tiempo, ahora tengo muchas peticiones y poco tiempo 🙁

    Saludos

Responder a Juvinao Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *