19 julio 2014

Botones de compartir flotantes al hacer scroll

Botones de compartir flotantes al hacer scroll

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


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()&gt;=$(document).height()/5) {
$(&#39;#socialslide&#39;).show(&#39;slow&#39;);
} else {$(&#39;#socialslide&#39;).hide(&#39;slow&#39;);}
});
function closesocialslide(){
$(&#39;#socialslide&#39;).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 == &quot;item&quot;'>
<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 &gt; 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 &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#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>&#191;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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=105&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' 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)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</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(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
}
)();
</script></div>   </div></div></div></b:if>

Ahora ya puedes disfrutar de tus Botones de compartir flotantes

14 comentarios

WoW thanks amigo como siempre de los mejores...

ocupa ayuda tuya es una plantilla de blogger cual es tu email.

ok gracias como siempre usted es el único me ayudado en toda la red y he aprendido un poco en esto de la plantillas...

Muy bueno una pregunta como puedo poner entradas relacionadas como la tuya ..?? Gracias.

Hola nuevamente amigo eh logrado clocar el el truco pero me aparece deforme jeje espeor puedas ayudarme http://adictos-alared.blogspot.mx/

Este comentario ha sido eliminado por el autor.

buenas hermano , logre colocar tu codigo y todo perfecto :D lo que me gustaria saber es si puedo editarlo para adaptar los colores de mi blog? y de ser asi me dirias que debo editar , claro si esta en tu posibilidad y disculpa el abuso y molestia :) seguire revisando tu blog a ver que implemento :D MUCHAS GRACIAS!!

Miguel para tu blog prueba cambiando esto:
background-color: rgba(128, 128, 128, 0.4); por background-color: rgba(0, 0, 0, 0.4);
En #socialslide a { el color: #000; por color: #fff;
En #socialslide &gt el background: #ccc;color: #000; por background: #000;color: #fff;
En #share-buttons el background:#FFF por background:#ccc;

Esto iría bien con tu plantilla y si no te gusta, esos son los códigos a cambiar.

--Saludos--

wuao como sabes cual es mi plantilla? me dejas asustado xD ok hare los cambio y observare :D GRACIAS!!!!

me gusta!!!! muchas gracias :D ire a tu editor de html que tienes aca a ver si puedo ver este codigo.. y si efectivamente puedo verlo y editar los codigos en tiempo real para ver los cambios ire probando *.* pero este que me diste esta BESTIAL jajaj de verdad GRACIAS!!! :D adios botones predeterminados de la plantilla :D

hermano no me funciono mas la cuestion del widget social.... que pasa? copie y pegue edite muchas veces y todo bien luego dejo de aparecer... lo elimine completo y lo agregue nuevamente y nada....que puedo hacer? gracias de antemano

Miguel déjame la url de tu blog para comprobarlo cuando pueda.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"