Marcadores Sociales en Blogger con efecto

Unas de la mas importantes cosas para cada blog seria tener enlaces hacia marcadores sociales para tu usuarios, y ¿Para que tenerlo?, los marcadores sociales o social bookmarking sirven para que tus lectores compartan el contenido de tu blog en diferentes paginas de gran importancia y que sin duda debes tener en cuenta, ya que te ayuda a atraer mucho mas usuario de estas redes interesados en el contenido que se publica en tu blog.

Así como hace algunos meses ya publique Redes Sociales (Social Bookmarking) en Blogger, que justamente, cumplen la misma función que este nuevo, pero aquella entrada se puede apreciar un efecto opacidad e iconos mas pequeños, a diferencia de esta, se muestra mas atractiva, con iconos grandes redondo y con un efecto estilo "Abajo-Arriba" o "onMouseOver" que hace llamar mas la atención, solo se hace con CSS, sin ningún Script y de seguro, por que yo también lo hice, mejoraras el tiempo en el que los usuarios se quedan en tu blog, ya que de seguro se quedaran jugando con el maravilloso efecto, un rato de diversión no le cae mal a nadie, Jeje. Si deseas ver una demostración puedes verlo en este blog de pruebas.

PROCEDIMIENTO:

[1] Ve a Blogger > Diseño y entra a Edición HTML y pega el siguiente codigo justo antes de ]]



div.marcadores {

height:65px;

position:relative;

width:480px;

}

div.marcadores ul.cat {

margin:0 !important;

padding:0 !important;

position:absolute;

bottom:0;

left:50px;

}

div.marcadores ul.cat li {

display:inline-block !important;

float:left !important;

list-style-type:none !important;

margin:0 !important;

height:60px !important;

width:60px !important;

cursor:pointer !important;

padding: 0 !important;

}

div.marcadores ul.cat a {

display:block !important;

width:60px !important;

height:60px !important;

font-size:0 !important;

color:transparent !important;

}

.cat-bitacoras, .cat-bitacoras:hover,.cat-delicious, .cat-delicious:hover,.cat-facebook, .cat-facebook:hover, .cat-meneame ,.cat-meneame:hover, .cat-technorati, .cat-technorati:hover, .cat-twitter, .cat-twitter:hover, .cat-wikio, .cat-wikio:hover {

background:url(http://dl.dropbox.com/u/3301800/tutomax/marcadores%20sociales.png) no-repeat !important;

}

.cat-bitacoras { background-position: left top !important; }

.cat-bitacoras:hover { background-position: left bottom !important;}

.cat-delicious { background-position: -70px top !important; }

.cat-delicious:hover { background-position: -70px bottom !important; }

.cat-facebook { background-position: -140px top !important; }

.cat-facebook:hover { background-position: -140px bottom !important; }

.cat-meneame { background-position: -210px top !important; }

.cat-meneame:hover { background-position: -210px bottom !important; }

.cat-technorati { background-position: -280px top !important; }

.cat-technorati:hover { background-position: -280px bottom !important; }

.cat-twitter { background-position: -350px top !important; }

.cat-twitter:hover { background-position: -350px bottom !important; }

.cat-wikio { background-position: -420px top !important; }

.cat-wikio:hover { background-position: -420px bottom !important; }

[2] Guarda los cambios, ahora cuando estos ya esten guardados, marcas la casilla expandir plantilla de artilugios y busca

y justo despues de ese codigo, pega el siguiente.

 <div class='marcadores'>

<ul class='cat'>

<li class='cat-bitacoras'><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='cat-delicious'><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='cat-facebook'><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='cat-meneame'><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='cat-technorati'><a alt='Technorati' 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='cat-twitter'><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>

<li class='cat-wikio'><a alt='Wikio' expr:href='&quot; http://www.wikio.es/vote?url&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Wikio'/></li>

</ul>

</div>

[3] Guarda los cambios y disfruta tus nuevos botones debajo de cada entrada.