Gadget de Redes Sociales con opacidad

Hoy vamos a compartir un gadget de Redes sociales que incluyen los iconos de Facebook, Google Plus y Twitter con un efecto de opacidad tal cual ya vimos en este otro post Opacidad en imágenes al pasar el cursor.

Para comenzar vamos a añadir los siguientes estilos, vamos a Plantilla » Edición html y presionando ctrl+f buscaremos la palabra ]]></b:skin> justo arriba de ella pegaremos lo siguiente.

#RedesSociales img:hover{
filter: alpha(opacity=50);
opacity: 0.5;
}

Luego debemos ir a la sección Diseño » Añadir un Gadget » y elegimos HTML/Javascript, dentro del gadget incluiremos el siguiente código.

<div id="RedesSociales" align="center">

<a href="URL DE TU PÁGINA O PERFIL EN FACEBOOK" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3NnDfcDTeJgK25TWqkVaU66GIKol5L5uNV2WT2iaUGbugOMRGbccWgVOTIoUsqGUulDdgvtmLTsQN72kLj44QGVXERaGxv6zMs98Zbs9fhvFYtrfysvYojq1YsmxQrcjlhRGHqo_pJkA/s1600/icono_facebook.png" title="Siguenos en Facebook" />
</a>

<a href="URL DE TU PÁGINA O PERFIL EN GOOGLE PLUS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ9ZnOOcLe0cWT-Lw6yKZdrSVCOrU4EeRxbhTSw0f59OBvaPQ75bllRr8_04T1TuUnoiUPLzr8XX4scsZ1zRBD2lKl0vIrMGdgKZjdSbWCfmOgqhvkvBFq4jCXl5Ah8KRI2xssByMCPTy9/s1600/icono_google-plus.png" title="Siguenos en Google Plus" />
</a>

<a href="URL DE TU PERFIL EN TWITTER" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Q2XJABBC1suxgWxLzkfVjSzDlMW5ajWLwVtD0aUad_cegH5Pn1imYYTIDKaJNMRFZVa-wWdEogs4Kt9TF17Om6F59GnVhIrlTy0rot7VSdu4lu9kvv6kfAuqu4KyOl47d0uaMA21aHwU/s1600/icono_twitter.png" title="Siguenos en Twitter" />
</a>

</div>

Luego Guardamos el gadget con el nombre que hayamos elegido y LISTO!

Aclaración debemos cambiar lo que se encuentra en azúl por nuestros enlaces de redes sociales.