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.
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??
Alberto Franco · febrero 1, 2013 a las 8:29 pm
Si quieres agregar uno de youtube aqui te dejo el ejemplo es igual solo cambiando la URl y la Imagen mira:
< alt=’YOUTUBE’ src=’AQUI VA LA IMAGEN DE YOUTUBE’ title=’YOUTUBE’/>
Espero averte ayudado si quieres quitar por ejemplo alguno d los que ha puesot Juvinao quitas el codigo este:
< alt=’Google Plus’ src=’http://3.bp.blogspot.com/-IbT1GjjFCic/UQsXHZamq4I/AAAAAAAACa8/4Ck0eSC7rhg/s1600/Google+++boton002.png’ title=’Google Plus’/>
Y asi con todos los que quieras quitar.
Espero averte ayudado. Saludos!
Hayder Juvinao · febrero 2, 2013 a las 2:25 am
Ya mi amigo +Alberto Franco te ha solucionado la inquietud 🙂
aaron marquez · febrero 3, 2013 a las 12:16 am
creí que era con css pero me gusto el resultado.
Hayder Juvinao · febrero 3, 2013 a las 11:09 pm
No es con css pero es buen truco, saludos amigo
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.
Hayder Juvinao · marzo 7, 2013 a las 9:41 pm
Inténtalo Cristina, y cuéntame como te fue
Charlotte · marzo 16, 2013 a las 6:41 pm
no entiendo eso de la opacidad donde esta el CSS no entiendo
Hayder Juvinao · marzo 17, 2013 a las 8:24 pm
Exactamente que no entiendes?
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!
Hayder Juvinao · febrero 4, 2014 a las 8:09 pm
Luis que bueno que hayas encontrado la solución (h)
Saludos
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