Breadcrumb: Mapa de navegação de páginas no Blogger

Pequenos detalhes no layout de seu blog podem fazer muita diferença, especialmente aqueles detalhes que favorecem a navegabilidade de suas páginas, fazendo com que o visitante encontre o que precisa. Uma dessas maneiras é o “Breadcrumb” (migalhas do caminho) que são os links no topo das páginas que indicam por onde o visitante está passando para chegar naquele conteúdo. Repare que isso aparece no topo dos artigos do [ Ferramentas Blog ] e você pode colocar no seu, seguindo esse tutorial super simples.

 

Esses links de navegação são uma forma de indicar ao visitante como ele chegou até aquela página e quais os caminhos de volta que pode percorrer para retornar à página inicial ou a outras partes relacionadas àquele conteúdo. Esse modelo que vou ensinar é bem simples e ocupa pouquíssimo espaço acima do título dos artigos ou da página de marcadores e resultados de busca, e não muda em nada a Home, página inicial de seu blog.

 

Antes de prosseguir vale lembrar os procedimentos de segurança, testar tudo antes em um blog para testes e fazer um backup de seu blog para evitar sustos e erros indesejados.

 

Instalando o Mapa de Navegação.

1. Abra o painel do Blogger e clique no menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets” para visualizar todo o código-fonte de seu blog, como ilustra a imagem:

 

 

2. Procure pela seguinte linha:

 

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

 

3. Imediatamente ABAIXO dela, cole esse trecho:

 

<b:include data=’posts’ name=’breadcrumb’/>

 

4. Faça uma nova busca pelo código-fonte e encontre mais essa linha:

 

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

 

5. Logo ACIMA dela, cole mais este trecho, sem modificar nada:

 

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>

<b:else/>
<b:if cond=’data:blog.pageType == "item"’>

<p class=’breadcrumbs’>
<span class=’post-labels’>
Você está aqui: <a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</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 == "true"’> »
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == "archive"’>

<p class=’breadcrumbs’>
<span class=’post-labels’>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Arquivos de <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == "index"’>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<b:if cond=’data:blog.pageName == ""’>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Todos os artigos
<b:else/>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Artigos do Marcador <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

 

6. Agora faça a última busca para encontrar a linha “]]></b:skin>” e imediatamente ACIMA dela, cole este último trecho:

 

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

 

7. Por fim, salve o modelo e veja o resultado em seu blog.

Para ter certeza de que tudo está funcionando, você terá que navegar em seu blog, clicando nos marcadores e nos artigos e vendo como o Mapa aparecerá no topo da página. Lembrando que nada mudará na página principal do blog.

 

Veja também para melhorar seu layout:

• Como criar Páginas Estáticas padrões do Blogger – novidade
• Como colocar anúncios AdSense lado-a-lado com o texto
• Botão para compartilhar links no FaceBook para Blogger