Personalizar el gadget de Páginas estáticas

Desde hace unos días Blogger ya hizo oficial la opción de crear páginas estáticas en Blogger. Esto es que podemos crear páginas que no se mostrarán junto con las entradas sino que se podrán ver sólo cuando se dé click al enlace de dicha página; así que ya podemos prescindir del hack deocultar entradas.

Crear una página es muy sencillo, sólo entra en Páginas | Página nueva | Página en blanco.

Redacta el contenido y publícala.

¿Cómo podemos ver el contenido de estas páginas?

Blogger nos da tres opciones, una es usando una Pestañas principales (debajo de la cabecera),Enlaces laterales (en la sidebar); o No mostrar, esta última es sin gadget, sólo nos da la URL de la página para agregarla donde tú elijas.

Quienes hayan escogido la primera o segunda opción verán que el menú de las páginas es extremadamente sencillo y sin chiste.

Pero podemos personalizarlo para darle "otra cara" y hacer que parezca menú y no una simple lista de enlaces.

Para hacerlo sólo hay que agregar unos estilos en la plantilla, los estilos son los mismos que usaríamos para un menú simple, ya que el gadget de Páginas que nos da Blogger no es otra cosa mas que una lista de enlaces.

Para personalizar este gadget entra en Plantilla | Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

/* Menú de páginas
----------------------------------------------- */
#PageList1 {
width: 100%;
border: 1px solid #625e00; /* Color del borde del menú */
background-color: #E0ECF8; /* Color de fondo */
}
#PageList1 ul li a {
color: #000; /* Color de los enlaces */
text-decoration: none;
font-weight: bold;
padding-right: 20px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Vx-591XH861qhOCNMMyT5rtAmB64IUr1E-zz7QCgnO_X1JjpVJ1djNvowB_FDMXjdqejf1IqtWc6hmmvnVrc2FZqjeLSoaT3iD0RXZzvEbLC6pm8ZZdmvoUpTsgvTeeR2kWazRzSzKc/s320/vertical.gif) center right no-repeat;
}
#PageList1 ul li a:hover {
color: #ccc; /* Color del texto al pasar el mouse */
position: relative;
left: 1px;
top: 1px;
}

El resultado será este.

He puesto en color verde las anotaciones para que lo personalicen a su gusto. Por supuesto pueden agregar más, como una imagen de fondo, otro tipo de letras, etc.

Sé que mucho pensarán -¿de qué me sirve ese menú si no puedo tener otros enlaces que no sean páginas estáticas?
Pues adicionalmente a lo que acabamos de hacer también podemos editar el gadget para mostrar otros enlaces que no sean las páginas estáticas.

Para hacerlo hay que entrar a Páginas | Página nueva | Dirección web. Ahí pon donde se indica la URL del enlace y el título del enlace.

También podemos cambiar el orden de las pestañas, lo hacemos también desde la sección Páginas, sólo arrastralas para cambiarlas de lugar.


Esta característica de las páginas es nueva, así que hay que atenernos al "humor" de Blogger ante cualquier cambio. Por mi parte las he probado y puedo decir que aceptan los scripts como el delsitemap y aunque se indexan no aparecerán en el feed del blog.