¿Cómo poner una barra de anuncios en tu blog?

Buenas otra vez en un viernes de tutoriales. Veo que mis tutoriales cada vez ayudan a más y más gente y estoy super contenta por ello la verdad.

Hoy os traigo mi nueva incorporación: la barra de anuncios con efecto Frutiger aero jijiji

Como siempre, primero de todo explicar que para poner el código, recomiendo copiar el que tengo aquí puesto y pegarlo en notas para evitarlo más cómodamente:

<link href="https://fonts.googleapis.com/css2?family=Gruppo&amp;display=swap" rel="stylesheet" />

<style>

.frutiger-marquee{

  width:100%;

  overflow:hidden;

  background:rgba(000, 000, 000,.45);

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

  border:2px solid rgba(255,255,255,.65);

  border-radius:30px;

  box-shadow:

    0 0 15px rgba(000, 000, 000,.6),

    inset 0 1px 4px rgba(255,255,255,.8);

  padding:10px 0;

  position:relative;

}

/* Brillo superior */

.frutiger-marquee:before{

  content:"";

  position:absolute;

  left:8px;

  right:8px;

  top:4px;

  height:40%;

  border-radius:25px;

  background:linear-gradient(

    to bottom,

    rgba(255,255,255,.75),

    rgba(255,255,255,0)

  );

  pointer-events:none;

}

/* Texto */

.frutiger-marquee-text{

  display:inline-block;

  white-space:nowrap;

  color:#00000;

  font-family:'Gruppo',sans-serif;

  font-size:00px;

  font-weight:bold;

  letter-spacing:2px;

  text-shadow:

    0 0 6px rgba(255,255,255,.8);

  animation:deslizar 14s linear infinite;

}

/* Animación */

@keyframes deslizar{

  from{

    transform:translateX(100%);

  }

  to{

    transform:translateX(-100%);

  }

}

/* Decoración */

.frutiger-marquee::after{

  content:"emojis emojis emojis";

  position:absolute;

  right:18px;

  top:50%;

  transform:translateY(-50%);

  font-size:17px;

  opacity:.75;

}

</style>

<div class="frutiger-marquee">

<div class="frutiger-marquee-text">

🫧 Escribe aquí y cambia los emojis si quieres ☁️🩷

</div>

</div>

Voy a ir explicándolo paso a paso: la primera parte "background:rgba(000, 000, 000,.45);" es en la que podemos cambiar el color de fondo y, como siempre digo, yo recomiendo la página de HTMLcolorcode para que busques el color que más te convenga para tu blog.

Después lo que sigue sería el color de la sombra que tiene nuestra barra "0 0 15px rgba(000, 000, 000,.6)," como en el color de antes, pues en el enlace podéis verlo.

Si sigues bajando, encontrarás una parte que pone texto "color:#00000; font-family:'Gruppo',sans-serif; font-size:00px;" ahí puede editar el color, el tamaño y la fuente de la letra, yo recomiendo dejar el tamaño a 20px, que es como lo tengo yo puesto para que las letras no se salgan de la barra.

Luego la parte de la decoración que se pone al principio de la barra "content:"emojis emojis emojis";", podéis modificarlo poniendo cualquier emoji. Y si queréis cambiarlo de lado en la parte que pone right:18px, pues cambiar el right por left y ya está.

Por último, abajo del todo está lo que podéis escribir en "🫧 Escribe aquí y cambia los emojis si quieres ☁️🩷". Ten siempre cuidado de no borrar ningún espacio ninguna " ni nada porque si no el código se puede romper.

Y esto sería todo la verdad es que es un tutorial muy sencillo y para aplicarlo al blog, tenéis que buscar en la parte de diseño el de multicolumnas (o en otros países, se llama todas las columnas) y añadirlo donde pone añadir gadget y seleccionar la opción de HTML/JavaScript.

Si por ejemplo tenéis en las multicolumnas el gadget de los copitos, que caen por la pantalla, nos preocupéis, porque podéis mover ese gadget a la parte de abajo, donde pone Fuster uno y dejar la barra de anuncios en el de multicolumnas.

Espero que os haya servido si tenéis alguna pregunta, no dudéis en dejármelas los comentarios!! Nos vemosss