Entendiendo, manipulando y personalizando los enlaces de las páginas estáticas
¿Que son las páginas estáticas?
Son páginas independientes, que se diferencian de las entradas porque al crearlas no aparecen en tus entradas y para poder verlas necesitamos tener su enlace.
¿Cómo se hacen las páginas estáticas?
Estas páginas se pueden crear desde un panel similar al panel de edición de entradas, y luego, los títulos, que a su vez son enlaces a dichas páginas, son añadidas a un widget en la columna lateral de tu blog o a la sección del crosscol, según tu escojas.
¿Cómo edito a las páginas estáticas?
Hay varias formas y esto dependerá de lo que quieras cambiar, por ejemplo, si quieres editar los titulos y/o el contenido, tienes que ir a Creación de entradas ► Editar entradas, y editar lo que desees, también lo puedes hacer accediendo a través de la edición rápida de la página, (con el símbolo del lápiz) al igual que lo haces con las entradas, claro, pensando que tienes habilitada la opción de edición rápida en tu blog.
¿Cómo puedo manipular la ubicación de los títulos (enlaces) de las páginas estáticas y cómo lo personalizo?
Si usmeamos en el código de la plantilla expandiendo artilugios, cuando hemos colocado las páginas en el crosscol, veremos lo siguiente:
<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'> <b:widget id='PageList1' locked='false' title='Pages' 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>
<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> </b:section> </div>
Nota: Al ser colocadas en el sidebar-wrapper, el código es el mismo, simplemente cambia el id del contenedor de las páginas, que en ese caso sería sidebar-wrapper.
Pero, ¿Qué es lo mas relevante que nos dice este código?
- Primero, que las páginas estan ubicadas en una parte de la plantilla llamada : crosscol-wrapper, que no es más que una sección o envoltura, nombrada de ese modo y que generalmente en las plantillas originales de blogger, esta colocado entre la envoltura de la cabecera (header-wrapper) y la envoltura del contenido (content-wrapper).
- Que los enlaces de las páginas, están el la sección identificada como crosscol y que es quien le da el espacio físico, por así llamarlo, para poder estar ahí, y que a su vez están dentro de el crosscol-wrapper.
<b:section class='crosscol' id='crosscol'>
- Que el ID, identificador de el Widget es Pagelist1, y que el tipo es una lista de páginas, es por ello que tiene la etiqueta ul que ordena a la lista, y los elementos li, que son los títulos de tus páginas.
- Que los títulos de las páginas funcionan como enlaces ya que usan una etiqueta llamada <a> , que es que sirve para crear enlaces.
- Que estas listas de elementos (títulos de las entradas) ó elementos li, tienen una clase, llamada "selected", por lo cual es posible darles un estilo único al momento en que son seleccionados y se permanece en ese enlace, por lo que, esto, representa una gran ventaja a la hora de crear el diseño de nuestro menú de navegación.
¿Menú de Navegación?, Si, menú de navegación, si te fijas es lo mismo, ya que contiene enlaces, que a su vez están listados.
Ya se puso interesante la cosa, al entender lo anterior, resulta muy sencillo poder darle el estilo que quieras a estos enlaces, y también colocarlos donde a ti mas te convenga dentro de tu plantilla, incluso poder crear otra lista de páginas, para que en lugar de una, tengas 2 o 3, o las que necesites.
Recuerda que podemos tener hasta 10 páginas individuales, y además meter otros enlaces a estas listas, cosa que Rosa ya había explicado como hacer.
Bueno todo esto lo veremos por partes ya que es mucho para ponerlo en una sola entrada, así que lo que sigue, lo veremos en otro capítulo de la serie: Personalizando las páginas estáticas :D.
Etiquetas:Explorando Blogger,Tutoriales