El truco que les voy a compartir son Iconos Sociales a los que les he dado el nombre de "Social Icons" y como el titulo lo dice vienen con un hermoso efecto de opacidad logrado mediante CSS.
El resultado final sera una bella caja de Suscripción con efecto de opacidad como la siguiente:
Para agregar este truco pega en un elemento
HTML/Javascript lo siguiente:
<h2>Social Icons</h2>
<div id='social'>
<a href='URL TWITTER'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP73-qcmHaeLjpyjWLJSVnBAj5DeCkOKXHRz1tCEH1LeBSjFGp931d-F-SA9_EeDZqXS06tEEVFT3mnArc4-GNToIVRanw7JVEGXyfmDTuLi32Ir_iQc8_SdWissyGznNDOcP3FbUjBkg/s0/twitter.png' title='Twitter'/></a>
<a href='URL FEED'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRhPzHIVAujA4b2ec69noJ7b_Tl5nM3DvZ8HWQgt7hwiGv94VwCbSBuiHGo-va0bXfvLtRSe2OU_yWlxceIXHKukEiJaiNbnjSco6F8qdvqDxxgWt1HDFZicniqWEm8LPMJ6GMFE4UbKI/s0/rss.png' title='RSS'/></a>
<a href='URL FACEBOOK'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwgfZ6EL9nxqZSnpQMe7Xk7BL_DBiM9EtGSorUGbuFygVU5Mr4GZd1b_bimabL04BqIhXJI1H2MUcx9vFELPQ08fcz1LuDGTN7OXvaD7ruiu-rNs37_7zCjmjnyV3pNu8HAFCVdDijpc/s0/facebook.png' title='Facebook'/></a>
<a href='URL GOOGLE+'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcD0OEhstUiERARtgTtbs4DUsAXT06BsH_We2Kzhnk6vcAA5LR6swso4SUeyz7amnK47BVuk7oClsQHTnByXGjvkAtCiuv9SoiVaLBWwsGHlo1Kvj407_NcS2UEsY6yS10I0prA-UwOs/s0/google%252525252b.png' title='Google Plus'/></a>
<a href='URL YOUTUBE'><img alt='Youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeiwIxwjJv2_C_-kJeL1Jg6gv5tO7kckHtU-IOq59wJ1Vf2ObxpdaOFdjjJANJ2zMfbrqWjVtb-LkTMEpGu86aA7D96Yy4hdJ43MSL1-nE3Tr9XXMpEcXV6p8LUsD3bHDkv4iERQoN7ac/s0/you_tube.png' title='Youtube'/></a>
</div>
Reemplaza lo que esta en
color azul por lo que se indica en cada caso.
Ahora para agregar el efecto de opacidad, ve a la
Edición HTML y arriba de
]]></b:skin> agrega lo siguiente:
#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}
#social img {
margin-left: 3px;
margin-right: 3px;
}
#social img:hover {
opacity: 0.6;
}
Con esto ya hemos terminado el tutorial,espero que les haya sido de utilidad.