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


34 comentarios

Jorge Luis · febrero 1, 2013 a las 2:19 am

El estilo es genial, gracias por compartir Juvinao

    Hayder Juvinao · febrero 2, 2013 a las 2:18 am

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

Alexander Guerra Padilla · febrero 1, 2013 a las 3:33 am

Este comentario ha sido eliminado por el autor.

Alexander Guerra Padilla · febrero 1, 2013 a las 3:47 am

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.

Alexander Guerra Padilla · febrero 1, 2013 a las 6:46 am

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

    Hayder Juvinao · febrero 2, 2013 a las 2:21 am

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

    Saludos 🙂

    Charlotte · marzo 16, 2013 a las 6:43 pm

    Donde coloco eso?

Arcangel_AR · febrero 1, 2013 a las 4:42 pm

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

aaron marquez · febrero 3, 2013 a las 12:16 am

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

Luis Norberto Frias · febrero 10, 2013 a las 8:17 pm

buen aporte hay k probar

Luis Norberto Frias · febrero 10, 2013 a las 8:19 pm

buen aporte hay k probar

David Ahmed Castro · febrero 27, 2013 a las 2:03 am

Saludos Amigo me ayudastes

Cristina · marzo 6, 2013 a las 5:03 pm

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.

    Hayder Juvinao · marzo 7, 2013 a las 9:39 pm

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

Cristina · marzo 6, 2013 a las 5:05 pm

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

Charlotte · marzo 16, 2013 a las 6:41 pm

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

Dylanpedia · marzo 22, 2013 a las 4:28 pm

Muy bueno, muchas gracias por favor sigue asi 🙂

Ronald Coca · abril 4, 2013 a las 7:24 pm

Gracias por todo juvinao,está genial.

Rocio · abril 5, 2013 a las 3:57 pm

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

Rocio · abril 5, 2013 a las 3:58 pm

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.

jose antonio garcia · mayo 1, 2013 a las 11:35 am

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.

    Hayder Juvinao · mayo 3, 2013 a las 8:00 pm

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

Luis Hernan Gonzalez · agosto 19, 2013 a las 4:56 pm

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

gracias

Luis Hernan Gonzalez · agosto 19, 2013 a las 5:05 pm

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

saludos y gracias!

Sergi · enero 28, 2014 a las 6:21 pm

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

    Hayder Juvinao · febrero 4, 2014 a las 8:11 pm

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

    Saludos

Alexander Guerra Padilla · abril 30, 2014 a las 9:40 pm

Buen tuto!!!

Moisés Arrieta · agosto 18, 2014 a las 9:17 pm

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

Responder a Alexander Guerra Padilla Cancelar la respuesta

Marcador de posición del avatar

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