Muchos de nosotros buscamos la forma de que alguno de nuestros gadgets pueda quedar estático cuando el lector hace scroll y va leyendo nuestro artículo. Bien sea para promocionar más artículos, para promocionar una suscripción por e-mail o para aumentar los "me gusta" en facebook y seguidores de nuestras páginas en ésta y otras redes sociales.
Cabe resaltar que colocar adsense en un gadget Sticky (flotante o estático: no es exactamente lo mismo pero el sentido es igual) no está permitido, y éso lo reconfirmé hace poco con un e-mail enviado al servicio de atención al cliente de adsense.
Pronto haré una entrada hablando de este tema. Entonces, retomando el tema principal del artículo, el código que les voy a proporcionar es para las plantillas responsive de blogger (puede servir para otras plataformas), ya que los códigos con el mismo sentido dirigido hacia las plantillas normales, no funcionará en una de tipo responsive (adaptable). Su implementación es muy sencilla.
Lo primero que haremos es ir a la edición html de nuestro blog y buscar la siguiente etiqueta:
]]></b:skin
Luego, arriba o encima de la misma, pegamos el siguiente código:
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
Quedaría como muestra la imagen:
Ahora vamos y buscamos la siguiente etiqueta:
</body>
Y justo arriba o encima de la misma copiamos el siguiente código:
<script>
// Sticky widget by Bloggersentral.com and Shipmethis.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html & http://www.shipmethis.com/2014/06/sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML 1"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
Ahora vamos y colocamos el ID de nuestro gadget reemplazándolo por el que está en color azul en el código anterior. El ID de nuestro gadget lo podemos encontrar fácilmente de la siguiente manera como muestro en la imagen:
En el caso del ejemplo de la imagen, la ID del gadget sería: PopularPosts1. Eso es lo que vamos a colocar en lugar del HTML1 pintado de color azul en el código anterior. Y listo, de esta manera logramos que ése gadget cuando hagamos scroll en nuestra web y la parte de superior de la ventana del navegador lo toque, éste empiece a bajar de forma estática y sostenida.
El ejemplo de la primera imagen lo muestra en la Sidebar, pero también puede tratarse de un gadget ubicado arriba o debajo del cuerpo de la entrada o en la cabecera.
¿Tienes algo que decir sobre este artículo? Compártelo con nosotros en:
