Jugando con el gadget de páginas estáticas

Las páginas estáticas son algo que tiene un uso que se va extendiendo a lo largo del tiempo, sobre todo, porque las nuevas plantillas incluyen el gadget por defecto y justamente, ese gadget es el que genera confusiones y preguntas respecto a su personalización ya que suele ser confundido con un "menú normal" que puede ser personalizado libremente pero no lo es.

Como todo gadget, posee un código rígido y una serie de reglas de estilo predefinidas por Blogger; si queremos modificar algo, deberíamos entender su estructura y sus limitaciones.

El primer problema a resolver es agregar enlaces que no sean páginas estáticas; eso es bastante simple y, aunque ya está explicado en alguna otra entrada, vuelvo a repetir la idea: hay que desplegar los artilugios de la plantilla y buscar el includable que lo contiene:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>

allí, hay un loop con etiquetas UL y LI; si queremos incorporar algún enlace extra, debemos agregar las etiquetas justo después de </b:loop> y antes de </ul>

<ul>
  <b:loop values='data:links' var='link'>
    .......
  </b:loop>
  <li><a href='URL_1'>,vaga</a></li>
  <li><a href='URL_2'>twitter</a></li>
</ul>

Pero se puede cambiar más. Vamos a agregarle una imagen de fondo distinta a cada uno de esos enlaces; para eso, bastaría que los identificaremos mediante una clase o un ID pero, como son escritos de modo automático, debemos usar alguna variable para que cada uno sea distinto del otro.

Si los títulos de nuestras páginas, que es eso que vemos en el "menú", sólo tienen una palabra; podemos usar ese dato; si no es así, debemos recurrir a un script y como este sería el método más universal, vamos a verlo.

Lo que haré es modificar el loop completo de tal forma que quede así:

<ul id='listapaginas'>
  <b:loop values='data:links' var='link'>
    <b:if cond='data:link.isCurrentPage'>
      <li><a class='selected' expr:href='data:link.href' id=''><data:link.title/></a></li>
    <b:else/>
      <li><a expr:href='data:link.href' id=''><data:link.title/></a></li>
    </b:if>
  </b:loop>
  <li><a href='URL_sitio1' id=''> otro </a></li>
  <li><a href='URL_sitio2' id=''> otro más </a></li>
</ul>
<script type='text/javascript'>agregarIDs();</script>

y la función con el script la colocaré antes de </head>

<script type='text/javascript'>
//<![CDATA[
function agregarIDs() {
  var laclase;
  var obj = document.getElementById("listapaginas");
  var enlaces = obj.getElementsByTagName("a");
  for (var i=0; i<enlaces.length; i++) {
    enlaces[i].id="pagina" + String(i);
  }
}
//]]>
</script>

Lo que hará esa función es sencillo, sólo le colocará un atributo ID a cada enlace del gadget de tal modo que sean identificables individualmente; el primero se llamará pagina0, el segundo pagina1, el tercero pagina2 y así sucesivamente.

Como dije antes, si los títulos de las páginas sólo contienen una palabra, el script es innecesario y podemos usar ese texto como ID de los enlaces:

<li><a class='selected' expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>

<li><a expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>

Sea cual sea el esquema elegido, el resto es CSS que también ponemos antes de </head>

<style>

  /* una imagen de fondo distinta par cada enlace */
  #pagina0 {background:  transparent url(IMAGEN_0) no-repeat 0 0;}
  #pagina1 {background:  transparent url(IMAGEN_1) no-repeat 0 0;}
  #pagina2 {background:  transparent url(IMAGEN_2) no-repeat 0 0;}
  #pagina3 {background:  transparent url(IMAGEN_3) no-repeat 0 0;}
  #pagina4 {background:  transparent url(IMAGEN_4) no-repeat 0 0;}

  /* la etiqueta LI contenedora */
  .PageList li {
    /* sobrescribir las reglas de Blogger */
    margin: 40px 0 20px !important;
    padding: 0 !important;
    /* las animamos un poco */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }

  /* los enlaces tienen una imagen de fondo y un texto */
  .PageList li a {
    color: #666;
    display: inline-block;
    font-family: Shadows Into Light Two,cursive;
    font-size: 28px;
    /* establecemos la dimensión */
    height: 60px;
    padding-bottom: 0;
    padding-top: 110px;
    width: 120px;
    /* los animamos un poco */
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }

  /* el efecto hover anima las cosas */
  .PageList li a:hover {
    color: #000;
    font-size: 34px;
    text-decoration: none;
    /* invertimos la posición para que la imagen "baje" */
    background-position: 0 bottom !important;
    /* invertimos los padding para que el texto "suba" */
    padding-top: 0;
    padding-bottom: 110px;
  }

  /* la página atula se muestra "torcida" */
  .PageList a.selected {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  /* y se endereza al poner el cursor encima */
  .PageList a.selected:hover {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
</style>

Y el resultado final es el que puede verse en este blog de pruebas.