Mil Trucos Blogger

Marcadores Sociales con efecto Zoom para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. Noviembre 11, 2012    

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

    • Noviembre 12, 2012    

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

  2. Noviembre 11, 2012    

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

    • Noviembre 12, 2012    

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

      Para la proxima sera 😛

  3. Anonymous Anonymous
    Noviembre 11, 2012    

    Me gustaria que tuviera bitacoras

  4. Noviembre 12, 2012    

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

  5. Anonymous Anonymous
    Noviembre 13, 2012    

    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

    • Noviembre 13, 2012    

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

    • Noviembre 13, 2012    

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

    • Noviembre 17, 2012    

      Lo revisare y te dire cual es el problema 😛

  6. Noviembre 19, 2012    

    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

  7. Diciembre 28, 2012    

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

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo