sábado, 24 de julio de 2010

Breadcrumbs en Blogger

Los breadcrumbs o migajas de pan, son una especie de guía que nos indican a lo largo de la navegación dentro de un sitio Web en dónde nos encontramos, funciona como una brújula que nos muestra el camino por el que hemos andado, por ejemplo, si yo lo tuviera puesto arriba de la entrada diría:
Estás en : Inicio » Trucos » Breadcrumbs en Blogger

Para ponerlo en tu blog sólo basta añadir unos códigos, primero entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Ahora busca este código y agrega lo que está en color rojo justo donde se indica:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Luego un poco más arriba busca esta línea:
<b:includable id='main' var='top'>

Y arriba de ella agrega lo siguiente:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Archivos de <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Entradas etiquetadas bajo <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Por último si quieres darle un poco de estilos como color de fondo, borde, etc, agrega antes de ]]></b:skin> esto:
.breadcrumbs {
border-top: 2px ridge #2E2E2E; /* borde superior */
border-bottom: 2px ridge #2E2E2E; /* borde inferior */
background: #D8D8D8; /* color de fondo */
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

Ahí puedes agregarle más estilos si lo deseas, el resultado será este:

breadcrumbs
Si tu entrada tuviera más de una etiqueta mostrará sólo la última etiqueta que aparezca según el orden alfabético.

No hay comentarios:

Publicar un comentario