¿Para que sirve el Agregar CSS?

 Gracias a los CSS pude cambiar el color de las pestañas, puse la línea que está debajo de los títulos, cambie la barra de búsqueda y cambie de manera permanente el "Read more". 

También puedes:

• Añadir un marco a los gadgets 
• Cambiar el aspecto de los seguidores 
• Modificar un poco la apariencia de las entradas 
• Personalizar los comentarios 
• Modificar colores de títulos, enlaces y párrafos
• Crear temas claros, oscuros o personalizados

Y son muchas más cosas en realidad, solo puse unas cuantas que pensé que podrían llamar la atención, honestamente la mayoría de los cambios que le hago a mi blog le pido ayuda a Chatgpt, aunque siento que me peleo con el para que me dé bien los HTML/CSS (¬`‸´¬).

 

Abajo te dejo los CSS que yo use, los deje en colores bastantes neutros, blanco, negro  y gris. Igual los puedes cambiar a tu gusto! (๑ᵔ⤙ᵔ๑)

⋆⊱༻𖥸༺⊰⋆

/* PESTAÑAS TRANSPARENTES */

.PageList li a {

  background: rgba(255, 255, 255, 0.18) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.45) !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

/* AL TOCAR / PASAR EL MOUSE */

.PageList li a:hover {

  background: rgba(255, 255, 255, 0.35) !important;

  color: #ffffff !important;

}

⋆⊱༻𖥸༺⊰⋆

/* BOTÓN SEGUIR LEYENDO */

.jump-link a {

  display: inline-block;

  padding: 7px 15px;

  margin-top: 8px;

  background: rgba(255, 255, 255, 0.10);

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.30);

  border-radius: 14px;

  font-size: 12px;

  letter-spacing: 1px;

  text-decoration: none !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

  box-shadow:

    0 3px 12px rgba(0, 0, 0, 0.08),

    inset 0 0 10px rgba(255, 255, 255, 0.08);

  transition: all 0.25s ease;

}

/* AL PASAR EL MOUSE */

.jump-link a:hover {

  background: rgba(255, 255, 255, 0.20);

  transform: translateY(-2px);

  box-shadow:

    0 4px 12px rgba(0, 0, 0, 0.15),

    inset 0 0 12px rgba(255, 255, 255, 0.12);

}

⋆⊱༻𖥸༺⊰⋆

/* BUSCADOR */

#BlogSearch1 input[type="text"],

input[type="text"] {

  background: rgba(255, 255, 255, 0.35) !important;

  border: 1px solid rgba(255, 255, 255, 0.55) !important;

  border-radius: 12px !important;

  color: #444 !important;

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  outline: none;

}

/* AL SELECCIONAR EL BUSCADOR */

#BlogSearch1 input[type="text"]:focus,

input[type="text"]:focus {

  background: rgba(255, 255, 255, 0.55) !important;

  box-shadow:

    0 0 8px rgba(255, 255, 255, 0.6);

}

⋆⊱༻𖥸༺⊰⋆

/* DETALLE DE LOS TÍTULOS */

.post-title {

  border-bottom: 1px solid rgba(80, 80, 80, 0.30);

  padding-bottom: 8px;

  text-shadow:

    0 1px 4px rgba(0, 0, 0, 0.18);

}

 ⋆⊱༻𖥸༺⊰⋆