26 septiembre 2010

Entendiendo, manipulando y personalizando los enlaces de las páginas estáticas

Como  ya muchos saben, blogger ha habilitado la función de añadir páginas estáticas a el blog.

¿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.

Es posible editar el orden en que las páginas se muestren y seleccionar cual mostrar y cual no, por medio de el widget en el que estan colocadas, y esto lo haces en la sección diseño de elementos de la plantilla, o jalandolo desde tu blog. Para Cambiar el orden solo tienes que arrastrar los títulos de las páginas, y ubicarlos en el orden que quieras, y para mostrar cual se muestra y cual no, solo tienes que marcar la casilla correspondiente.

Como puedes ver es sencillo editarlas, ya que no es necesario ingresar a la sección de HTML, lo que es mucho mas cómodo y rápido.

¿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.
Es decir tu puedes tener definido el crosscol-wrapper en tu plantilla : <div id='crosscol-wrapper' style='text-align:center'></div>,  pero si dentro de ella, no esta no esta una sección identificada de x ó y modo, no aparecerá el widget  (para poder agregar gadgets) en la parte de diseño de tu plantilla en donde estan los elementos de tu plantilla; en este caso la sección  del crosscol wrapper, esta identificada de este modo:

<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.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.