Marcadores sociales 2

Como ya sabéis ando estos días modificando el blog The Best Music, he implementado en el unos marcadores sociales usando unos iconos de Llow. Los he adaptado en tamaño y modificado alguno para usarlos en redes hispanas.

He realizado una imagen sprite para su uso y he generado los códigos necesarios.


Para implementarlos añadimos en nuestro CSS

div.marcadores {
height:55px;
position:relative;
width:480px;
}
div.marcadores ul.social {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:50px;
}
div.marcadores ul.social li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:50px !important;
width:50px !important;
cursor:pointer !important;
padding: 0 !important;
}
div.marcadores ul.social a {
display:block !important;
width:50px !important;
height:50px !important;
font-size:0 !important;
color:transparent !important;
}

.socialbitacoras, .socialblogger, .socialdelicious, .socialdigg, .socialfacebook, .socialmeneame, .socialtechnorati, .socialtwitter, .socialbitacoras:hover, .socialblogger:hover, .socialdelicious:hover, .socialdigg:hover, .socialfacebook:hover, .socialmeneame:hover, .socialtechnorati:hover, .socialtwitter:hover { background: url(URL ALOJAMIENTO IMAGEN SPRITE) no-repeat !important;
}

.socialbitacoras { background-position: 0 bottom !important; }
.socialblogger { background-position: -50px bottom !important; }
.socialdelicious { background-position: -100px bottom !important; }
.socialdigg { background-position: -150px bottom !important; }
.socialfacebook { background-position: -200px bottom !important; }
.socialmeneame { background-position: -250px bottom !important; }
.socialtechnorati { background-position: -300px bottom !important; }
.socialtwitter { background-position: -350px bottom !important; }
.socialbitacoras:hover { background-position: 0 top !important; }
.socialblogger:hover { background-position: -50px top !important; }
.socialdelicious:hover { background-position: -100px top !important; }
.socialdigg:hover { background-position: -150px top !important; }
.socialfacebook:hover { background-position: -200px top !important; }
.socialmeneame:hover { background-position: -250px top !important; }
.socialtechnorati:hover { background-position: -300px top !important; }

Expandimos nuestra plantilla, buscamos <div class='post-footer-line post-footer-line-3'> y añadimos a continuación el HTML

<div class='marcadores'>
<ul class='social'>

<li class='socialbitacoras'><a alt='Bitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bitacoras'/></li>

<li class='socialblogger'><a alt='Blogger' expr:href='&quot;http://www.blogger.com/share-post-menu.g?blogID=3863663428153995270&quot;' target='_blank' title='Blogger'/></li>

<li class='socialdelicious'><a alt='Delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'/></li>

<li class='socialdigg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'/></li>

<li class='socialfacebook'><a alt='Facebook' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'/></li>

<li class='socialmeneame'><a alt='Meneame' expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Meneame'/></li>

<li class='socialtechnorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'/></li>

<li class='socialtwitter'><a alt='Twitter' expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'/></li>

</ul>
</div>

05 noviembre 2009

Intermedio, Tutorial Blog