Añadiendo Estas en: blogger (Breadcrumb)

Te has dado cuenta que en algunas páginas te indican la ruta en la que te encuentras dentro de su sitio?, bueno pues hoy el tema se trata de eso, te diremos lo que necesitas para agregar este truco a tu blog, espero te sea de utilidad!

Ok, esta parte del código se le conocen como breadcrumbs (migajas de pan) y como lo mencione anteriormente nos indica la ruta, es una especie de mapa, que ayuda a tu visitante a no perderse por tu sitio

Un ejemplo de esto se veria así:

Estás en: Inicio » videos » Metallica con la Orquesta Sinfonica

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 negritas justo donde se indica:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Ahora busca el siguiente código

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

Justo arriba de ese código pega el siguiente código

<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 peguemos el código que le dará color, nos referimos a los estilos, busca la siguiente línea ]]></b:skin> y justo arriba pega el siguiente código

.breadcrumbs { border-top: 2px ridge #2E2E2E; /* borde superior */ border-bottom: 2px ridge #2E2E2E; /* borde inferior */ background: #D8D8D8; /* color de fondo */ padding: 5px; /* margen interior*/ margin-top: 10px; margin-bottom: 10px; }

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

En algunos casos no acepta comentarios dentro del codigo, por si te manda error, quitale los comentarios y vuelve a probar.

Buena suerte!