❀˖° 𝐃𝐞 𝐭𝐨𝐝𝐨 𝐲 𝐧𝐚𝐝𝐚 ⋆. 𐙚 ˚

¿Cómo colocar un recuadro de frases? 

Holii, hoy regreso con una de mis secciones favoritas, que es la de tutoriales. Como dije en mi tutorial anterior, quiero ser más activa con esta parte de mi blog, ya que si me es posible quiero compartir cada uno de mis gadgets para que así ustedes también los puedan agregar en su blog. Como pueden ver, hoy les mostraré cómo colocar un recuadro de frases en su página; en lo personal fue algo muy sencillo, creo que tardé más buscando mis frases que nada. Y antes de continuar, recuerden que deben poner mucha atención para no borrar ningún punto, coma, signo ni nada, ya que esto puede dañar el código. Y bueno, una vez dicho esto, pasemos con el código, que es el siguiente:

<!-- 1. ESTILOS CSS (Diseño Forma de Nube) -->
<style>
  .dialog-cloud {
    max-width: 230px;
    margin: 15px auto;
    background: #E0F7FA;
    /* Forma acolchonada de nube */
    border-radius: 35px 35px 25px 25px;
    border: 3px solid #FFFFFF;
    padding: 10px;
    box-shadow: 0 8px 18px rgba(178, 235, 242, 0.7);
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    color: #ffffff;
  }

  /* Barra superior de la nube */
  .dialog-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 8px 8px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #1A5276;
    letter-spacing: 0.5px;
  }

  /* Interior estilo pantalla retro */
  .dialog-body {
    background: #2C3E50;
    border-radius: 18px;
    padding: 12px;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid #B2EBF2;
  }

  /* Etiqueta del Autor / Personaje */
  .dialog-author {
    display: inline-block;
    background: #B2EBF2;
    color: #1A5276;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
    align-self: flex-start;
  }

  /* Texto de la Frase */
  .dialog-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #E0F7FA;
    margin-bottom: 10px;
    min-height: 50px;
  }

  /* Cursor parpadeante */
  .cursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    background-color: #4DD0E1;
    margin-left: 2px;
    animation: blink 0.8s infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* Línea y botones */
  .dialog-footer {
    border-top: 1px dashed #5D6D7E;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #A3E4D7;
  }

  .btn-next {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #4DD0E1;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .btn-next:hover {
    background: #4DD0E1;
    color: #1A5276;
  }
</style>

<!-- 2. ESTRUCTURA DE LA NUBE -->
<div class="dialog-cloud">
  <div class="dialog-bar">
    <span>☁️ Frases ☁️</span>
    <span>✨</span>
  </div>

  <div class="dialog-body">
    <div>
      <div id="dialog-author" class="dialog-author">~ CARGANDO</div>
      <div class="dialog-text">
        <span id="dialog-content"></span><span class="cursor"></span>
      </div>
    </div>

    <div class="dialog-footer">
      <span id="dialog-counter">✨ 1/12</span>
      <button class="btn-next" onclick="nextQuote()">[ Siguiente ]</button>
    </div>
  </div>
</div>

<!-- 3. JAVASCRIPT SIN ERRORES DE CÓDIGO -->
<script>
  const quotes = [
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" },
    { author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje" }
  ];

  let currentIndex = 0;
  let charIndex = 0;
  let isTyping = false;
  let typingTimeout;

  function typeWriter() {
    const currentQuote = quotes[currentIndex];
    
    if (charIndex < currentQuote.text.length) {
      document.getElementById("dialog-content").innerHTML += currentQuote.text.charAt(charIndex);
      charIndex++;
      typingTimeout = setTimeout(typeWriter, 35);
    } else {
      isTyping = false;
    }
  }

  function showQuote(index) {
    clearTimeout(typingTimeout);
    isTyping = true;
    
    const quote = quotes[index];
    document.getElementById("dialog-author").innerHTML = quote.author;
    document.getElementById("dialog-content").innerHTML = "";
    document.getElementById("dialog-counter").innerHTML = `✨ ${index + 1}/${quotes.length}`;
    
    charIndex = 0;
    typeWriter();
  }

  function nextQuote() {
    if (isTyping) {
      clearTimeout(typingTimeout);
      document.getElementById("dialog-content").innerHTML = quotes[currentIndex].text;
      isTyping = false;
    } else {
      currentIndex = (currentIndex + 1) % quotes.length;
      showQuote(currentIndex);
    }
  }

  showQuote(0);
</script>

Bien, una vez que hayan copiado y pegado el código deberán editarlo. Para comenzar, en la línea 6 podrán cambiar el color del fondo exterior de la nube: en .dialog-cloud cambian #E0F7FA por el color que más les guste. Como ya saben, pueden utilizar la siguiente página para encontrar los códigos: htmlcolorcodes.

Para continuar, en la línea 12 pueden cambiar la tipografía: en .dialog-cloud deben cambiar "Courier New" por la fuente que más deseen. Recuerden copiar bien el nombre de la fuente para que no haya ningún error.

A continuación, en la línea 28 cambiaremos el color del fondo interior de la pantalla. Para esto deben ubicar la parte donde dice .dialog-body y cambiar #2C3E50 por el tono que deseen para la pantalla de texto.

En la línea 42 vamos a cambiar el fondo del nombre del autor; para esto deben ubicar .dialog-author y cambiar #B2EBF2 por el color que más combine con la temática de su blog.

Lo siguiente que vamos a hacer es cambiar el color del cursor, que es la línea que aparece al final de cada texto. Deben buscar la línea 60, exactamente donde dice .cursor, y un poco más abajo en donde dice background-color: #4DD0E1 ahí cambiarán #4DD0E1 por el color que quieran. Me siento disco rayado repitiendo esto, pero es parte del tutorial. 🙃

Ya estamos llegando a la parte final: en la línea 102 vamos a buscar la sección de <div class="dialog-cloud">. Esta es la parte intermedia del código donde se cambia el texto visible fijo, aquí pueden cambiar "☁️Frases☁️" por cualquier otro texto que deseen colocar o bien simplemente cambiar los emojis.

Ahora vamos a ir con los últimos dos pasos: colocar la frase, el nombre del autor y la velocidad de cada texto. En la línea número 119 encontrarán la sección <script> y una línea abajo verán la parte para editar el nombre del autor y la frase que deseen poner, exactamente donde dice author: "~ Nombre o autor", text: "Escribe aquí tu frase o mensaje". Es importante que no borren ninguna comilla ni espacio, ya que esto podría afectar el código.

Finalmente, el último paso: si bajan un poco más encontrarán la parte de setTimeout(typeWriter, 35);. Esto servirá para cambiar la velocidad con la que se escribe cada frase. Si quieren bajar la velocidad, cambien el número 35 por un número más bajo; lo mismo si quieren aumentarla, cambien el 35 por un número más alto.

Ahora vamos a colocarlo: van a ir a la parte de diseño y después a donde dice "Agregar un gadget", ahí colocarán el código que editaron y le darán en guardar. Una vez hecho esto, pueden darle al ojo de la parte inferior derecha para visualizarlo; cuando estén seguros de que les gusta cómo se ve, denle a guardar en el icono que está al lado derecho del ojo. Y eso sería todo.

Creo que este tutorial sí fue bastante largo, pero espero haberlo explicado de la mejor forma posible. En realidad este tutorial debió salir desde la anterior semana, pero se me hizo tan largo que, siendo honesta, me dio muchaa flojera 😔, pero finalmente lo terminé y aquí está. Otra cosa que agregué fue lo de los números de líneas, ya que creí que así sería más sencillo para ustedes, aunque personalmente para mí no lo fue porque es algo tedioso el tener que contar cada línea. Pero espero que a ustedes sí les haya funcionado para ubicarse mejor; de cualquier forma me gustaría que lo colocaran en los comentarios, ya que así sabré si es mejor continuar con los números de líneas o seguirlo haciendo como antes. Lo mismo con cualquier duda que tengan, pueden escribirla sin problema, me gusta mucho contestar cada comentario. Y bueno, sin más que decir esto sería todo, cuídense mucho y adiós. 🫰