Blogger - Aprenda a adicionar a ferramenta breadcrumb

Olá caro leitor hoje você vai conhecer um hack que deixa o caminho percorrido do leitor em seu site. Primeiramente vamos conhecer o breadcrump.

Breadcrumb - A ferramenta breadcrump é uma ferramenta que mostra o caminho percorrido pelo leitor desde a página inicial de seu site.

Dica: Antes de fazer este tutorial faça um backup de seu site.

1. Instalando o Hack

1) Entre em Design > Editar HTML > Marque a Caixinha Expandir Modelos Widgets
2) Procure por:

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

3)Substitua por:

<!-- 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) Pronto o Breadcrumb já está instalado em seu site.

2. Modificando o hack *Opcional*

Aplicando estilo CSS

 O estilo CSS serve para você deixar o Breadcrumb do seu gosto, caso você queira modificar a cor do link, mudar o tamanho da fonte, entre outros. Caso você não queira pode pular esta seção
Para adicionar vá em: Design/Modelo>Editar HTML> ]]></b:skin> e cole acima o código:



/*-----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 já visitado---*/
}
#breadcrumb a:hover{
font-weight: bold;
text-decoration:underline;
color:xxx   /*---coloque a cor do link other---*/
}


Modificando a frase Você está em:

Para você modificar a frase que aparecer no Breadcrumb, você deve antes de adicionar ao HTML colar no Bloco de Notas e procurar a frase "Você está em" e modifica-lá antes de adicionar de salvar em HTML.

3. Testando

   Para testar o breadcrumb em seu site é preciso somente você entrar em uma postagem e verificar o breadcrumb acima da postagem.

4. Resultado