miércoles, 8 de enero de 2014

Gadget "Nuestras Redes Sociales" con iconos sociales y efecto opacidad


Facebook Google+ Twitter RSS

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 (pasa el cursor por las imágenes)


Facebook Google+ 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiClmdjGJgs2KyX1Aa44li9qKs_ayXfMQCsoX8jAFw7Kvc0J0wFrOContRcgLnjt6q6kEZJedsHkNpUPAKC7BXZl8nHknpfao2UvxiqtzsDcp02LfnDGJnty5kBENOSJy6kgf4jf7RE1Vc/s64-no/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_1jd-FgbOxREoU2w4bD4UHkufbjJYUK4jfQO8r3qbsed2sog3VJlkig02hq62SR_60R52BiN4DgMJ81x-XVwgcokt3CF3ILoE8-t2L2jRdk0Ks19NlcFwNEXp-6wo1zSEen2nBw_76U/s64-no/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByG3l1Zm5l8vnvB6khrO80bnV1bwhG-TdGNQRP8zT1s4-TmqA3KEIjjWmV2NGBjqXsAwVXh9LE6N-0CNtzSK5QFILxNihdXyLt_0ehQhADNreb1LxsFi8Nu4jWtlOEXIbpfFClVxvGeI/s64-no/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A_g86CU56lln5hyphenhyphenfH5hr1aBKQUUG0w2D2JCcsm5Z786bpzS6kj70x7lJxb1zNb1YysfAtl3D4_Wzl9GcHCgH-SMHgIvs3GF6vWaWhdK_euJhfMcTROJP3HsmjP1mSiIeOhaeslVkIAU/s64-no/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 comentarios:

Publicar un comentario

Atencion

Si deseas publicar alguno de nuestros posts en otro sitio web o blog, sólo te pedimos que coloques un enlace al post original de nuestro blog, un enlace es nuestro único requisito.

Buscador

Total visitas

Con la tecnología de Blogger.

Lo Más Visto de la Semana

Categorias

Mapa de visitas en 2D

Mapa de visitas en 3D