» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Breadcrumb - Uma ferramenta de Usabilidade

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.
Usabilidade é a facilidade de navegação de um site.
É 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.
Veja este hack aplicado aqui acima enquanto está lendo este post:
Você está em: Home » TUTORIAIS » USABILIDADE »Breadcrumb - Uma ferramenta de Usabilidade
Navegando 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'>
Selecione-a e Substitua por:
<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 == &quot;item&quot;'>
<!-- 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'>&#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == &quot;true&quot;'/>
</b:loop>
<b:else/>
&#187;Sem Marcador
</b:if>
&#187;<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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;
}
Cole este código acima da linha
]]></b:skin>
Configure da forma que quiser

Sugestão
Para chamar a atenção para seu breacrumb você pode tirar a mensagem de status do blogger.
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:
<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
Breadcrumb - Uma ferramenta de Usabilidade Breadcrumb - Uma ferramenta de Usabilidade Reviewed by Áurea on 8/27/2012 Rating: 5

15 comentários:

  1. Muito obrigado pela dica já implantei no meu blog, facil rápido de fazer valeu;-).

    ResponderExcluir
  2. Ótimo Áurea! Ótimo mesmo!
    Fiz no meu, e ficou muito bom!
    Show de bola!

    ResponderExcluir
  3. boa dica sempre procurei saber como fazia isso ja tinha visto em outros blogs

    ResponderExcluir
  4. tem como vc pegar o template tabs01 e botar o cabecalho em cima de td? la ele ta na coluna da esquerda e fica feio. queria o cabecalho no meio e grande.

    um abraco!

    ResponderExcluir
  5. @bypoesia Que bom que deu certo e você gostou.

    @Rafael Silveira Obrigada. Fico feliz que tenha dado tudo certo no seu blog.

    @centralexpert.net Agora você já sabe e viu como é fácil!

    @Lucas Palmeirense Estou devendo templates novos mesmo. É a falta de tempo. Vou aproveitar esta licença para criar mais.
    Quanto a sua dúvida abaixo. Vou ver o que posso fazer, estou querendo reformular este template mesmo.
    Assim posso lançar um novo com ele como base.

    ResponderExcluir
  6. Só faltou dizer que é preciso selecionar "expandir modelos de widgets", quase me enrolei por causa disso.
    Obrigado pela dica.

    ResponderExcluir
  7. @0001coisas Tem razão! Já corrigi o tuto. Obrigada por avisar.

    ResponderExcluir
  8. Passando para agradecer a excelente dica! Hoje que consegui ajeitar ao gosto...
    A.:.S

    ResponderExcluir
  9. aurea como bota a cor do texto branca?

    ResponderExcluir
  10. muito bom, gostei!
    agora queria saber como faço pra deixar ele sempre visivel, na pagina inicial e também nas outras paginas, pq ele só aparece nas marcadores e pesquisa.
    até mais

    ResponderExcluir
  11. No blog de test deu certo, mas no oficial não funcionou. O que terá acontecido?
    Mas a dica é ótima!

    ResponderExcluir
  12. Olá, achei incrível essa ferramenta!!
    Pois bem querida autora, eu vim aqui honestamente fazer um pedido:
    Eu estava tendo um problema aqui com esse hack, ele pegava uma margin desnecessária na página inicial sem mesmo aparecer...
    Então comecei pesquisar outros códigos dele, e nada dava certo, então vi que tinha duas DIVS desnecessárias no código, era esse meu problema.
    Mas antes de solucionar eu vim parar aqui na postagem do seu Blog, e fui verificar como funcionava aqui no site, e vi esse lindo efeito de triângulos! Eu gostaria de pedir autorização de usa-lo eu meu blog (ele é fechado, ainda não está pronto o template), pois não tenho a minima ideia de se fazer no css... Tenho sua permissão?
    Grato.

    ResponderExcluir
  13. @DanielOlá Daniel,
    Fique a vontade para usar este visual!
    O código CSS é este:
    /*-----Breadcrumbs-----*/
    .breadcrumbs{background:#fff;height:30px;line-height:30px;border:solid 1px #bec39e;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;overflow:hidden;padding-left:10px;color:#666;margin:10px 0}
    .breadcrumbs li{list-style-type:none;display:inline-block;float:left}
    .breadcrumbs a{display:inline-block; background-image:url(http://4.bp.blogspot.com/-WLPWocFdw1g/T8pvm1tUvQI/AAAAAAAAGeo/RdXYGXddUmY/s1600/breadcrumb.gif); background-repeat:no-repeat; background-position:right; padding-right:10px; text-decoration:none; color:#009df2; outline:none; -webkit-transition-duration: .90s;}
    .breadcrumbs a:hover{color:#D23F3F}

    Se você quiser mudar a cor das linhas terá que mudar a cor da imagem de setinha!

    Seja sempre bem vindo ao TPV!

    ResponderExcluir
  14. Oi Aurea; mais um excelente tutorial. Tem como aparecer apenas o marcador principal? Porque uso sempre 3 marcadores (1 principal e 2 secundários). bjs

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.