En esta oportunidad compartire con ustedes unos espectaculares marcadores sociales que vienen con efecto zoom (la imagen se vuelve mas grande al pasar el cursor sobre ella), este efecto zoom es logrado mediante CSS,lo cual no sobrecargara tu blog.

Puedes ver el truco funcionando en el siguiente blog de pruebas.


Para agregar este truco a tu blog debes pegar arriba de ]]></b:skin> lo siguiente:

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:48px; /* Ancho inicial imagénes. 100% real */
height:48px; /* Alto inicial imagénes. 100% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

Ahora con los artilugios expandidos pega lo siguiente debajo de  <div class=’post-footer’>  :

<div class='expandir'>
<div class='separator' style='clear: both; text-align:left;'>
<img border='0' src='http://1.bp.blogspot.com/-pMqrzWTd3L8/Tqwi7uY48HI/AAAAAAAAAco/CpKK3K32H-U/s145/topblogger-11%252520agosot%2525202011%2525282%252529038.png'/></div>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'><img src='http://1.bp.blogspot.com/-X5zmTGbE78I/Tzt20D1asxI/AAAAAAAAE-Y/ovkCBF7yt1I/s000/way2blogging-twitter.png'/><span>Twitter</span></a></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'><img src='http://1.bp.blogspot.com/-g7iysrErmVQ/Tzt2z_deDEI/AAAAAAAAE-Q/glYbzMAsd_k/s000/way2blogging-facebook.png'/><span>Facebook</span></a></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img src='http://1.bp.blogspot.com/-SQCcz1DFS6s/Tzt20xzEhQI/AAAAAAAAE_I/U_f-xJYpmEI/s000/way2blogging-reddit.png'/><span>Reddit</span></a></li>
<li> <a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'><img src='http://3.bp.blogspot.com/-EBDiqP13hhQ/Tzt20eie_ZI/AAAAAAAAE-o/5xonEYjdmbA/s000/way2blogging-stumbleupon.png'/><span>Stumbleupon</span></a></li>
<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Delicious'><img src='http://4.bp.blogspot.com/-9vbIFSJhWXc/Tzt20j5q8wI/AAAAAAAAE-4/3WDG8LYQ6xQ/s000/way2blogging-delicious.png'/><span>Delicious</span></a></li>
<li><a class='digg' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' href='http://www.blogger.com/blogger.g?blogID=2371828338899459493' rel='nofollow' target='_blank' title='Compartir en Digg This'><img src='http://4.bp.blogspot.com/-Ehx0v-Z5oqc/Tzt20uB4WSI/AAAAAAAAE-w/7U5Z5iuZk6M/s000/way2blogging-digg.png'/><span>Digg</span></a></li>
</ul>
</div>

Como ven es una muy estupenda forma de agregar los marcadores sociales que de seguro les gustara a tus lectores.


12 comentarios

RodriigoPro · noviembre 11, 2012 a las 12:11 am

Hola quiero sacar este truco de mi blog porque se me muy grande los iconos .Saludos

    Juvinao · noviembre 12, 2012 a las 7:56 pm

    Quitar el truco es muy facil, solo invierte los pasos que hicistes para agregarlos y listo.

Florian Danciu · noviembre 11, 2012 a las 3:03 pm

Mola Mazo pero falta google + eso es lo malo =(

    Juvinao · noviembre 12, 2012 a las 7:57 pm

    Florina muy cierto, fue un olvido por parte mia :?..

    Para la proxima sera 😛

Anonymous · noviembre 11, 2012 a las 4:05 pm

Me gustaria que tuviera bitacoras

Juvinao · noviembre 12, 2012 a las 7:59 pm

En unos proximos marcadores incluire los iconos que me han pedido.

Anonymous · noviembre 13, 2012 a las 1:24 am

He buscado por google y no encuentro solucion a mi problema, a ver si me puedes ayudar. Quiero reducir el espacio que tiene mi plantilla entre el primer post y la cabecera, que empice a la altura de los widges de la sidebar, mira aqui te dejo mi plantilla http://perfeccion-estetica.blogspot.com.es

saludos

    Juvinao · noviembre 13, 2012 a las 4:11 pm

    Amigo el blog que has puesto, tiene el acceso bloqueado.

    Xvip Videoxvip · noviembre 13, 2012 a las 6:58 pm

    Perdona, como lo estoy modificando habia puesto acceso solo a los autores del blog. Mira ahora

    Juvinao · noviembre 17, 2012 a las 8:42 pm

    Lo revisare y te dire cual es el problema 😛

Rubén Andrés González Socarrás · noviembre 19, 2012 a las 4:06 pm

Hola amigo. Tengo un problema con este truco y es que cuando lo puse los botones aparecen de forma vertical y eso alarga mucho la entrada y tuve que quitarlos. Me gustaría que me dieras una solución porque quiero ponerlos. Gracias

Chucky Lee Ray · diciembre 28, 2012 a las 3:31 pm

A mi me pasa lo mismo que Rubén Andrés sale en forma vertical, enorme, y no hace zoom.

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *