Instalando o recurso Breadcrumb na Blogger

Breadcrumb é uma ferramenta que facilita a navegação do leitor pelo seu blog / site, desde a página inicial, até a postagem que ele está lendo no momento, facilita o acesso a página inicial, ou ao marcador especifico onde o post está arquivado.
Lembrando que o Breadcrumb é um recurso muito importante na questão da usabilidade do seu blog e ainda para uma melhor otimização SEO.

Neste tutorial você vai ver como aplicar esta ferramenta no seu blog.

1º Etapa – Instalando o Hack

1) Acesse o menu Tema >> Editar HTML >> dê um clique dentro da caixa de código e depois dê Ctrl+F que abrirá a barra de pesquisa e nela procure por:

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

2) 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 -->

Salve as modificações.

2º Etapa – Aplicando estilos CSS:(este passo é opcional)

Este passo você só deverá incluir , se, por acaso, quiser modificar as cores do link ou tamanho da fonte, caso não queira modificar, a fonte e o link se apresentarão conforme cores e tamanhos aplicados a todos os links no seu blog.

Caso opte por aplicar estilos, copie o código abaixo e cole-o acima de:

]]></b:skin>

/*-----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---*/ }

Modifique as cores de acordo com o seu template! Até a próxima.