Marcadores sociales con efecto opacidad

Bastantes personas últimamente se han interesado por colocar los marcadores sociales en sus blogs con el mismo efecto de opacidad que tengo añadido en El Escaparate.
Voy a daros los códigos HTML y CSS necesarios para colocarlos tal como están los míos, si luego no os interesara mostrar un determinado marcador, bastará con eliminar la línea correspondiente desde <li> hasta </li>.

[1] Colocamos estás líneas de CSS dentro de nuestra plantilla, antes de la etiqueta ]]></b:skin>:

/* Marcadores sociales
--------------------------- */
.marcadores ul{ font-size:100%; display:inline; margin:0pt !important; padding:0pt !important}
.marcadores li{ background:transparent none repeat scroll 0%; display:inline; list-style-type:none; margin:0pt; padding:2px}
.marcadores img{ border:0pt none; float:none; margin:0pt; padding:0pt}
.marcadores-sociales{ opacity:0.6; filter: alpha(opacity=60);}
.marcadores-sociales:hover{ opacity:2; filter: alpha(opacity=200);}

[2] Localizamos ahora esta línea dentro del código de nuestra plantilla con los artilugios expandidos:
<p class='post-footer-line post-footer-line-3'/>

Y sobre ella pegamos el código para mostrar los botones de los marcadores sociales:
<!--Marcadores sociales -->
<div class='marcadores'>
Enviar a
<ul>
<li><a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='marcadores-sociales' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a></li>
<li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODcbltUKI/AAAAAAAACn0/weLnLJlJY7k/s200/technorathy.jpg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OD8bltUOI/AAAAAAAACoU/da4tqMev6zA/s200/deliciogl4.gif'/></a></li>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEMbltUPI/AAAAAAAACoc/Nc7aitpOiZw/s200/diggjf4.gif'/></a></li>
<li><a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Yahoo!'><img alt='Agregar a Yahoo!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFJbltUUI/AAAAAAAACpE/u3XUXpq-cAI/s200/yahooyb7.png'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OER7ltUQI/AAAAAAAACok/oIqBV3hvsTo/s200/googleoq9.png'/></a></li>
<li><a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Furl'><img alt='Agregar a Furl' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF3LltUXI/AAAAAAAACpc/Ujlrak5C8k0/s200/furlee5.png'/></a></li>
<li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF-LltUYI/AAAAAAAACpk/UKSeg7d1aqE/s200/redditse1.png'/></a></li>
<li><a expr:href='&quot;http://ma.gnolia.com/beta/bookmarklet/add?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Magnolia'><img alt='Agregar a Magnolia' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OGIbltUZI/AAAAAAAACps/4O4O6uFkcT8/s200/magnoliaho5.png'/></a></li>
<li><a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODsbltUNI/AAAAAAAACoM/1kkiZl7g3P4/s200/blinklistspk5.png'/></a></li>
<li><a expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Blogmarks'><img alt='Agregar a Blogmarks' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODjbltULI/AAAAAAAACn8/cPI6nrIzbWo/s200/blogmarksus8.png'/></a></li>
<li><a expr:href='&quot;http://tec.fresqui.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Fresqui'><img alt='Agregar a Fresqui' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0RQUrltUcI/AAAAAAAACqE/6tHaBcKcyRs/s200/freski.PNG'/></a></li>
<li><a expr:href='&quot;http://promotingblogs.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Promoting Blogs'><img alt='Agregar a Promoting Blogs' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEZ7ltURI/AAAAAAAACos/PoC_Hn_rPI0/s200/pb16x16it8.png'/></a></li>
<li><a expr:href='&quot;http://www.mister-wong.es/index.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Mister Wong'> <img alt='Agregar a Mister Wong' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODnbltUMI/AAAAAAAACoE/1ohtyPM3zD4/s200/18mrwongua3.gif'/></a></li>
<li><a expr:href='&quot;http://www.webeame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Webeame'> <img alt='Agregar a Webeame' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OE0bltUTI/AAAAAAAACo8/VhIugHAA10Y/s200/nogravatar220aj1.jpg'/></a></li><li><a expr:href='&quot;http://www.wikio.es/vote?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a wikio'><img border='0' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFebltUVI/AAAAAAAACpM/zYz0A1XfHMw/s200/wikio2.gif'/></a></li>
<li><a expr:href='&quot;http://www.enchilame.com/login.php?return=/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Enchilame'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYRbltUdI/AAAAAAAACqM/tMdnCA9AWLg/s200/enchilame.jpg'/></a></li>
<li><a expr:href='&quot;http://barrapunto.com/submit.pl?story=&amp;subj=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Barrapunto'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYgbltUfI/AAAAAAAACqc/gBnwQ_mpddc/s200/Nombre3.jpg'/></a></li>
</ul>
</div>
<!--Marcadores sociales -->


¡Gracias Fernandooo1!redface

0 comentarios:

Publicar un comentario