¿Qué son las marquesinas y cómo funcionan?
Las marquesinas son elementos web que presentan texto en movimiento horizontal o vertical a lo largo de la pantalla.
En términos de funcionamiento, las marquesinas son implementadas mediante código HTML y CSS. Pueden ser creadas manualmente o utilizando herramientas en línea que generan el código necesario. Es esencial recordar que las marquesinas pueden afectar la accesibilidad y la usabilidad del sitio, por lo que su uso debe ser cuidadosamente considerado.
Pasos para incluir marquesinas en Blogger
Selecciona el texto: Decide qué información deseas mostrar en la marquesina. Puede ser un mensaje de bienvenida, anuncios destacados o cualquier contenido que desees resaltar.
Genera el código: Utiliza herramientas en línea para generar el código HTML y CSS necesario para crear la marquesina. Asegúrate de ajustar las opciones según tus preferencias, como la velocidad de desplazamiento y el estilo del texto.
Accede al diseño del blog en Blogger: Inicia sesión en tu cuenta de Blogger y ve al panel de control. Selecciona la opción "Diseño" en el menú lateral.
Agregar un gadget HTML/Javascript: En la sección donde deseas que aparezca la marquesina, haz clic en "Agregar gadget" y elige la opción "HTML/Javascript".
Pega el código generado: Copia y pega el código HTML y CSS que generaste en el paso 2 en el campo correspondiente del gadget HTML/Javascript.
Guarda y revisa tu blog: Guarda los cambios y revisa tu blog para asegurarte de que la marquesina se muestra correctamente. Ajusta el código según sea necesario.
A continuación, te presento una lista de todas las posibles combinaciones de atributos que puedes utilizar con la etiqueta <marquee> en HTML.
Dirección de Desplazamiento:
direction="left": Desplazamiento de izquierda a derecha.
direction="right": Desplazamiento de derecha a izquierda.
direction="up": Desplazamiento de arriba a abajo.
direction="down": Desplazamiento de abajo a arriba.
Comportamiento de Desplazamiento:
behavior="scroll": Desplazamiento continuo.
behavior="slide": Desplazamiento que se detiene al llegar al final.
Número de Veces que se Repite:
loop="n": Número de veces que la marquesina se repetirá. loop="infinite" para un bucle infinito.
Velocidad de Desplazamiento:
scrollamount="n": Velocidad de desplazamiento, donde "n" es un número. Cuanto mayor sea el número, más rápido será el desplazamiento.
Distancia entre Repeticiones:
scrolldelay="n": Tiempo en milisegundos entre repeticiones.
Comportamiento al Pasar el Ratón:
onmouseover="this.stop()": La marquesina se detiene cuando el ratón está sobre ella.
onmouseout="this.start()": La marquesina se reinicia cuando el ratón sale de ella.
Comportamiento Alternante:
behavior="alternate": La marquesina alterna entre la dirección especificada y su opuesta.
Estilo del Texto:
width="n": Ancho de la marquesina en píxeles o porcentaje.
height="n": Altura de la marquesina en píxeles.
bgcolor="color": Color de fondo de la marquesina.
color="color": Color del texto de la marquesina.
Contenido HTML dentro de la Marquesina:
Puedes incluir texto, imágenes u otros elementos HTML dentro de la marquesina.
A continuación, un ejemplo combinando varios de estos atributos:
<marquee behavior="scroll" direction="left" loop="infinite" scrollamount="5" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" width="80%">¡Bienvenidos a mi Blog!</marquee>