Blogger: Personalizar el menú de Páginas

Las siguientes son algunas maneras de personalizar el menú de páginas que Blogger nos proporciona por defecto, todo mediante el uso de CSS. Las modificaciones realizadas son exageradas, para que se puedan notar bien los cambios.

Si abrimos el editor de HTML, veremos los valores de CSS por defecto bajo la sección de Tabs:

/* Tabs
----------------------------------------------- */

---

Por defecto, el menú de Páginas se ve así:

Veamos ahora algunas modificaciones.

---

Podemos cambiar el borde general del menú, aunque no cubre el ancho completo (para ello hay otras variables a modificar).

.tabs-inner .section:first-child {border: 5px solid #006699;}

---

Aquí le pusimos un borde rojo, con puntas redondeadas. Ojo que también modificamos el borde para que tenga un valor 0.

.tabs-inner .section:first-child {border: 0px;}
.tabs-inner .section:first-child ul {
  margin-top: 0;
  border: 2px solid #f89e9d;
  border-radius: 50px;
}

---

También podemos cambiar el color y grosor de cada borde por separado.

.tabs-inner .section:first-child ul {
  margin-top: 0;
  border-top: 2px solid Red;
  border-left: 3px solid Purple;
  border-right: 5px solid Blue;
  border-bottom: 5px solid Green;
}

---

Al fondo de las pestañas le podemos cambiar el color, poner un borde bajo y ajustar los márgenes.

.tabs-inner .widget ul {
  background: Silver;
  border-bottom: 2px solid Red;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

---

El color del fondo puede ser transparente (aquí no se nota mucho pues el fondo es blanco), y el ancho puede ajustarse para que cubra (casi) todo el ancho de la página. Los valores son variables, hay que calcularlo en cada caso.

.tabs-inner .widget ul {
  background: transparent;
  margin-left: -40px;
  margin-right: -40px;
}

---

Cambiamos el font de las pestañas y el espacio en ellas.

.tabs-inner .widget li a {
  padding: 15px 12px;
  font: 12px;
  text-transform: uppercase;
  color: #e22c2b;
}

---

Tal vez querramos modificar el borde de la primera pestaña (uno nunca sabe).

.tabs-inner .widget li:first-child a {
  border-$startSide: 4px solid #f89e9d;
}

---

Y finalmente podemos modificar las pestañas que son seleccionadas.

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #ffffff;
  background-color: Salmon;
  text-decoration: underline;
}

---