Caja emergente al hacer scroll

Este es otro código sencillo de acoplar al blog, ya que se puede añadir como gadget (tipo HTML en Blogger) y sólo es necesario copiar lo que después veremos dentro de él.

Lo peculiar es que aparece cuando se hace scroll en la página, a partir de determinada altura programada por nosotros. Y si se cierra manualmente pinchando el correspondiente símbolo (x) ya no volverá a aparecer hasta que no se refresque o se cargue otra página... para no molestar mucho.


Dentro he puesto para la oportuna demostración, los botones de Google+, Facebook y Twitter, pero de la misma manera y sólo cambiando esa parte, se puede utilizar para cualquier otra cosa, como podría ser un simple mensaje de aviso.

Se puede adornar como se quiera, pues para eso está el CSS, pero para probar, aquí está mi propuesta y si hacéis scroll veréis cómo queda.

<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>
<style type="text/css">
/* Contenedor general */
#socialslide {
display: none;
overflow: hidden;
position: fixed;
bottom: 30px;
left: 21px;
width: 134px;
margin: 0;
padding: 0 0 5px;
font-size: 12px;
background: black;
border-radius: 8px;
box-shadow: inset 0 0 4px #fff;
}  
/* Botón cerrar */
#socialslide a {
position: absolute;
top: 3px;
right: 4px;
color: #ccc;
font-size: 10px;
font-weight: bold;
}
/* Rótulo superior */
#socialslide > a + div {
text-align: center;
margin: 0;
padding: 10px;
background: #800000;
color: #fefefe;
box-shadow: inset 0 0 4px #fff;
}
</style>
<div style="display: none;" id="socialslide">
 <a href="javascript:void(0);" onclick="return closesocialslide();">X</a>
 <div>Recomendar</div>
 <!-- Google Plus -->
 <div style="width: 68px;height: 25px;margin: 10px auto 0;">
  <div class="g-plusone" data-size="medium"></div>
 </div>
 <!-- Facebook -->
 <div style="width: 105px;height: 25px;margin: 0px auto;">
  <iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/oloblogger&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe>
 </div>
 <!-- Twitter -->
 <div style="width: 105px;height: 25px;margin: 0px auto;">
  <a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</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>

En verde está marcada la dirección de mi página Facebook. Tendréis que cambiarla por la vuestra o sustituir todo el código por un Me gusta de los que apuntan a la página que se está viendo y no a la de Facebook.

Para que funcione hace falta tener instalada la librería jQuery. Si no la tenéis simplemente añadir antes de </head> la siguiente línea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Lo vi en un blog que arreglé el otro día, así que no sabría adjudicar la autoría del invento.

X

Recomendar

Twittear

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter