Marcadores Sociales con efecto Zoom para Blogger

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

12 thoughts on “Marcadores Sociales con efecto Zoom para Blogger

  • noviembre 11, 2012 en 12:11 am
    Permalink

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

    Responder
    • noviembre 12, 2012 en 7:56 pm
      Permalink

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

      Responder
    • noviembre 12, 2012 en 7:57 pm
      Permalink

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

      Para la proxima sera 😛

      Responder
  • noviembre 11, 2012 en 4:05 pm
    Permalink

    Me gustaria que tuviera bitacoras

    Responder
  • noviembre 13, 2012 en 1:24 am
    Permalink

    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

    Responder
  • noviembre 19, 2012 en 4:06 pm
    Permalink

    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

    Responder

Deja un comentario

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