Ir al contenido principal

Cómo hacer bloques de anuncios que se desplazan al hacer scroll por la página

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.

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'. 

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;

<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).

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.

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.

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.

Realmente Sticky y Sticky-Kit son solo algunos de los muchos plugins jquery que hacen prácticamente lo mismo y aquí algunas variaciones.

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes