En este tutorial os voy a mostrar una forma muy original de colocar los botones de compartir bajo cada entrada de tu blog.
El gadget es flotante y se ve elegante. En todas las entradas después de desplazarse el gadget se abrirá en la parte inferior de la pantalla. El gadget contiene tres botones sociales para compartir - Facebook, Twitter, Google+. Hay un apartado para cerrar dichos botones.
Este truco lo vi en Oloblogger pero lo he modificado y unido junto a una entrada que ya compartí hace tiempo Agregar botones para compartir en redes sociales
Una demostración en vivo se puede ver en mi propio blog. Simplemente desplácese hacia abajo hasta la sección de comentarios y aparecerá esta barra en acción. También puede cerrar haciendo clic en el apartado de cierre.
Una vez que haya visto la demo para añadir este gaddget en tu blog sólo tienes que seguir los siguientes pasos.
Agregar el script
1.- Ir a → Plantilla → Edición de HTML. Presione Ctrl + F y buscar </body> y pegue el siguiente código antes de ello:
<script type='text/javascript'>$(window).scroll(function(){ if($(document).scrollTop()>=$(document).height()/5) {
$('#socialslide').show('slow');
} else {$('#socialslide').hide('slow');}
});
function closesocialslide(){
$('#socialslide').remove();
;}
</script>
Agregar los botones
2.- A continuación buscamos <div class='post-footer'> (!ojo normalmente existen 2!) pegue el siguiente código bajo el Segundo:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#socialslide {display: none;overflow: hidden;position: fixed;bottom: 0px;left:0;width: 100%;margin: 0;padding: 0 0 28px;font-size: 18px;z-index: 100000;
background-color: rgba(128, 128, 128, 0.4); border-radius: 8px;box-shadow: inset 0 0 4px #fff;}
#socialslide a {position: absolute;top: 6px;right: 4px;color: #000;font-size: 20px;font-weight: bold;}
#socialslide > a + div {text-align: center;margin: 0;padding: 10px;background: #ccc;color: #000;box-shadow: inset 0 0 4px #fff;}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:495px;overflow:hidden;margin-left:130px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:6px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:25px; position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228} </style>
<div id='socialslide' style='display: none;'>
<a href='javascript:void(0);' onclick='return closesocialslide();'>cerrar - X</a>
<div>¿No crees que esta entrada debe ser compartida?</div>
<div style='width: 800px; margin: 20px auto;'>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=true&width=105&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:20px'/>
</div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='' href='https://twitter.com/share'> Tweet </a><script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script></div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div>
<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script></div> </div></div></div></b:if>
Ahora ya puedes disfrutar de tus Botones de compartir flotantes