¿Cómo poner un pequeño catálogo de contenido?

Este viernes de tutoriales te voy a explicar cómo se hace este precioso catálogo desplegable con el que dividir tus entradas:

Este proceso es bastante más complejo que los demás por lo que vas a tener que prestarme mucha atención. Primero de todo tienes que saber qué son las etiquetas. Aparecen dentro de la zona de edición del las entradas a la derecha: 

Aquí debes poner una palabra que tendrá que ver con la categoría que tienes, las etiquetas que tengo yo son "storytime-vida", "opiniones-televisión" o "reflexiones". Puedes poner todas las etiquetas que quieras en una sola entrada.

Una vez tengas tus entradas etiquetadas empezará la parte difícil de customizar el código, recuerda pegar el que tengo aquí adjunto en tu aplicación de notas para facilitarte el trabajo:

<style>

@import url('https://fonts.googleapis.com/css2?family=Slackey&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');

/* CONTENEDOR AISLADO */

.sb-acordeon{

  width: 00px;

  max-width: 00px;

  font-size: 00px;

  list-style: none;

  padding: 0;

  margin: 0;

}

/* =========================

   CATEGORÍAS PRINCIPALES

========================= */

.sb-acordeon > li > a{

  display: block;

  background: #00000;

  color: white;

  text-align: center;

  padding: 00px;

  text-decoration: none;

  font-family: 'Slackey', cursive;

  font-size: 00px;

  transition: 0.3s;

}

.sb-acordeon > li > a:hover{

  background: #00000;

}

/* =========================

   SUBMENÚ (ACORDEÓN)

========================= */

.sb-acordeon ul{

  list-style: none;

  padding: 0;

  margin: 0;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transform: translateY(-10px);

  transition: all 0.5s ease;

}

/* DESPLIEGUE */

.sb-acordeon li:hover > ul{

  max-height: 500px;

  opacity: 1;

  transform: translateY(0);

}

/* =========================

   SUBCATEGORÍAS

========================= */

.sb-acordeon ul li a{

  display: block;

  background: white;

  color: #00000;

  text-align: center;

  padding: 00px;

  text-decoration: none;

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

  font-size: 00px;

  border-top: 1px solid #f2f2f2;

  transition: 0.3s;

}

.sb-acordeon ul li a:hover{

  background: #00000;

}

</style>

<ul class="sb-acordeon">

  <li>

    <a href="#">CATEGORÍA</a>

    <ul>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

    </ul>

  </li>

  <li>

    <a href="#">CATEGORÍA</a>

    <ul>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

    </ul>

  </li>

  <li>

    <a href="#">CATEGORÍA</a>

    <ul>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

    </ul>

  </li>

  <li>

    <a href="#">CATEGORÍA</a>

    <ul>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

      <li><a href="URL_SUBCATEGORÍA">SUBCATEGORÍA</a></li>

    </ul>

  </li>

</ul>

Como siempre, vamos a ir paso a paso explicando bien que cosas se deben modificar:
La primera parte (llamado "contenedor aislado") en la que sale "  width: 00px; max-width: 00px; font-size: 00px;" lo que está calculando es el tamaño dentro de la página, los dos primero px debes poner el mismo número, yo lo tengo a 200px.

La segunda parte (llamado "categorías principales") en las que se customiza al tamaño de la letra, los colores etc: el primer "background: #00000;" es el color del botón SIN que el cursor esté encima; el "color: white;" es el color de la letra, yo siempre recomiéndo ponerlo o white o black; el "padding: 00px;" es el tamaño del espacio entre letra y borde, yo lo tengo a 10px; la parte de "font-family: 'Slackey', cursive; font-size: 00px;" son el tipo de fuente (tienes que poner el nombre entero de la fuente que quieres poner) y el tamaño de la letra, yo lo tengo en 14px; por último, el " background: #00000;" del final es el color de la barra CON el cursor encima.

Seguimos bajando hasta "subcategorías" en las que encuentras " background: white; color: #00000;" en el que el background es el fondo (black o white) y color el el color de la letra; debajo encontramos "font-family: 'Gruppo', sans-serif; font-size: 00px;" en el que podemos modificar la fuente de la letra y el tamaño; el último “background: #00000;” es el color que sale cuando pones el cursor ENCIMA del botón. 

La parte en la que hay que añadir los URL debemos poner: en “categoría” lo que quieras que ponga en la primera vista, en “URL_SUBCATEGORÍA” deberás hacer hago importante:

1. Copia el URL de tu blog

2. Añade “/search/label/ETIQUETAS QUE HAYAS PUESTO AL INICIO” al URL original, recuerda cambiar el SUBCATEGORÍA a tu gusto y sin espacios.

3. Haz el mismo proceso con todas las subcategorías.

Por ejemplo: mis etiquetas en la categoría de storytime son storytime-amigos para la subcategoría de “Familia y amigos”, storytime-amor para la subcategoría de “Amor” y storytime-vida para la subcategoría “Vida”.

Una vez editados y añadidos todos los URL y personalizado la apariencia de tu catálogo deberás copiar el código completo sin olvidarte de ningún espacio (SON MUY IMPORTANTES) e ir a la sección de Diseño de tu blog en Blogger, aquí buscaras el sidebar donde quieras poner tu catálogo y le tienes que dar a “añadir un gadget”, debes buscar HTML/JavaScript y pegar el código.

Para ver si queda como tú quieres puedes darle al ojo que sale en la página de Diseño abajo a la derecha y así saber que debes modificar.

Recuerda guardar al final para preservar el gadget y ve a revisar si te lleva al sitio indicado, si no es así puedes hacer cambios hasta que te quede bien.

Espero que te haya ayudado, si no te sale o necesitas ayuda no dudes en escribirme en los comentarios!!! Nos vemoss