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 == "item"'>
<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'>»
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
»
<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 == "archive"'>
<div class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » 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> » 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)
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.
0 Comentários