Iconos sociales con opacidad para Blogger y Wordpress

Hola amigos de Mi Blog Ideas, hoy vengo con una nueva idea de truco para Blogger (y también para Wordpress o cualquier servicio web que acepte modificar el HTML), pues el truco de hoy consta de un poco de HTML y algo de CSS, más exactamente haciendo uso de la propiedad "opacity" se logra un efecto muy vistoso en las imágenes, aprovechando esto vamos a añadir unos bonitos iconos sociales con opacidad para Blogger y Wordpres.
Iconos sociales con opacidad para Blogger y Wordpress
Iconos sociales con opacidad para Blogger y Wordpress

Para agregar este truco a tu blog, solo debes pegar en un gadget HTML/JavaScript lo siguiente:

<div id='social'>
<a href='URL FACEBOOK' target="_blank"><img alt='Facebook' src='https://1.bp.blogspot.com/-gwK1kcI6Lb4/XtEn_mCXLmI/AAAAAAAAUtw/goCCIISbCYIxFMIwh37Nr6QBkoXpVkyWwCK4BGAsYHg/48x48.png' title='Facebook'/></a>
<a href='URL PINTEREST' target="_blank"><img alt='Pinterest' src='https://1.bp.blogspot.com/-qQ8RLhmZrjM/XtEn9WSTEGI/AAAAAAAAUtk/MVhAYf398Cg4knGUKdnu9OLVR0PpbZQ6ACK4BGAsYHg/48x48%2BP.png' title='Pinterest'/></a>
<a href='URL TWITTER' target="_blank"><img alt='Twitter' src='
https://1.bp.blogspot.com/-T6v3UhJDpJY/XtEn6Y1CfWI/AAAAAAAAUtY/qc9B7ANrF3Qh15xvyJtx9geghOYEnGSmQCK4BGAsYHg/48x48%2BT.png' title='Twitter'/></a>
<a href='URL INSTAGRAM' target="_blank"><img alt='Instagram' src='https://1.bp.blogspot.com/-p3xFb_9GW64/XtEn32v0UBI/AAAAAAAAUtM/SBcL8sCFGLIVUbIT9OX1X9sNggLKZIJawCK4BGAsYHg/48x48%2BI.png' title='Instagram'/></a>
</div>

<style type='text/css'>
#social img:hover {
opacity: 0.6;
}
</style>

Reemplaza lo que está en negrita por lo que se indica en cada caso y guarda los cambios.

Los iconos agregados en un gadget se ven de la siguiente forma:

Facebook Pinterest Twitter Instagram

Entradas que pueden interesarte

disqus