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;
}
Fuente: http://www.ciudadblogger.com/2010/07/breadcrumbs-en-blogger.html

No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.