Búsqueda personalizada

17 de septiembre de 2010

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.




0 opiniones:

Publicar un comentario

Hola , el blog nesesita tu commentario asi que por favor escribe lo que tu de verdad quieras

Posicionamiento en buscadores

El secreto del Posicionamiento en Google está en los enlaces. Los buscadores valoran la popularidad de un sitio por el número de enlaces hacia el mismo y su calidad. Sin duda el posicionamiento web y el link building es un paso clave para cualquier blog.

Posicionamiento en buscadores

 

Copyright © 2011 Marketing y Posicionamiento en Internet. Trucos blogger | Design by Kenga Ads-template