Breadcrumb é um recurso que mostra o caminho das páginas visitadas no blog.
Em inglês significa migalhas.
É também considerado uma ferramenta de Usabilidade para o blog/site. Porque indica ao leitor onde ele está e facilita que volte à página inicial ou aos marcadores do post que ele se interessou.
Fiz algumas modificações para ficar mais explicativo quando aplicado no blog com frases como: "Você está em:" e alterei as frases em inglês para o português.
Então vamos ao hack que irá facilitar a navegação em seu site.
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
Se você encontrar esta linha 2 vezes. Substitua as 2 linhas.
Selecione-a e Substitua esta linha por:
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.
♦ Entre no seu blog e Clique em um post ou num marcador para verificar se seu breadcrumb está aparecendo corretamente.
Copie o código abaixo:
Mas o que é esta mensagem de status?
Esta mensagem é aquele quadradinho que aparece toda vez que você acessa os posts de um marcador no seu blog. Já vem configurada pelo blogger. Não deixa de ser uma ferramenta de usabilidade, mas deixa a desejar por não aparecer todos os marcadores do post.
Para isso você deve apagar a linha:
Para complementar o conteúdo leia estes textos sobre USABLILIDADE:
♦ Usabilidade: O que é Usabilidade?
♦ Google Analytics: Ajudando na Usabilidade, Acessibilidade e SEO de um Website
♦ Usabilidade no seu dia-a-dia.
♦ Princípios gerais de usabilidade em web sites
Post Atualizado em 27/08/2012
Em inglês significa migalhas.
É também considerado uma ferramenta de Usabilidade para o blog/site. Porque indica ao leitor onde ele está e facilita que volte à página inicial ou aos marcadores do post que ele se interessou.
Usabilidade é a facilidade de navegação de um site.Veja este hack aplicado aqui acima enquanto está lendo este post:
É uma importante ferramenta para o sucesso do seu site, uma vez que o usuário terá facilidade de encontrar o que deseja em seu site e navegar nele.
Você está em: Home » TUTORIAIS » USABILIDADE »Breadcrumb - Uma ferramenta de UsabilidadeNavegando na internet encontrei este hack do Blogger Plugins que vou ensinar agora.
Fiz algumas modificações para ficar mais explicativo quando aplicado no blog com frases como: "Você está em:" e alterei as frases em inglês para o português.
Então vamos ao hack que irá facilitar a navegação em seu site.
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
1º Passo
Encontre a linha de código:<b:includable id='main' var='top'><b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Sem breadcrumb na página inicial -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb para a página do post -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</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 Marcador
</b:if>
»<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</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'>Home</a> » Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts 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º Passo
Encontre a linha:<b:include data='top' name='status-message'/>Se você encontrar esta linha 2 vezes. Substitua as 2 linhas.
Selecione-a e Substitua esta linha por:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.
♦ Entre no seu blog e Clique em um post ou num marcador para verificar se seu breadcrumb está aparecendo corretamente.
3º Passo
Você pode configurar a linha do seu breadcrumb usando o código CSS:Copie o código abaixo:
/*-----Breadcrumbs-----*/
.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border-bottom:3px double #BEBEBE;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:red;
}]]></b:skin>Sugestão
Para chamar a atenção para seu breacrumb você pode tirar a mensagem de status do blogger.
Esta mensagem é aquele quadradinho que aparece toda vez que você acessa os posts de um marcador no seu blog. Já vem configurada pelo blogger. Não deixa de ser uma ferramenta de usabilidade, mas deixa a desejar por não aparecer todos os marcadores do post.
<b:include data='top' name='status-message'/>Para complementar o conteúdo leia estes textos sobre USABLILIDADE:
♦ Usabilidade: O que é Usabilidade?
♦ Google Analytics: Ajudando na Usabilidade, Acessibilidade e SEO de um Website
♦ Usabilidade no seu dia-a-dia.
♦ Princípios gerais de usabilidade em web sites
Post Atualizado em 27/08/2012
