Widget de post it - Tutorial

Hola,

hoy quería compartirles el tutorial de este widget porque no lo he visto en otro blog. Ojala les sirva!

Pasos:

1. Entrar en Blogger

2. Ir a Diseño

3. Elige la columna donde quieras colocarlo y pulsa Añadir un gadget

4. Elige HTML/JavaScript

5. Puedes ponerle un titulo si quieres o dejarlo vacío

6. Pega el código que te dejo abajo

--------------------------------------------------------------------------------------------

<div class="post-it-widget">

  <p class="post-it-text">

    📌 ¡Hola a todos! Escribe aquí el mensaje o aviso que quieras destacar en tu blog.

  </p>

</div>

<style>

  .post-it-widget {

    background: #f8bbf9; /* Color Post-it */

    color: #4a4a4a;

    padding: 20px;

    font-family: 'Comic Sans MS', cursive, sans-serif; /* Tipografia */

    font-size: 15px;

    line-height: 1.5;

    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.2);

    border-radius: 0 0 0 25px/35px; /* Efecto de esquina doblada */

    transform: rotate(-2deg); /* Ligera inclinación */

    margin: 15px auto;

    max-width: 250px;

    position: relative;

  }

  /* Alfiler en la parte superior */

  .post-it-widget::before {

    content: "";

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 14px;

    height: 14px;

    background: #9c27b0; /* Color del alfiler */

    border-radius: 50%;

    box-shadow: 0 2px 4px rgba(0,0,0,0.3);

  }

</style>

--------------------------------------------------------------------------------------------

Los comentarios que están dentro de /* */ no afectan al código, así que no se preocupen por ellos. También pueden cambiar los códigos de color del post-it o del alfiler a su gusto.

Ojalá les sirva y les resulte fácil de entender. Si tienen alguna duda, pueden dejarla en los comentarios o en el chat. Por alguna razón que todavía no entiendo, cuando intento responder sus comentarios me aparece un error. Espero que se solucione pronto.

Gracias por leerme una vez más. Nos vemos en la próxima entrada!

Flower