Sticky es un plugin de jQuery (totalmente compatible con Blogger) que nos da la capacidad de mantener cualquier elemento de nuestras páginas permaneciendo siempre visible en la pantalla. Cuando el usuario vuelve arriba de todo de la página, el elemento o grupo de ellos vuelve al mismo exacto en donde estaba originalmente.
Esta es una estupenda y totalmente lícita forma para centrar más atención en contenido importante. Algo que es muy relevante si tenemos en cuenta que Internet es muchas veces territorio de una sola oportunidad.
El modo en que tenemos que usarlo es bastante sencillo. Copiaremos este código en la sección <head> de la plantilla de nuestro blog para tener la mitad del trabajo hecho;
Ahora, con el elemento a fijar preescogido, la forma más usual de proceder es reemplazando el término #sticker, que acabamos de pegar, por el valor del atributo id del elemento que queramos fijar. Por ejemplo; #mi-anuncio-banner-300x300. Quedaría así, y podría añadir otro como aquí:
Hay que prestar siempre atención de hacer este etiquetado en el elemento padre (el elemento que puede contener otros elementos más pequeños que forman parte de tal elemento) y no en partes de él, de este modo se desplazará dicha parte y dejará al resto del elemento en el sitio.
Por ejemplo, para hacer esto con la barra lateral de nuestro blog de Blogger, el elemento a hacer "stick" sería $(".column-right-outer").sticky({topSpacing:0}); Fijaos en en lugar del símbolo # usa un punto (.). Esto es debido a los selectores CSS.
Una forma muy sencilla de averiguar estos elementos es navegar por el código fuente de la página, pero mucho más práctico es buscar cada elemento con la herramienta del navegador.
Este plugin tiene muchas más opciones que permiten un funcionamiento más óptimo:
Tenéis más info y posibles actualizaciones en: github.com/garand/sticky. No os olvidéis de guardar los cambios en la plantilla y comprobar que funciona según lo previsto.
Recomiendo echarle un ojo a los demos de la página del plugin, pues son muy claros y elegantes. En realidad podría recomendar este antes que el anterior, pero el anterior sí lo probé y este no. Tiene también bastantes características así que merece ser visto.
Para conocer el ID de un widget de blogger podemos pulsar en el botón de editarlo desde la vista de usuario y ver el final de la URL de la ventana que se abrirá. Después lo buscaremos en el código de nuestro blog con esta forma: <b:widget id='nombredeID'... Donde "nombredeID" es el ID del widget.
Realmente Sticky y Sticky-Kit son solo algunos de los muchos plugins jquery que hacen prácticamente lo mismo y aquí algunas variaciones.
.png) |
| Así es exactamente como funciona, pero con cualquier elemento. |
Esta es una estupenda y totalmente lícita forma para centrar más atención en contenido importante. Algo que es muy relevante si tenemos en cuenta que Internet es muchas veces territorio de una sola oportunidad.
Cómo mantener cualquier elemento web siempre visible cuando las visitas se desplazan por las páginas con Sticky
Antes de nada y muy importante; haz una copia de seguridad de tu plantilla. En Blogger usa el botón 'Crear/Restablecer copia de seguridad'.
<script src="http://exprimiserver.esy.es/recursos/jquery-2.1.3.min.js"></script>
<script src="http://exprimiserver.esy.es/recursos/sticky/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});</script>
Ahora, con el elemento a fijar preescogido, la forma más usual de proceder es reemplazando el término #sticker, que acabamos de pegar, por el valor del atributo id del elemento que queramos fijar. Por ejemplo; #mi-anuncio-banner-300x300. Quedaría así, y podría añadir otro como aquí:
<script src="http://exprimiserver.esy.es/recursos/jquery-2.1.3.min.js"></script>
<script src="http://exprimiserver.esy.es/recursos/sticky/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#mi-anuncio-banner-300x300").sticky({topSpacing:0});
$("#mi-otro-banner-300x300").sticky({topSpacing:0});
});</script>
Hay que prestar siempre atención de hacer este etiquetado en el elemento padre (el elemento que puede contener otros elementos más pequeños que forman parte de tal elemento) y no en partes de él, de este modo se desplazará dicha parte y dejará al resto del elemento en el sitio.
Por ejemplo, para hacer esto con la barra lateral de nuestro blog de Blogger, el elemento a hacer "stick" sería $(".column-right-outer").sticky({topSpacing:0}); Fijaos en en lugar del símbolo # usa un punto (.). Esto es debido a los selectores CSS.
Una forma muy sencilla de averiguar estos elementos es navegar por el código fuente de la página, pero mucho más práctico es buscar cada elemento con la herramienta del navegador.
Este plugin tiene muchas más opciones que permiten un funcionamiento más óptimo:
- topSpacing: píxeles entre la parte superior de la página y la parte superior del elemento
- bottomSpacing: píxeles entre el final de la página y la parte inferior del elemento
- className: Añade clase CSS al elemento del contenedor
- wrapperClassName: Añade clase CSS al contenedor
- getWidthFrom: Selector de elemento de referencia para establecer la anchura fija
- responsiveWidth: determina de forma booleana si los anchos se calcula al redimensionar la ventana (usando getWidthfrom).
Sticky-Kit; te permite hacer lo mismo, pero manteniendo el elemento seleccionado siempre dentro del elemento "padre"
Sticky-Kit es otro plugin jQuery para crear fácilmente elementos que se mantienen siempre visibles en la pantalla, es decir, se desplazan con el scroll de la página. Pero tiene un enfoque diferente, para hacer que los elementos se mantengan siempre dentro del elemento padre (de todos modos creo que se puede hacer con el anterior, agradezco confirmación).Recomiendo echarle un ojo a los demos de la página del plugin, pues son muy claros y elegantes. En realidad podría recomendar este antes que el anterior, pero el anterior sí lo probé y este no. Tiene también bastantes características así que merece ser visto.
Cómo mantener cualquier bloque o bloques de elementos siempre visibles en Blogger
Cómo bloque de elementos podemos entender cualquier cosa que agrupemos dentro de un div. Usando el valor de su id en el script conseguimos que el mismo efecto se aplique a todo ese elemento contenedor.
Para conocer el ID de un widget de blogger podemos pulsar en el botón de editarlo desde la vista de usuario y ver el final de la URL de la ventana que se abrirá. Después lo buscaremos en el código de nuestro blog con esta forma: <b:widget id='nombredeID'... Donde "nombredeID" es el ID del widget.
Cómo hacer que funcione diferente en cada o determinado tipo de página de tu sitio Blogger
Realmente es más complicado de que podría parecer en un principio, tendríamos que crear dos elementos y mostrar uno sí y otro no según en que páginas nos interese. Un poco lío pero no extremadamente complicado.
En esta entrada de Ciudad Blogger os explican como hacer que los widgets se oculten o muestren dependiendo del tipo de página en donde se encuentren.
En esta entrada de Ciudad Blogger os explican como hacer que los widgets se oculten o muestren dependiendo del tipo de página en donde se encuentren.
Evitar el solapamiento con otros elementos
Para un mejor funcionamiento -no hay limitaciones en este aspecto, pero los elementos se suelen solapan- es recomendable usarlo con elementos o grupos de ellos que no tengan otro elemento por debajo. A no ser que se quiera conseguir algún efecto extraño.
Si queremos que el elemento a destacar -o cualquier otro- podemos recurrir a "la tercera dimensión" de CSS; el atributo z-index.
Evidentemente es recomendable usarlo cualquier banner de publicidad o elemento que nos interese destacar sobre los demás.
Si queremos que el elemento a destacar -o cualquier otro- podemos recurrir a "la tercera dimensión" de CSS; el atributo z-index.
Evidentemente es recomendable usarlo cualquier banner de publicidad o elemento que nos interese destacar sobre los demás.
Realmente Sticky y Sticky-Kit son solo algunos de los muchos plugins jquery que hacen prácticamente lo mismo y aquí algunas variaciones.