¿Cómo poner una notita informativa?

Bienvenidas a otro viernes de tutoriales!!! Antes de nada quiero agradeceros a todas por el apoyo y por todo el amor que estoy recibiendo, de verdad que me llena el corazón ver a cuantas personas estoy ayudando 💗

Bueno, ahora bien, he estado poniendo cositas nuevas en mi blog y COMO NO iba a hacerles tutorial a mis niñas más guapas. Así que aquí tenéis un tutorial de cómo poner estos post its que se mueven en vuestro blog:

Aprovecho para promocionar mi nuevo libro jijiji, ir a leer el primer capítulo que está muy chulo.

Bueno vamos a centrarnos, este proceso es muy fácil SIN EMBARGO tiene su ligera complicación a la hora de poner más de un post it en tu blog, ahora veremos de qué trata eso.

Primero de todo, aquí tienes el código de este gadget:

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

<div class="notita-postit-wrapper">

  <div class="notita-postit">

    <div class="notita-title">TÍTULO DE LA NOTA</div>

    <div class="notita-text">

      Texto de la nota

    </div>

  </div>

</div>

<style>

.notita-postit-wrapper{

  width: 00px;

  display:flex;

  justify-content:center;

  align-items:center;

  pointer-events:none;

}

/* POSTIT */

.notita-postit{

  width: 00px;

  background: #00000;

  padding: 22px 20px;

  box-sizing: border-box;

  position: relative;

  transform: rotate(-2deg);

  transform-origin: top center;

  box-shadow: 0 18px 25px rgba(0,0,0,0.25);

  animation: libro-sway 4s ease-in-out infinite;

}

/* esquinas dobladas */

.notita-postit:before,

.notita-postit:after{

  content:"";

  position:absolute;

  width: 0;

  height: 0;

  border-style: solid;

  opacity: 0.35;

}

.notita-postit:after{

  bottom:0;

  right:0;

  border-width: 0 0 26px 26px;

  border-color: transparent transparent #00000 transparent;

}

.notita-postit:before{

  top:0;

  left:0;

  border-width: 26px 26px 0 0;

  border-color: #00000 transparent transparent transparent;

}

/* TÍTULO SOLO DE ESTE WIDGET */

.notita-title{

  font-family: 'Slackey', cursive !important;

  color: #00000;

  text-align:center;

  font-size: 00px;

  margin-bottom: 12px;

  position: relative;

}

.notita-title:before{

  left:0;

  transform: translateY(-50%);

}

.notita-title:after{

  right:0;

  transform: translateY(-50%);

}

/* TEXTO */

.notita-text{

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

  color: #00000;

  font-size: 00px;

  text-align:center;

  line-height: 1.4;

}

/* animación */

@keyframes notita-sway{

  0%   { transform: rotate(-2deg) translateX(0px); }

  25%  { transform: rotate(-1deg) translateX(1px); }

  50%  { transform: rotate(-2.5deg) translateX(-1px); }

  75%  { transform: rotate(-1deg) translateX(1px); }

  100% { transform: rotate(-2deg) translateX(0px); }

}

</style>

Bien, ahora vamos paso a paso: primero vas a copiar el código en notas para poder modificarlo a gusto, segundo vas a tener atención de que no borres NINGÚN espacio ni ninguna comilla (el 90% de la gente que no consigue hacer sus gadgets y me pide ayuda es por este error) y tercero vas a seguir mis indicaciones poco a poco porque hay muchas cosas que ver.

Vamos a ir por partes, así será más fácil: en la primera parte en la que puedes editar encontrarás esto

"<div class="notita-title">TÍTULO DE LA NOTA</div> <div class="notita-text">Texto de la nota</div>"

aquí tienes que poner, como lo indica, el título y el texto (que puede ser todo lo largo que quieras).

Si seguirmos bajando encontrarás el primer "width: 00px;" en el que debes poner el tamaño de tu sidebar menos 40 px (por ejemplo: si tu sidebar mide 200px pues ahí entras que poner 160px / si tienes 290px, como yo, entonces se quedará en 250px); en el segundo que encuentres tendrás que poner el tamaño de tu sidebar menos 60px (pues con el ejemplo de antes tendrá que ser 140px / 230px en mi caso).

El siguiente paso es el "background: #00000;" del post it. Siempre recomiendo buscar el color que quieras en HTMLcolorcode y pegar el código que te guste en el lugar indicado.

Para los siguientes apartados de colores están "border-color: transparent transparent #00000 transparent;" y "border-color: #00000 transparent transparent transparent;" que son los colores de las esquinitas (el primero es el de abajo y el segundo el de arriba). Yo recomiendo utilizar colores menos saturados en uno más oscuro y el otro más claro. Si no quieres que las esquinas tengan colores diferentes simplemente pon el mismo color del fondo y ya no se verán.

El último paso es el de "font-family: 'Slackey'; color: #00000; font-size: 00px;" tanto para el texto como para el título. En la parte de font-family podrás cambiar el tipo de letra (recuerda poner el nombre de la letra completo); en la parte de color cambiarás el color LOL y en el font-size cambias el tamaño de la letra (para orientarte te voy a decir que yo lo tengo en el título a 18px y en el texto a 14px).

Ya estaría todo, pero ahora hay un dato importante si quieres poner más de una nota en tu blog, como lo tengo yo: ¿ves que en muchos apartados pone "notita"? (los he puesto todos de un color más oscuro para que los veas bien). Si quieres poner más post its tendrás que cambiar todas esas palabras (cuidado con borrar puntos o rayas) por cualquier otra palabra (lo más fácil es poner algo como "notita2" o algo así, no te compliques la vida. Una vez las hayas cambiado todas no tendrás interferencias entre post it.

El último paso, como todo el resto de tutoriales, es ir a la parte de Diseño de Blogger y elige en que sidebar vas a poner tu calendario. Dale ahora a "agregar un gadget" y busca HTML/JavaScript donde pegarás en la parte de contenido el código que has creado. Recuerda darle a guardar tanto en la parte del gadget como en la parte de abajo a la derecha en la pagina de Diseño.

Y ya estaría, espero que te haya servido y si tienes algún problema no dudes en decírmelo por los comentarios!! Nos vemoss