En el día de hoy vamos a ver un truco que sirve tanto para Blogger como para WordPress, puesto que se basa en simple CSS qu es reconocido por ambas plataformas, el truco de hoy consta de un set de iconos sociales muy llamativos que al pasar el cursor por ellos se nota un genial efecto de opacidad.

Iconos sociales para Blogger y WordPress con efecto opacidad

 
Para agregar este truco a tu blog debes ir (en el caso de Blogger) a Diseño, Añadir gadget, HTML/JavaScript, en el caso de WordPress debes ir a Apariencia, Widgets, Texto y añadir el siguiente código:

<div id='social'>
<a href='URL FACEBOOK' target="_blank"><img alt='Facebook' src='http://4.bp.blogspot.com/-JLcaIb0_YpM/VZBlxU5nbFI/AAAAAAAAGBE/hZYY5ToLBqA/s1600/facebook.png' title='Facebook'/></a>
<a href='URL GOOGLE+' target="_blank"><img alt='Google Plus' src='http://1.bp.blogspot.com/-nm1DNl3jUR4/VZBl18W8zdI/AAAAAAAAGBM/QZDOTW9lNMM/s1600/google.png' title='Google Plus'/></a>
<a href='URL TWITTER' target="_blank"><img alt='Twitter' src='http://3.bp.blogspot.com/-qWrSIEjl78E/VZBl3n9OqNI/AAAAAAAAGBc/aqaibBmw5mQ/s320/twitter.png' title='Twitter'/></a>
<a href='URL LINKEDIN' target="_blank"><img alt='Twitter' src='http://1.bp.blogspot.com/-slho5wgv8wE/VZBl2oz0_WI/AAAAAAAAGBU/MLsXMbNzmg4/s320/linkedin.png' title='Linkedin'/></a>
</div>

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

 
Ahora solo reemplaza lo resaltado en color verde por lo que se indica en cada caso y guarda los cambios.

No olvides compartir este truco en tus redes sociales y volver a visitarnos.