Blogger: Personalizar el menú de Páginas

El menú de páginas, que se muestra debajo de la cabecera, es donde podemos colocar enlaces a nuestras páginas. Y como la mayoría de los elementos de nuestro blog, también podemos adaptarlo bastante a nuestras necesidades y gustos.

Uso de CSS

En muchos casos las modificaciones se realizan mediante el uso de CSS, para lo cual es necesario ir a

Tema > Personalizar 

con lo cual se abrirá la pantalla "Diseñador de temas de Blogger", dentro de la cual se selecciona

 Avanzado > Añadir CSS

Centrar el menú de páginas

Las pestañas del menú de Páginas por lo general se muestran alineadas a la izquierda. Para que se muestren centradas, se debe agregar en Añadir CSS:

.PageList {

    text-align:center !important;

}
.PageList li {

    display:inline !important; float:none !important;

}

Para alinear a la derecha, basta con cambiar center  por right.

---

Blogger: Personalizar los Gadgets

Los gadgets que colocamos en nuestro blog pueden ser personalizados y acá les entrego algunas ideas sobre eso.

Uso de CSS

En muchos casos las modificaciones se realizan mediante el uso de CSS, para lo cual es necesario ir a:

Tema > Personalizar 

con lo cual se abrirá la pantalla "Diseñador de temas de Blogger", dentro de la cual se selecciona

 Avanzado > Añadir CSS

Centrar los títulos

Para centrar el título de los gadget se debe agregar la siguiente línea en Añadir CSS:

  .sidebar h2{
    text-align:center;
  }

Colocar un rectángulo alrededor de los títulos

Esto también se agrega en Añadir CSS:

  .sidebar h2{
     background: #cccccc;
     border-top: 1px solid #000000;
     border-bottom: 1px solid #000000;
     border-left: 1px solid #000000;
     border-right: 1px solid #000000; 
     padding:5px;
  }

Para el tipo de línea, en lugar de solid (línea continua) se puede usar dotted (línea punteada), dashed (línea sesgada) o double (doble línea).
El padding es para darle espacio entre el texto y el borde de la caja.

Colocar una imagen de fondo en el título

Se agrega en Añadir CSS:

.sidebar h2{
    background-image: url('imagen.jpg');
}

---