Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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://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

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

11 commentarios

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

Deja un comentario

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