Como instalar Breadcrumb no Blogger

Uma leitora do Crie Blogger perguntou-me como faz para que apareça aquele mapinha de navegação, que indica o caminho pelo qual o visitante percorreu no blog. Esta ferramenta é chamada de Breadcrumb, para instalá-lo no Blogspot siga o tutorial a seguir.

Instalação do Breadcrum no template

1. Vá ao painel do Blogger, e na guia modelo procure por "editar html".

2. Clique em "Expandir modelos de wigdets", e procure por:

<b:include data='top' name='status-message'/>

3. Substitua por:
<div id='breadcrumbs'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <div class='breadcrumbs'> </div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'> Início</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>» <a expr:href='data:label.url' rel='tag'> <data:label.name/></a> <b:if cond='data:label.isLast != "true"'/> </b:loop> » <span class='post-title entry-title'> <data:post.title/> </span> </b:if> </b:loop> </div> </b:if> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/> </div> </b:if> <b:else/> <b:if cond='data:navMessage'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'> Início</a> » Posts do Marcador: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a><p align="right"><span style="font-size: x-small"><a href="http://www.crieblogger.com/" target="_blank">Obtenha este Widget</a></span></p> </div> </b:if> </b:if> </div>

Aplicação de estilos

Você pode personalizar a formatação deste hack de acordo que desejar, segue abaixo o código de estilos: 1. Procure por:

]]></b:skin>

2. Cole logo acima o trecho a seguir (como disse, você pode modificar estre trecho para estilização do breadcrumb):

#breadcrumbs {
font-size: 92%;
padding:5px;
line-height: 1.4em;
}

Como o breadcrumb não aparecerá na página inicial não tem como visualizar como ficará antes de salvar. Por isso salve, e navegue nas páginas de marcadores e posts para ver o resultado. Abraços!