Mil Trucos Blogger

Gadget “Nuestras Redes Sociales” con iconos sociales y efecto opacidad

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

Hace un tiempo ya que no publicaba un truco para Blogger, pero hoy les compartiré uno muy bueno que hice hace muy poco.

Se trata de un gadget al que he llamado “Nuestras Redes Sociales” y como su nombre lo indica muestra un pack de iconos sociales de tonos azules que al pasar el cursor sobre ellos se produce un suave efecto de opacidad o desvanecimiento.

El truco funciona como lo ves a continuación:

FacebookGoogle+ Twitter RSS

Para agregar este truco a tu blog ve a Plantilla, Editar HTML, y busca lo siguiente:
<b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

#social img:hover {opacity: 0.6;}

Para agregar estos botones pega en un elemento HTML/Javascript lo siguiente:

<div id="social">
<a href='URL DE TU FANPAGE DE FACEBOOK' target="_blank"><img alt="Facebook"  src="http://www.miltrucosblogger.com/wp-content/uploads/2013/07/thumbs_097124-3d-glossy-blue-orb-icon-social-media-logos-facebook-logo.png" title="Siguenos en Facebook" /></a>
<a href='URL GOOGLE PLUS' target="_blank"><img alt="Google+"  src="http://www.miltrucosblogger.com/wp-content/uploads/2013/07/thumbs_097137-3d-glossy-blue-orb-icon-social-media-logos-google-g-logo.png" title="Siguenos en Google Plus" /></a>
<a href='URL TWITTER' target="_blank"><img alt="Twitter"  src="http://www.miltrucosblogger.com/wp-content/uploads/2013/07/thumbs_097196-3d-glossy-blue-orb-icon-social-media-logos-twitter.png" title="Siguenos en Twitter" /></a>
<a href='URL RSS FEED' target="_blank"><img alt="RSS"  src="http://www.miltrucosblogger.com/wp-content/uploads/2013/07/thumbs_097172-3d-glossy-blue-orb-icon-social-media-logos-rss-basic.png" title="Suscribete a nuestro RSS" /></a></div>

Con esto hemos agregado la estructura HTML, deberás cambiar la parte resaltada en color azul por lo que se indica en cada caso correspondiente.

Ahora solo falta guardar los cambios y listo.

Mira como ha quedado el gadget en mi blog:

 

Si te ha gustado este truco, comenta y dinos que tanto te ha gustado.

0
Shares

Relacionados...

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

13 Comentarios

  1. Julio 19, 2013    

    No se porque no aparece el fondo transparente, lo he intentado paso a paso como dices, incluso probé en Añadir CSS y nada. ¿Que podria ser?

    • Julio 26, 2013    

      Amigo si tu blog es de fondo negro no se vera bien ya que el fondo es blanco y no transparente.

  2. Julio 25, 2013    

    No me funciona, dice que la página que busco no se encuentra…
    Ayudadme por favor

    • Julio 26, 2013    

      Debes agregar la URL con el http para que funcione.

      Saludos

  3. Julio 25, 2013    

    LO PROBARE HABER SI ME FUNCIONA

  4. Agosto 9, 2013    

    Hola Hayder, felicidades por el post, me gusto mucho el tema, y las explicaciones sobre como aplicarlo, yo estoy en construccion de un blog y ahora si que seguire tu blog para aprender mas, gracias.

    • Agosto 11, 2013    

      Roberto gracias por tu comentario y no dudes en seguir visitándonos.

      Saludos

  5. Agosto 13, 2013    

    Hola, me creé el blog hace unos dos días y quisiera saber en dónde encuentro el “HTML/Javascript”, cómo puedo agregar un gadget ya que lo he intentado de mil formas pero me es imposible, ayuda porfi 🙁

    • Agosto 13, 2013    

      Ve a Diseño, Añadir Gadget, HTML/JavaScript y allí pegas el código que quieras.

  6. Octubre 7, 2013    

    Muchas gracias, justo lo que necesitaba para mi blog. 🙂

    Saludos!

    • Octubre 16, 2013    

      Mayra y justo lo encuentras aquí en mi blog 😉

      Gracias por comentar y saludos.

  7. Anonymous Anonymous
    Octubre 17, 2013    

    Como en MILTRUCOSBLOGGER todo se comparte…. ¿Como haces esos comentarios con diferentes opciones para comentar? (Comentarios G+ , Comentarios B, Comentarios f)

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