Marcadores sociales con efecto opacidad o transparencia

Ya habíamos visto como agregar marcadores sociales a nuestro blog. Hoy les vamos a darles un toque especial con un efecto de opacidad.



1.§ Lo que tenemos que hacer es seguir los pasos de este post, pero en lugar del código que usamos, pegaremos el siguiente código tal como lo indica el post que mencioné:

<div class='msociales'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='msociales-redes' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='msociales-redes' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='msociales-redes' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='msociales-redes' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='msociales-redes' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='msociales-redes' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='msociales-redes' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a></li>
</ul>
</div>

2.§ Ahora buscamos ]]></b:skin> y encima de éste pegaremos:

.msociales ul{
display:inline;
font-size:100%;
margin:0pt !important;
padding:0pt !important
}
.msociales li{
display:inline;
list-style-type:none;
background:transparent none repeat scroll 0%;
margin:0pt;
padding:2px
}
.msociales img{
border:0pt none;
float:none;
margin:0pt;
padding:0pt
}
.msociales-redes{
opacity:0.4;
filter: alpha(opacity=40);
}
.msociales-redes:hover{
opacity:2;
filter: alpha(opacity=200);
}

3.§ Guardamos los cambios.

NOTA:

El efecto de transparencia u opacidad funciona en Opera, IE7, Firefox y Safari.

► Si deseas puedes aplicar el efecto pushbutton a los marcadores sociales, para ello mira esta entrada » Marcadores redes sociales con efecto pushbutton