Blogger: foco en elementos del menú

Una de las características mas atractivas en los menús de un sitio Web (en este caso una plantilla de Blogger), es el foco que coge cuando das clic sobre alguna categoría y que esa opción se mantenga activa (enfocada) mientras te encuentras en esa alternativa del sitio.

No voy a explicar como elaborar la barra de menú en si, si no, como mantener el foco en las secciones. Cabe acotar que algunas plantillas de Blogger ya vienen con esta funcionalidad, pero no así todas.

• Inicio
• Contactame
• Etiquetas
• php
• google
• Acerca de..
• blogguer

Blogger nos brinda algunas funciones que nos devuelven entre otras cosas, la URL de la zona donde estamos, el tipo de página, etc. Son llamadas etiquetas DATA y las siquientes tres serán las que usaremos para el ejemplo:

<data:blog.homepageUrl/> ==> Devuelve la URL del blog
<data:blog.pageName/>   ==> Devuelve el nombre de la pagina actual vista
<data:blog.pageType/>   ==> Devuelve el tipo de pagina, 
   valores posibles:
      index         --> representa la pagina principal, el index del blog
      item          --> representa cualquier articulo del blog
      static_page   --> representa cualquier pagina estática creada en el blog

Las condicionales en Blogger
En Blogger todo esta entorno a etiquetas, para el caso del bloque IF no hay excepción, la sintaxys es la siguiente:

<b:if cond='condicion'><!-- etiqueta de apertura del IF -->
...Aquí el código correspondiente si la condición se cumple...
</b:if><!-- etiqueta de cierre del IF -->

ejemplo:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
.. Aquí el código correspondiente si la página es de tipo ITEM ..
</b:else>
.. Aquí el código correspondiente si la página NO es de tipo ITEM ..
</b:if>

Para este ejemplo usare el business top blogger template, editaremos solo la zona que imprime el menú.

<ul id='pagemenu'>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Support</a></li>
<li><a href='#'>About</a></li>
</ul>

current_page_item es el selector definido para el foco de la opción del menú dentro del CSS para el caso de esta plantilla/template:

.current_page_item {
   color:#4e4d4d;
   background:#fff;
   -moz-border-radius:6px 6px 0 0;
   -khtml-border-radius:6px 6px 0 0;
   -webkit-border-radius:6px 6px 0 0;
   display:block;
   text-decoration:none;
   text-shadow:0 1px 0 #c9c7c7;
}

Solo resta hacer uso de las etiquetas DATA y de las condiciones para conseguir lo que buscamos:

<ul id='pagemenu'>

<!-- si es el index, le damos el foco en el menú -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
   <li class='current_page_item'>
     <a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<b:else/>
   <li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
</b:if>

<!-- si es la zona de contacto .. -->
<b:if cond='data:blog.pageName == &quot;Contactame&quot;'>
   <li class='current_page_item'>
     <a expr:href='data:blog.homepageUrl + &quot;p/contactame.html&quot;'>Contactame</a>
   </li>
<b:else/>
   <li>
     <a expr:href='data:blog.homepageUrl + &quot;p/contactame.html&quot;'>Contactame</a>
   </li>
</b:if>

<!-- si es la zona Acerca del autor.. -->
<b:if cond='data:blog.pageName == &quot;Acerca&quot;'>
   <li class='current_page_item'>
     <a expr:href='data:blog.homepageUrl + &quot;p/acerca.html&quot;'>Acerca de..</a>
   </li>
<b:else/>
   <li>
     <a expr:href='data:blog.homepageUrl + &quot;p/acerca.html&quot;'>Acerca de..</a>
   </li>
</b:if>
<li><a href='http://www.blogger.com/home'>
Escritorio</a></li>
</ul>

Como la etiqueta DATA data:blog.homepageUrl  devuelve la URL del blog, podemos concatenarla con el nombre de nuestras páginas individuales, de manera de que si cambiamos el subdominio del nuestro blog no haya que modificar las URL a los recursos del mismo.

data:blog.homepageUrl + "p/acerca.html"