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

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

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

  • julio 19, 2013 en 8:37 pm
    Permalink

    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?

    Responder
  • agosto 9, 2013 en 10:58 pm
    Permalink

    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.

    Responder
  • agosto 13, 2013 en 8:39 am
    Permalink

    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 🙁

    Responder
  • octubre 17, 2013 en 4:46 pm
    Permalink

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

    Responder

Deja un comentario

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