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 de ocultar entradas.

Crear una página es muy sencillo, sólo entra en Creación de entradas > Editar páginas y haz click en Página nueva.

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 lista de enlaces en la sidebar; otra es usando un menú debajo de la cabecera con los enlaces a tus páginas; y la ú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 Diseño > 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(http://2.bp.blogspot.com/_dsEG33PDaHw/S3GaMp5QZEI/AAAAAAAAAIg/sQHkDct7T44/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 Diseño > Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar el código del gadget que es este:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<li><a href='http://URL del enlace'>Título del enlace</a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agrega lo que está en color rojo por cada enlace que quieras poner en el gadget. Y pon donde se indica la URL del enlace y el título del enlace.

Lamentablemente los enlaces que agreguemos se acomodarán al inicio del gadget (después del enlace Página principal) pero los enlaces de las páginas estáticas sí podemos cambiarlas de orden.
Para hacerlo entra en Diseño > Elementos de la página y haz click en Editar sobre el elemento Páginas.
Ahí verás en un recuadro los títulos de tus páginas, sólo arrastralos para cambiarlos 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 del sitemap y que no se indexan, así que no aparecerán en el feed del blog.

Poner separadores entre las entradas

Los separadores entre posts (dividers) hacen que se delimite el área visual entre cada post lo cual lo hace más presentable y organizado.



Poner el separador es de lo más sencillo, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include data='post' name='post'/>

Justo debajo de ella pega lo siguiente:

<center><img src='URL de la imagen'/></center>

Sólo cambia lo que está en rojo por la URL de la imagen de tu separador. Así se simple tendrás un separador de entradas en tu blog.

En Smashing Magazine tienen más de 100 separadores que ponen a tu disposición de muchos diseñadores y que son de uso libre. Puedes escoger el que más te guste y guardarlo o puedes descargar el pack con todos los diseños de los separadores.

Si no te convencen las imágenes y te gustan los diseños más simples puedes optar por poner una línea de color; para ello puedes usar el atributo <hr /> al cual se le pueden agregar estilos para hacerlos más llamativos.
Si te decides por esta forma entonces el código que deberás pegar será este:

---

<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" />

En background:#000000; puedes modificar el código del color que prefieras, en height:5px; la altura de la línea (en pixeles) y en width:60%; el ancho de la línea (en porcentaje).
Estos son algunos ejemplos de los separadores con distintos colores:

---

<hr style="align:center; background:#0080FF; border:0px; height:5px; width:60%;" />

---

<hr style="align:center; background:#FF0080; border:0px; height:5px; width:60%;" />

---

<hr style="align:center; background:#FFFF00; border:0px; height:5px; width:60%;" />