Breadcumbs en Blogger

Al igual que una barra de dirección en un navegador de archivos, los breadcumbs muestran la posición actual del usuario en nuestro sitio utilizando las etiquetas como carpetas.

Vista previa de los breadcumbs en Blogger:

¿Cómo insertarlo en Blogger?:

Paso 1: Integrando en la plantilla los breadcumbs:

Primero, vamos a ''Diseño/Edición HTML'', marcamos ''Expandir plantillas de artilugios'' y buscamos el código siguiente y le añadimos lo que está en verde:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- deshabilitar status message
<b:include data='top' name='status-message'/>
deshabilitar status message -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

 Ahora buscaremos un poco mas arriba la siguiente línea:

<b:includable id='main' var='top'>

Sobre esta, añadiremos la 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; Mostrando todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187;  <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Guardamos los cambios y listo:

Paso 2: Añadiendo los estilos:

Buscamos la siguiente zona en la plantilla:

]]></b:skin>

Sobre esta, pegaremos el siguiente código:

.breadcrumbs {
border-top: 2px ridge #DADADA; /* borde superior */
border-right: 2px ridge #DADADA; /* borde derecho */
border-left: 2px ridge #DADADA; /* borde izquierdo */
border-bottom: 2px ridge #DADADA; /* borde inferior */
background: #FFFFFF; /* color del fondo */
padding: 5px; /* espaciado del contenido en los bordes */
margin-top: 10px;
margin-bottom: 10px;
}

Modificamos los colores, los bordes, márgenes, etc. a gusto y guardamos los cambios: