Mil Trucos Blogger

Botones de Redes Sociales con efecto de opacidad

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

Las redes sociales son uno de los metodos más efectivos para difundir nuestro contenido y llegar a más gente, por ello es que tener cuentas en las más populares redes sociales es indispensable y un punto clave en la popularidad de nuestro blog.

Teniendo en cuenta esto he creado unos botones sociales muy elegantes y prácticos, al momento de pasar el cursor sobre las imagenes se ve un hermoso efecto de opacidad que se logra con un pequeño codigo CSS.

Puedes ver los botones a continuación.

FacebookGoogle PlusTwitter


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

 <div id='social'>
<a href='URL FACEBOOK' target="_blank"><img alt='Facebook' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/facebook-boton-300x58.png' title='Facebook'/></a>
<a href='URL GOOGLE+' target="_blank"><img alt='Google Plus' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/Google-boton002-300x58.png' title='Google Plus'/></a>
<a href='URL TWITTER' target="_blank"><img alt='Twitter' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/Twitter-boton003-300x58.png' title='Twitter'/></a></div>

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

Ahora solo queda agregar el CSS con el que se lograra el efecto de opacidad, para esto agrega antes de  ]]></b:skin> lo siguiente:

#social img:hover {
 opacity: 0.6;
 }

Ahora si hemos terminado con todo el código y ha quedado listo el truco, espero que te haya sido de mucha utilidad.

Con el apoyo de  Chat adventista

0
Shares

Relacionados...

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

34 Comentarios

  1. Febrero 1, 2013    

    El estilo es genial, gracias por compartir Juvinao

    • Febrero 2, 2013    

      Gracias por tu comentario Jorge Luis, hace dias no pasabas por el blog amigo, Saludos.

  2. Febrero 1, 2013    

    Este comentario ha sido eliminado por el autor.

  3. Febrero 1, 2013    

    Juvinao! el primer paso me funciono!, pero la segunda para el efecto de opacidad no me funciona. Hize los pasos correctamente, pero no me funciona el efecto.

  4. Febrero 1, 2013    

    @Juvinao Ya lo arregle! solo que te olvidaste poner esto “}”, el codigo es:
    }
    #social img:hover {
    opacity: 0.6;
    }

    • Febrero 2, 2013    

      Pues mira que a mi me ha servido sin el “}” pero de todas maneras me da mucho gusto que te haya servido.

      Saludos 🙂

    • Marzo 16, 2013    

      Donde coloco eso?

  5. Febrero 1, 2013    

    y como haria para agregar o quitar algun boton nuevo por ejemplo uno de un canal de youtube o de RSS Feed??

  6. Febrero 3, 2013    

    creí que era con css pero me gusto el resultado.

  7. Febrero 10, 2013    

    buen aporte hay k probar

  8. Febrero 10, 2013    

    buen aporte hay k probar

  9. Febrero 27, 2013    

    Saludos Amigo me ayudastes

  10. Marzo 6, 2013    

    jajaja, esto no viene al caso, pero llevo tiempo buscando una fuente, y es la que tu tienes en el boton de “compartelo” un poco más arriba, me podrias decir el nombre porfa, eres un máquina.

    • Marzo 7, 2013    

      La verdad esa fuente la encontré en Photoshop, pero no me acuerdo cual es su nombre, cuando la encuentre te digo 😛

  11. Marzo 6, 2013    

    Por cierto intentaré lo de la opacidad. LLevaba tiempo buscandolo, gracias.

  12. Marzo 16, 2013    

    no entiendo eso de la opacidad donde esta el CSS no entiendo

  13. Marzo 22, 2013    

    Muy bueno, muchas gracias por favor sigue asi 🙂

  14. Abril 4, 2013    

    Gracias por todo juvinao,está genial.

  15. Abril 5, 2013    

    Hooolas que tal?

    Muy buena tu informacion, solo que tengo una duda, como lo hago si tengo un blog en WordPress – optimize press, como hago para add este efecto de opacidad?

    Muchas gracias de antemano por todo.

    Rocio

  16. Abril 5, 2013    

    Hoolas
    Muy buena la info que tienes, tengo una pregunta, tengo un blog en wordpress – optimize press, como hago para agregar esto en mi blog?

    Muchas gracias de antemano por la info.

  17. Mayo 1, 2013    

    hola me ha funcionado a la primera, queria preguntarte si se puede poner el fondo transparente ya que me sale un pegote negro mas grande que los botones y queda un poco feo, gracias.

    • Mayo 3, 2013    

      Jose pues seguro que el fondo negro no es del truco, ya que las imagenes no tienen fondo 😕

  18. Agosto 19, 2013    

    hola juviabi, me funciono, pero como hago para cambiarle el ancho?? se me sale del blog las imagenes esas…

    gracias

  19. Agosto 19, 2013    

    Perdon, ya encontre la solucion, estaba escribiendo algo mal yo jeje.

    saludos y gracias!

    • Febrero 4, 2014    

      Luis que bueno que hayas encontrado la solución (h)

      Saludos

  20. Enero 28, 2014    

    Buenas, hay alguna forma de cambiar el idioma del botón?

    • Febrero 4, 2014    

      Sergi los botones son imágenes por lo tanto no se puede cambiar el idioma.

      Saludos

  21. Abril 30, 2014    

    Buen tuto!!!

  22. Agosto 18, 2014    

    Me funcionó excelente, podrías agregar también un botón para Youtube. Gracias

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