Holaa a tod@s hoy traigo un nuevo tutorial sobre cómo hacer una barra de categorías para poder ordenar mejor cada texto. He de decir que esto me llevó casi dos horas porque no entendía bien el tutorial así que voy a intentar ser lo más clara posible con cada paso.
Lo primero que debes hacer es ir a entrada, ahí te abrirá el espacio para que escribas algo, aquí debes fijarte en la barra lateral derecha; justo en donde dice etiquetas. Ahí pondrás el nombre o nombres con el que quieres clasificar cada post, en mi caso hasta ahora solo tengo tutoriales y reflexiones.
Lo que sigue es una parte muy importante porque es lo que va a permitir que cada que alguien habrá la barra de categorías y le dé a alguna subcategoria lo lleve directamente a los textos relacionados con esa categoría. Lo primero que debes hacer es ir a diseño y darle a donde dice agregar gadget. Ahí vas a buscar el apartado que dice etiquetas y debe aparecer esto:
Le darás en guardar y al abrir el ojito que está en la parte inferior derecha debes ver esto:
Y con eso ya tendremos la primera parte y una de las más importantes.
Ahora si, viene una parte muy importante que es pegar el código que te pondré aquí abajo (recuerda no saltarte ningún espacio ni punto ni nada ya que todo es muy importante)
<!--
================================================
WIDGET DE CATEGORÍAS DESPLEGABLES (AZUL & HOVER)
================================================
-->
<!-- 1. Estilos CSS -->
<style>
/* Contenedor Principal (Estilo Vidrio/Frutiger Aero) */
.cont-categorias-azul {
width: 100%;
max-width: 300px; /* Ancho máximo del widget */
margin: 10px auto;
font-family: 'Gruppo', sans-serif; /* Usando la fuente de tu blog */
/* Fondo azul degradado con transparencia */
background: linear-gradient(135deg, rgba(76, 135, 207, 0.9), rgba(135, 206, 235, 0.8));
/* Efecto desenfoque de fondo (Glassmorphism) */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* Bordes y Sombra brillante */
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 15px;
box-shadow: 0 0 15px rgba(94, 119, 209, 0.5), inset 0 1px 4px rgba(255, 255, 255, 0.7);
overflow: hidden; /* Mantiene todo dentro de los bordes redondeados */
color: white;
}
/* Título del Widget (Estilo Slackey como tu News title) */
.cont-categorias-azul h3 {
font-family: 'Slackey', cursive;
color: #CCF5FC; /* Azul muy claro */
text-align: center;
font-size: 1.3rem;
padding: 15px;
margin: 0;
background: rgba(0, 0, 0, 0.1); /* Fondo sutil para el título */
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
/* Lista Principal */
.lista-principal, .lista-subcategorias {
list-style: none;
margin: 0;
padding: 0;
}
/* Elementos de Categoría Principal */
.item-principal {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.item-principal:last-child {
border-bottom: none;
}
/* Botón/Enlace de Categoría Principal */
.boton-principal {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px 15px;
background: transparent;
border: none;
color: white;
font-size: 1.1rem;
font-weight: bold;
text-align: left;
cursor: pointer;
transition: background 0.3s ease;
font-family: inherit; /* Hereda la fuente Gruppo */
}
/* Efecto Hover en Principal */
.boton-principal:hover {
background: rgba(255, 255, 255, 0.15);
}
/* Icono de flecha (▼) */
.icono-flecha {
font-size: 0.7rem;
transition: transform 0.3s ease;
opacity: 0.7;
}
/* Estado Activo (Cuando está abierto) */
.item-principal.activo .boton-principal {
background: rgba(255, 255, 255, 0.2);
}
.item-principal.activo .icono-flecha {
transform: rotate(180deg); /* La flecha gira hacia arriba */
}
/* --- SUBCATEGORÍAS (Ocultas por defecto) --- */
.contenedor-subcategorias {
max-height: 0; /* Altura cero para ocultar */
overflow: hidden; /* Esconde el contenido */
transition: max-height 0.3s ease-out; /* Animación suave de apertura */
background: rgba(0, 0, 0, 0.05); /* Fondo sutilmente más oscuro */
}
/* Enlaces de Subcategoría */
.lista-subcategorias li a {
display: block;
padding: 10px 15px 10px 30px; /* Sangría a la izquierda */
color: #E0F7FA; /* Azul cian muy claro */
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
border-left: 3px solid transparent; /* Borde decorativo invisible */
}
/* Hover en Subcategoría */
.lista-subcategorias li a:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
border-left: 3px solid #00BFFF; /* Borde cian brillante al hover */
padding-left: 35px; /* Pequeño movimiento a la derecha */
}
</style>
<!-- 2. Estructura HTML -->
<div class="cont-categorias-azul">
<h3>CATEGORÍAS</h3>
<ul class="lista-principal">
<!-- Categoría 1: OPINIONES -->
<li class="item-principal">
<button class="boton-principal">
OPINIONES
<span class="icono-flecha">▼</span>
</button>
<div class="contenedor-subcategorias">
<ul class="lista-subcategorias">
<li><a href="#">» Libros</a></li>
<li><a href="#">» Películas</a></li>
<li><a href="#">» Series</a></li>
</ul>
</div>
</li>
<!-- Categoría 2: PERSONAL -->
<li class="item-principal">
<button class="boton-principal">
PERSONAL
<span class="icono-flecha">▼</span>
</button>
<div class="contenedor-subcategorias">
<ul class="lista-subcategorias">
<li><a href="#">» Storytime</a></li>
<li><a href="#">» Reflexiones</a></li>
</ul>
</div>
</li>
<!-- Categoría 3: TUTORIALES -->
<li class="item-principal">
<button class="boton-principal">
TUTORIALES
<span class="icono-flecha">▼</span>
</button>
<div class="contenedor-subcategorias">
<ul class="lista-subcategorias">
<li><a href="#">» Tutoriales</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- 3. Script JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const botones = document.querySelectorAll('.boton-principal');
botones.forEach(boton => {
boton.addEventListener('click', function() {
const itemPrincipal = this.parentElement;
const contenedorSub = this.nextElementSibling;
document.querySelectorAll('.item-principal').forEach(item => {
if (item !== itemPrincipal) {
item.classList.remove('activo');
item.querySelector('.contenedor-subcategorias').style.maxHeight = null;
}
});
itemPrincipal.classList.toggle('activo');
if (contenedorSub.style.maxHeight) {
contenedorSub.style.maxHeight = null;
} else {
contenedorSub.style.maxHeight = contenedorSub.scrollHeight + "px";
}
});
});
});
</script>
Te recomiendo que copies el código en notas para que puedas editarlo de mejor forma, bien déjame guiarte paso a paso para que puedas editarlo sin problema.
Dentro del apartado <style>, busca estas líneas para cambiar el aspecto visual:
Fondo azul (Degradado): Busca la línea background: linear-gradient(...). Puedes cambiar rgba(76, 135, 207, 0.9) y rgba(135, 206, 235, 0.8) por los valores RGB de tus colores favoritos (ej. tonos rosa, verde, violeta). Para esto puedes utilizar la página https://htmlcolorcodes.com/ copia el código rgba y pégalo en los paréntesis.
En .cont-categorias-azul, cambia 'Gruppo', sans-serif por la fuente principal de tu blog.
En .cont-categorias-azul h3, cambia 'Slackey', cursive por la fuente que uses para los títulos.
En .lista-subcategorias li a:hover, busca border-left: 3px solid #00BFFF;. Puedes cambiar #00BFFF por cualquier código HEX de color.
Ahora busca los textos en mayúsculas dentro de los <button class="boton-principal">:
Cambia OPINIONES, PERSONAL y TUTORIALES por los nombres que prefieras para tus secciones principales. Recuerda que estas son las categorías principales.
Ahora para las subcategorias reemplaza Libros por el nombre de tu subcategoría. Y así sucesivamente con cada subcategoria que veas. Para que no haya dudas marqué con azul las categorías y con verde las subcategorias así sabrás que debes escribir en cada una.
Bien ahora presta mucha atención, debes ir a tu blog e ir al apartado de categorías que creamos al inicio con etiquetas, ahí deberás darle a cualquier apartado que hayas creado y automáticamente te llevará al apartado como tal de la categoría. Una vez ahí vas a copiar el enlace de arriba; una vez que lo hayas copiado vamos a volver con el código, vas a buscar la parte de subcategorias y debes ver algo así "#" al lado de la subcategoria que hayas puesto. Aquí es importante que solo borres el #, no borres nada más ni siquiera las comillas, solo el #. Cuando lo hayas hecho vas a pegar el link que copiaste hace un momento, debes pegarlo justo entre las comillas algo así:
Debes repetir este proceso con cada subcategoria que tengas, es un poco tardado pero nada complicado.
Cuando hayas terminado con todas las subcategorias vas a copiar todo el código y vas a volver al blog.
Busca diseño y luego agregar gadget; en el título pondrás categorías y en el contenido vas a pegar el código, le das en guardar tanto en la parte del recuadro como en la parte inferior derecha.
Y con eso ya estaría!!
Como pueden ver si es un proceso bastante largo pero intenté explicarlo de la mejor forma posible, recuerden que si tienen alguna pregunta pueden ponerla en los comentarios 💗.
No hay comentarios.:
Publicar un comentario