Mil Trucos Blogger

Menú de redes sociales con CSS Sprites

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(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

0
Shares

Relacionados...

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

11 Comentarios

  1. febrero 6, 2012    

    Gracias, andaba buscando algo similar a esto!

    • febrero 6, 2012    

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

  2. febrero 7, 2012    

    Gran aporte compañero! 😀

    • febrero 7, 2012    

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

  3. marzo 25, 2012    

    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.

    • marzo 25, 2012    

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

  4. abril 1, 2012    

    Muy bueno ya esta agregado a mi blog.

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

    para que lo veas como quedo 😎

    • abril 2, 2012    

      Quedo muy bueno amigo,gracias por comentar.

  5. junio 11, 2012    

    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

  6. noviembre 10, 2012    

    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

    • noviembre 16, 2012    

      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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo