El gadget de páginas estáticas de Blogger

Aunque la forma de añadir otros enlaces en el gadget de páginas estáticas de Blogger es algo que El escaparate de Rosa ha explicado muy bien no hace mucho, el tema parece seguir siendo motivo de consulta así que, respondiendo al pedido de Andrea, vamos a repasarlo ya que muchos lo utilizan.

Como las opciones que nos muestra son pocas, no queda más remedio que editar el código si es que queremos cambiar algo:

No es difícil ya que es un código bastante corto y basta expandir el widget PageList1, para verlo. Allí, hay que entender que la lista de enlaces se encuentra en un LOOP así que, simplemente deberíamos agregar nuestros propios enlaces antes o después de los que agrega Blogger; es decir, justo después de <ul>, justo antes de </ul> o en ambos extremos:

<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>
      <!-- ... aquí ponemos nuestros enlaces ... -->
      <li><a href='mi_URL_1'> mi título 1</a></li>
      <li><a href='mi_URL_2'> mi título 2</a></li>
      <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>
      <!-- ... o los ponemos aquí ... -->
      <li><a href='mi_URL_3'> mi título 3</a></li>
      <li><a href='mi_URL_4'> mi título 4</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

¿Para qué se utiliza si en realidad sólo es una lista de enlaces que bien podríamos agregar con cualquier otro gadget o a mano?

Porque la plantillas de nuevo diseño lo tienen y porque detecta un dato al que no normalmente no podemos acceder: ¿estamos en cierta pagina?

Eso es lo que hace esto:

<b:if cond='data:link.isCurrentPage'>
  <!-- ... si estamos en esa página ... -->
<b:else/>
  <!-- ... si no estamos en esa página ... -->
</b:if>

En ambos casos hay un enlace pero a uno se le agrega la clase selected y al otro no. De alguna manera, se intenta que funcione como lo hacen muchos menús o solapas de otros sistemas aunque lo que suele verse no es que se cambia la estética de la solapa sino que esa solapa deja de ser un enlace ya que, si estamos allí, no hace falta que lo sea.

Nada impide que dentro del gadget, usemos esa facilidad así que podríamos reemplazar cada uno e nuestros propios enlaces:

<li><a href='mi_URL'> mi título </a></li>

por algo así:

<b:if cond='data:link.isCurrentPage'>
  <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
<b:else/>
  <li><a href='URL_mienlace_1'> título 1 </a></li>
</b:if>

o quitar el enlace si es que quisiéramos que no hubiera uno cuando estamos en esa página:

<b:if cond='data:link.isCurrentPage'>
  <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
<b:else/>
  <li><span> título 1</span></li>
</b:if>

Tampoco es necesario que incluyamos el LOOP con las páginas estáticas, el widget lo podemos utilizarlo para cualquier otro enlace, interno o externo así que podríamos borrar todo y poner una lista o menú personal, aprovechándonos de esas funciones:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <div class='widget-content'>
    <ul>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
      <b:else/>
        <li><span> título 1 </span></li>
      </b:if>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_2'> título 2 </a></li>
      <b:else/>
        <li><span> título 2 </span></li>
      </b:if>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_3'> título 3 </a></li>
      <b:else/>
        <li><span> título 3 </span></li>
      </b:if>

      <!-- ... y seguimos agregando enlaces ... -->      

    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Las definiciones de CSS pueden variar con las plantillas, Blogger agrega dos de forma automática:

.PageList li a {
  font-weight: normal;
}
.PageList li.selected a {
  font-weight: bold;
  text-decoration: none;
}

Así que podemos sobrescribirlas con nuestras propias reglas:

.PageList li a { ....... }
.PageList li a:hover { ....... }
.PageList li.selected span { ....... }