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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQ8ceKDL8SNCj7LHynq8ck0KAdVgx9bzRzcza-_hOAGASWmJoWNG8EphNWnkbsE2DuBhbj-hVw_oZ8isEZmtjUREip41TfGS2g1TeR9FMBZuESEn-NIOctSH4cgal42Ii6MoCEvLEmqLI/s145/topblogger-11%252520agosot%2525202011%2525282%252529038.png'/></div>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + ": " + data:post.url' rel='nofollow' target='_blank' title='Twittear'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqNcN4kZ5EqCnfJ3VjhGj8M6byUIzXWvS8TLbyp2VcYNGnHOMFywdyfQpO6pnor9cfi5zfW0hcNrAwOU1IvxhG0WyVlqocx5YTKireKwNTE80wjyerBIO_3CxxA43H6p6Ep49oByrilS7/s0/way2blogging-twitter.png'/><span>Twitter</span></a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url+ "&title=" + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZUcDdppuTPDFkBJK-TH9rsCR9iq_izU-j9XGCl76ngllok5iw6pGV9umAlwZdjmqwG30ubPGVWWjQ00xdXDp5wRatFz_njQgbaLNpoZg7FsO8OtQfzOAcZl18vuIp812N9pfXvkSDeMTj/s0/way2blogging-facebook.png'/><span>Facebook</span></a></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuP5GE3VcBulGx9fqFrflMcKlbU9P195VRJfTYkQ91QLq69dXfiu7h8GBzdyZS_PU8lEd8u061WFONyl1foNoYfV1ZbvVVT5xUx_SpNVrN7yA_cUghxiWPNltamZp3qrCJhYpTLV1VKH4/s0/way2blogging-reddit.png'/><span>Reddit</span></a></li>
<li> <a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8a9Uy74w177Dy47aiPUIeM8qfX6WEDWCelsAsbYxqn5_4k7BK9uiVDy9-zEHTcps4Wl6K5YYz6pqNY4hetyu1ZbcVeKsSmxaodKjqq8A7lCHVwYNLxJQb0Ihg-mAmaQaWTd6mwBrAJS1F/s0/way2blogging-stumbleupon.png'/><span>Stumbleupon</span></a></li>
<li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Delicious'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqyK29KvM6YtaYIh4FmzVUvAmQHoQyhHbRqEUyIqAmhJtwcFUoPBXdMYE7SN-ybD7yuvSezLirqxP-EMNp5AFhWy82FavefciNqaCyRtUfc2HCW3LX2SS6nmO8XWC05Lb3WbqcrFHZuxJi/s0/way2blogging-delicious.png'/><span>Delicious</span></a></li>
<li><a class='digg' expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' href='http://www.blogger.com/blogger.g?blogID=2371828338899459493' rel='nofollow' target='_blank' title='Compartir en Digg This'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFn_ypk6T2LrTDcWuduCtK4vFaCz7f-pZuy1sC-Y8bfIwGhm3fqRY29O6uOxDgLvXgV5clDYbbhIFDP4tGrDDOxJ4NB6oqjKiRDrGAYwsFpP9LlYAIW__4x-ogCRyDx1UD7JkzvahSu8XB/s0/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.