Instalando a ferramenta Breadcrumb em blogs do Blogger

A ferramenta Breadcrumb, é como um caminho percorrido pelo leitor assim que ele clica no título da postagem. Ele também é uma ferramente inteligente, pois ele automaticamente detecta qual o marcador utilizada no post e o nome da postagem. Você também pode personalizá-la ao seu gosto, desde que você tenha conhecimentos, pois vou ensinar o básico. Vamos ao tutorial.

1. Acesse o painel de seu blog e clique na guia Modelo, depois clique no botão Fazer backup/Restaurar e faça uma cópia de segurança clicando no botão Fazer download do modelo completo.

2. Volte a guia Modelo e clique no botão Editar HTML. Logo depois, marque a caixa Expandir modelos de widgets e pressione Ctrl+F para abrir o Localizador e procure pela tag abaixo.

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

3. A tag provavelmente, aparecerá duas vezes em seu template. Então, você deverá substituir todas as tags encontradas pelo código abaixo.

<!-- Início Breadcrumbs -->
<div id='breadcrumbs'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>Você está em:
<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'>&#187;
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>          
</b:loop>
&#187;
<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 == &quot;archive&quot;'>
<div class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> &#187; Arquivos de <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>Você está em:
<a expr:href='data:blog.homepageUrl'>
Início</a> &#187; Posts da Categoria: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</div>
</b:if>
</b:if>
</div>
<!-- Fim Breadcrumbs --> 

4. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

5. Agora, pressione novamente Ctrl+F para abrir o Localizador e procure pela tag abaixo.

]]></b:skin> 

6. Imediatamente, acima dela cole o código a seguir fazendo as personalizações necessárias.

/*-----Breadcrumbs-----*/
#breadcrumbs {
font-size: 88%; /*---tamanho da fonte do texto---*/
padding:5px;
font-weight: bold;
line-height: 1.4em;
}
#breadcrumbs a:link {
font-weight: bold;
color: #xxx   /*---coloque a cor do link---*/
}
#breadcrumb a:visited, {
font-weight: bold;
color: #xxx   /*---coloque a cor do link---*/
}
#breadcrumb a:hover{
font-weight: bold;
text-decoration:underline;
color: #xxx   /*---coloque a cor do link---*/
}

Você pode colocar mais opções se você tiver conhecimentos em CSS.

7. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Pronto, sua ferramenta foi instalada. Lembrando que ela só aparecerá nas partes internas do blog. Agora seus leitores podem fazer a navegação "sem se perder". Abraços e boa sorte!