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:
<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.
13 comentarios
Lianxio Bloguera · julio 19, 2013 a las 8:37 pm
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?
Hayder Juvinao · julio 26, 2013 a las 9:50 pm
Amigo si tu blog es de fondo negro no se vera bien ya que el fondo es blanco y no transparente.
Andre Severa · julio 25, 2013 a las 6:08 am
No me funciona, dice que la página que busco no se encuentra…
Ayudadme por favor
Hayder Juvinao · julio 26, 2013 a las 9:52 pm
Debes agregar la URL con el http para que funcione.
Saludos
Azangarinos Mulalunthatas · julio 25, 2013 a las 10:11 pm
LO PROBARE HABER SI ME FUNCIONA
Hayder Juvinao · julio 26, 2013 a las 9:52 pm
Amigo pruebalo por favor 😉
Roberto Téllez · agosto 9, 2013 a las 10:58 pm
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.
Hayder Juvinao · agosto 11, 2013 a las 10:35 pm
Roberto gracias por tu comentario y no dudes en seguir visitándonos.
Saludos
Fearless · agosto 13, 2013 a las 8:39 am
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 🙁
Hayder Juvinao · agosto 13, 2013 a las 8:56 pm
Ve a Diseño, Añadir Gadget, HTML/JavaScript y allí pegas el código que quieras.
Mayra Meza · octubre 7, 2013 a las 8:50 pm
Muchas gracias, justo lo que necesitaba para mi blog. 🙂
Saludos!
Hayder Juvinao · octubre 16, 2013 a las 8:09 pm
Mayra y justo lo encuentras aquí en mi blog 😉
Gracias por comentar y saludos.
Anonymous · octubre 17, 2013 a las 4:46 pm
Como en MILTRUCOSBLOGGER todo se comparte…. ¿Como haces esos comentarios con diferentes opciones para comentar? (Comentarios G+ , Comentarios B, Comentarios f)