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.

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.