Cómo poner un texto deslizante o en serpentina en Blogger con HTML (y darle un poco de vida a tu blog)

Hay pequeños detalles que marcan la diferencia. Un buen encabezado, una imagen atractiva, una tipografía agradable... y, por qué no, un texto que se deslice suavemente por la pantalla dando la bienvenida a nuestros visitantes.

No, no estamos hablando de viajar en el tiempo hasta los años dorados de Internet (aunque algunos echarán una lagrimita de nostalgia). Hablamos de utilizar un recurso visual de forma elegante, moderada y con buen gusto.

Porque sí, un texto deslizante puede llamar la atención... pero si ponemos cinco al mismo tiempo, con colores fluorescentes y música MIDI de fondo, hasta el navegador pedirá vacaciones.

Hoy vamos a aprender a crear un texto deslizante o en serpentina para Blogger utilizando HTML y CSS, de forma sencilla y totalmente personalizable.

¿Para qué sirve un texto deslizante?

Este efecto resulta ideal para:

• Anunciar novedades del blog.
• Informar sobre promociones.
• Mostrar mensajes importantes.
• Dar la bienvenida a los lectores.
• Recordar la publicación de nuevos artículos.
• Compartir enlaces destacados.

La clave está en utilizarlo con moderación para que complemente el diseño y no distraiga al visitante.

Código HTML para Blogger

Copia este código dentro de un gadget HTML/Javascript o directamente en la entrada donde quieras mostrar el efecto.

<div class="texto-deslizante">
  <span>✨ Bienvenido a Zarabarandula • Gracias por visitarnos • Descubre nuestras últimas publicaciones • ¡Disfruta de la lectura! ✨</span>
</div>

<style>
.texto-deslizante{
    width:100%;
    overflow:hidden;
    background:#f7f7f7;
    border:1px solid #ddd;
    padding:10px 0;
    white-space:nowrap;
    box-sizing:border-box;
}

.texto-deslizante span{
    display:inline-block;
    padding-left:100%;
    animation:deslizar 18s linear infinite;
    font-size:18px;
    color:#444;
    font-weight:bold;
}

@keyframes deslizar{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}
</style>

¿Cómo personalizar el efecto?

Puedes modificar prácticamente todo.

Cambiar el color del texto

Busca:

color:#444;

y sustituye el color por el que prefieras.

Cambiar el fondo

Busca:

background:#f7f7f7;

Puedes poner cualquier color hexadecimal.

Ejemplo:

background:#222;

Cambiar el tamaño

Modifica:

font-size:18px;

Puedes utilizar:

• 16px
• 20px
• 24px

según el diseño de tu plantilla.

Cambiar la velocidad

En esta línea:

animation:deslizar 18s linear infinite;

Cuanto mayor sea el número, más despacio se moverá.

Ejemplos:

• 10s → rápido
• 18s → equilibrado
• 30s → muy tranquilo

Como una tarde de domingo con café y sin notificaciones.

¿Y si quiero que vaya en sentido contrario?

Muy sencillo.

Cambia:

transform:translateX(-100%);

por

transform:translateX(100%);

y adapta el punto de inicio según tus necesidades.

¿Puedo añadir iconos?

Por supuesto.

Puedes utilizar emojis:

✨ ⭐ 📢 📌 ❤️ 🎉 🚀

O insertar iconos de Font Awesome si tu plantilla ya los incorpora.

¿Dónde puedo colocarlo?

Algunas ideas:

• Debajo de la cabecera.
• Encima de las entradas.
• En la barra lateral.
• En el pie del blog.
• Dentro de una página estática.

Incluso puede servir como una pequeña "barra informativa" permanente.

Un pequeño consejo de diseño

En diseño web, menos suele ser más.

Un texto deslizante elegante puede aportar dinamismo.

Cinco textos deslizantes, tres relojes digitales, un contador de visitas y un pez siguiendo el cursor...

...pueden convertir tu blog en una exposición arqueológica de Internet del año 2003.

La moderación siempre será tu mejor aliada.

Ventajas de este método

✔ Compatible con Blogger.

✔ No necesita JavaScript externo.

✔ Funciona en la mayoría de navegadores modernos.

✔ Es ligero.

✔ Fácil de modificar.

✔ Totalmente gratuito.

Conclusión

Los pequeños efectos visuales siguen teniendo su encanto cuando se utilizan con criterio. Un texto deslizante puede ayudarte a destacar información importante, dar personalidad a tu blog y ofrecer una bienvenida original a tus lectores sin complicarte con herramientas externas.

Como ocurre con cualquier elemento decorativo, el secreto está en encontrar el equilibrio: que acompañe al contenido y no le robe el protagonismo. Al fin y al cabo, quienes visitan tu blog vienen por lo que escribes… aunque un toque de movimiento bien colocado siempre puede arrancar una sonrisa.

Si decides probar este recurso, experimenta con los colores, la velocidad y el mensaje hasta que encaje con el estilo de tu sitio. Blogger sigue ofreciendo muchas posibilidades para personalizar cada rincón, y este es un buen ejemplo de cómo unas pocas líneas de código pueden aportar un resultado muy vistoso.

¡Anímate a darle movimiento a tus ideas!

Recursos útiles

HTML Color Picker

https://htmlcolorcodes.com/

Para encontrar colores en formato hexadecimal y crear combinaciones atractivas.

Google Fonts

https://fonts.google.com/

Miles de tipografías gratuitas para personalizar tu blog.

Font Awesome

https://fontawesome.com/

Biblioteca de iconos para enriquecer tus diseños.

MDN Web Docs

https://developer.mozilla.org/

La mejor documentación sobre HTML, CSS y desarrollo web.

¿Necesitas ayuda?

Si el código no funciona en tu plantilla, quieres adaptarlo al diseño de tu blog o deseas añadir nuevos efectos (texto continuo, doble dirección, pausa al pasar el ratón, degradados, iconos animados o integración con otros elementos de Blogger), déjame un comentario al final de esta entrada.

Estaré encantado de ayudarte a encontrar la solución más adecuada. En Zarabarandula seguimos compartiendo trucos, recursos e ideas para que tu blog luzca cada día mejor… sin necesidad de hacer un máster en programación ni de negociar con el inspector de los píxeles rebeldes.