mayo 09, 2015

Como crear un widget fijo en Blogger

Muchas veces para algunos usuarios es importante que un widget o gadget de nuestro blog permanezca fijo en el sidebar o como una barra superior horizontal en la cabecera del blog.

Lo que veremos ahora es una forma fácil de lograrla y que resulta muy útil cuando tienes contenido extenso y quieres aprovechar el espacio de tu sidebar o que no luzca en blanco.


La instalación

Lo primero hacemos es buscar el cierre de la etiqueta BODY y antes pegamos este código:
<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("ID del widget");
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>
<style>
.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;}
</style>
En el código anterior buscamos la primera línea:
bs_makeSticky("ID del widget");
Y ahí ingresamos la ID de nuestro widget.

Guardamos los cambios y podremos ver los resultados inmediatos. De hecho este es el mismo código que usamos en el sidebar de este blog.

¿Qué te ha parecido?

Te ha gustado este post?

No te pierdas las novedades. Suscribete!!

Tambien debes Leer: