+Oloblogger nos mostró en el día de ayer
un simpático botón animado para compartir en 4 redes el cual trata de un gran botón rectangular con una frase invitando a compartir, que al pasar el puntero sobre él nos muestra tras un efecto, cuatro iniciales que son realmente enlaces para poder compartir la página que se está viendo en Facebook, Twitter, Google+ y Pinterest.
Aunque el mismo lo comenta:
Me ha gustado por su sencillez y sus posibilidades, pues desde el CSS podemos cambiar lo que queramos de su aspecto.
Me he tomado el placer de modificarlo un poco para aquellos que dicen
"una imagen vale más que mil palabras" y le he introducido imágenes y un par de redes más (Bitácoras y Linkedín).
Antes de mostraros el código podéis ver como queda
Ver Demo
Para instalarlo en vuestras plantillas deberéis seguir los siguientes pasos:
1.- Antes de
]]></b:skin> colocamos el siguiente
CSS
/* Botón único para compartir */
.share_button { width: 450px;height: 60px; margin: 10px auto; }
.share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; }
.share_button ul h1 { margin-top: 8%; overflow: hidden; width: 100%;color: #fff; font-size: 16px; }
.share_button ul li { position: absolute; height: inherit; width: 225px; margin: 0 !important; padding: 0 !important; background: #4F4E4E;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { display: inline-block; width: 30%; height: 35px; overflow: hidden; margin-top: 5%; cursor: pointer; border: 0 !important; }
.share_button ul li h2:hover { text-shadow:2px 2px 2px #555; }
.share_button ul li h2 a { color:#FFF; text-decoration: none; }
.share_button ul:first-child li:first-child{ text-align: right; }
.share_button ul:last-child li:first-child{ text-align: left; }
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
2.- Ahora buscamos
<div class='post-footer-line post-footer-line-1'> y a continuación pegamos el siguiente
HTML
<b:if cond='data:blog.pageType == "item"'><div class='share_button'>
<ul>
<li>
<h1>
Compartir e
</h1>
</li>
<li>
<h2>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Compartir en Facebook'><img height='31' src='http://www.adra-es.org/wp-content/themes/adra/images/new_socials/facebook.png' width='30'/></a>
</h2>
<h2>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Compartir en Twitter'><img height='31' src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT6frfJ6r6X5tulPKb988FXEionrbf3PXqjsQPD_u9jfmppzeQ0' width='30'/></a>
</h2>
<h2>
<a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Compartir en Google Plus'><img height='31' src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSCdBstNntP4xqDqktXeYWdDvWl-rl4W4hQz0CzvJYfUPp_P4FJ' width='30'/></a></h2>
</li>
</ul>
<ul>
<li>
<h1>
sta página
</h1>
</li>
<li>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Compartir en Pinterest'><img height='31' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2BPc7311aGaRRMZZigMImVcaa74fbn2RG-zkjYFN8GuumvSvHpw' width='30'/></a>
</h2>
<h2>
<a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' title='Compartir en Bitacoras'><img height='31' src='http://www.fromspaintouk.com/images/sociable/bitacoras.png' width='30'/></a></h2>
<h2>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&title=" + data:post.title + "&url=" + data:post.url + "&source=" + data:blog.title + "&summary=" + data:post.snippet' target='_blank' title='Compartir en Linkedin'><img height='31' src='http://catedraseat.upc.edu/media/ico_linkedin.png' width='30'/></a>
</h2>
</li>
</ul>
</div> </b:if>
Y esto es todo, ya tenéis vuestro botón de compartir al final de cada página.
Publicaciones Relacionadas
trucos blog
