Marcadores con efecto onMouseOver para Blogger

Este es una forma muy atractiva para poner marcadores de redes sociales con efecto onMouseOver que vi en el blog de Pizcos pero vi que le faltaba poner google Buzz, también modificar una de las esferas porque no me gusto el logo, aunque no se mucho de photoshop pero hice lo que pude espero que sea de su agrado.

Comencemos a ponerlo en nuestro blog:  Primero damos click sobre la imagen luego guardarla y subirla en tu blogger si es lo que desean.

1.-Primero buscamos ]]></b:skin> y antes de ese código pegamos :

div.marcadores {
height:65px;
position:relative;
width:547px;
}
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-googlebuzz, .cat-googlebuzz:hover,.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://1.bp.blogspot.com/_2KsOnvg-Xac/TTKHPJJJ8gI/AAAAAAAABYc/M0rWM-D101s/s1600/Marco-RedesSociales-Boton-Compartir.png) no-repeat !important;
}
.cat-googlebuzz { background-position: left top !important; }
.cat-googlebuzz:hover { background-position: left bottom !important;}
.cat-bitacoras { background-position: -70px top !important; }
.cat-bitacoras:hover { background-position: -70px bottom !important;}
.cat-delicious { background-position: -140px top !important; }
.cat-delicious:hover { background-position: -140px bottom !important; }
.cat-facebook { background-position: -210px top !important; }
.cat-facebook:hover { background-position: -210px bottom !important; }
.cat-meneame { background-position: -280px top !important; }
.cat-meneame:hover { background-position: -280px bottom !important; }
.cat-technorati { background-position: -350px top !important; }
.cat-technorati:hover { background-position: -350px bottom !important; }
.cat-twitter { background-position: -420px top !important; }
.cat-twitter:hover { background-position: -420px bottom !important; }
.cat-wikio { background-position: -490px top !important; }
.cat-wikio:hover { background-position: -490px bottom !important; }

 Modificamos esta URL por la URL de la imagen que subistes a tu blogger: http://2.bp.blogspot.com/_2KsOnvg-Xac/TQEbU9mo4oI/AAAAAAAABB8/mjxrVnT3Ebg/s1600/Marco-RedesSociales-Boton-Compartir.png

2.- Guardamos la plantilla después expandimos plantilla de artículos y buscaremos: <div class='post-footer-line post-footer-line-3'>  abajo pegamos el siguiente código:

<div class='marcadores'>
<ul class='cat'>
<li class='cat-googlebuzz'><a alt='googlebuzz' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank' title='googlebuzz'/></li>

<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.- Para terminar damos Guardar plantilla y vemos como quedo.

 Visto en : pizcos