Navegação estrutural (Bread Crumbs) no Blogger
Bread Crumb ou navegação estrutural é literalmente a "navegação por migalhas de pão", é uma técnica que pode ser utilizada para que o usuário possa se localizar quando estiver lendo um artigo. Observe o exemplo de uma Navegação Estrutural:
Página Inicial -> Categoria/Marcador -> Nome do Artigo
Então essa técnica é de extrema importância para o usuário, e vou mostrar como implementá-la no Blogger:
Como sempre, faça backup do template do seu blog.
Vá em Layout -> Editar HTML e selecione a opção Expandir Modelos de Widgets
1. Agora procure pelo seguinte código:
Demonstração da Navegação Estrutural (Bread Crumb):
Então essa técnica é de extrema importância para o usuário, e vou mostrar como implementá-la no Blogger:
Como sempre, faça backup do template do seu blog.
Vá em Layout -> Editar HTML e selecione a opção Expandir Modelos de Widgets
1. Agora procure pelo seguinte código:
<b:includable id='main' var='top'>
E substitua por:<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'>
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'>»
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == "true"'/>
</b:loop>
<b:else/>
»Sem Categoria
</b:if>
»<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Início</a> » Todos os Artigos
<b:else/>
<a expr:href='data:blog.homepageUrl'>Início</a> » Artigos da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
2. Procure novamente por:<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<p 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'>»
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == "true"'/>
</b:loop>
<b:else/>
»Sem Categoria
</b:if>
»<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Início</a> » Todos os Artigos
<b:else/>
<a expr:href='data:blog.homepageUrl'>Início</a> » Artigos da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='top' name='status-message'/>
E após essa linha adicione:<b:include data='posts' name='breadcrumb'/>
3. Agora você terá que configurar o estilo da sua navegação, para isso adicione:/*-----Breadcrumbs-----*/
.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border-bottom:3px double #C0C0C0;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:Blue;
}
Antes da tag:.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border-bottom:3px double #C0C0C0;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:Blue;
}
]]></b:skin>
Demonstração da Navegação Estrutural (Bread Crumb):
Que interessante, vou ver melhor, acho que vou colocar no meu blog!
Legal , queria fazer a tempos algo assim no meu blog. Segui as instruções, tudo certo, só não achei a ultima tag , porque será?
Qual foi a tag que você não achou? ]]></b:skin>?
Parabens pelas dicas, meu blog esta ficando cada dia melhor graças ao seu trabalho.
Comentei de novo so para colocar o endereço do meu blog.
Parabens novamente!
Obrigado pelo elogio Robson, recomendo seguir esta dica para eliminar um terrível bug nos comentários do Blogger.
Abraço.
Dica muito boa! Já está efetivada!! Parabéns por seu blog!!!
Parabéns, ja estou usando.
Obrigado.
Parabéns. Ja estou usando...
Já usava mas alterei o template e estou personalizando e implantando de novo.Valeu...