Breadcrumb: Mapa de navegação de páginas no Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

700x500-tesouro2 Pequenos detalhes no layout de seu blog podem fazer muita diferença, especialmente aqueles detalhes que favorecem a navegabilidade de suas páginas, fazendo com que o visitante encontre o que precisa. Uma dessas maneiras é o “Breadcrumb” (migalhas do caminho) que são os links no topo das páginas que indicam por onde o visitante está passando para chegar naquele conteúdo. Repare que isso aparece no topo dos artigos do [ Ferramentas Blog ] e você pode colocar no seu, seguindo esse tutorial super simples.

 

Esses links de navegação são uma forma de indicar ao visitante como ele chegou até aquela página e quais os caminhos de volta que pode percorrer para retornar à página inicial ou a outras partes relacionadas àquele conteúdo. Esse modelo que vou ensinar é bem simples e ocupa pouquíssimo espaço acima do título dos artigos ou da página de marcadores e resultados de busca, e não muda em nada a Home, página inicial de seu blog.

 

Antes de prosseguir vale lembrar os procedimentos de segurança, testar tudo antes em um blog para testes e fazer um backup de seu blog para evitar sustos e erros indesejados.

 

Instalando o Mapa de Navegação.

1. Abra o painel do Blogger e clique no menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets” para visualizar todo o código-fonte de seu blog, como ilustra a imagem:

 

layout-editar-html-expandir-widget

 

2. Procure pela seguinte linha:

 

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

 

3. Imediatamente ABAIXO dela, cole esse trecho:

 

<b:include data=’posts’ name=’breadcrumb’/>

 

4. Faça uma nova busca pelo código-fonte e encontre mais essa linha:

 

<b:includable id=’main’ var=’top’>

 

5. Logo ACIMA dela, cole mais este trecho, sem modificar nada:

 

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>

<b:else/>
<b:if cond=’data:blog.pageType == "item"’>

<p class=’breadcrumbs’>
<span class=’post-labels’>
Você está aqui: <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’>
<b:if cond=’data:label.isLast == "true"’> »
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == "archive"’>

<p class=’breadcrumbs’>
<span class=’post-labels’>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Arquivos de <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == "index"’>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<b:if cond=’data:blog.pageName == ""’>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Todos os artigos
<b:else/>
Você está aqui: <a expr:href=’data:blog.homepageUrl’>Home</a> » Artigos do Marcador <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

 

6. Agora faça a última busca para encontrar a linha “]]></b:skin>” e imediatamente ACIMA dela, cole este último trecho:

 

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

 

7. Por fim, salve o modelo e veja o resultado em seu blog.

Para ter certeza de que tudo está funcionando, você terá que navegar em seu blog, clicando nos marcadores e nos artigos e vendo como o Mapa aparecerá no topo da página. Lembrando que nada mudará na página principal do blog.

 

Veja também para melhorar seu layout:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

18 Comentários

  1. Um dos mais simples tutoriais para as "migalhas" que já li.
    Muito bom mesmo. 😉

    Eu tenho um baseado no ano e utilizando os arquivos em vez dos marcadores mas muito mais complicado de colocar. Da sua maneira além de muito mais simples, utiliza menos código. Bom trabalho.

    Abraço. 🙂

    Responder

  2. Marco Lemos
    Outro tutorial muito bom. Por enquanto não vou meter no meu blogue. Gosto de o manter simples para navegar rápido.
    O que mais me agrada nos teus tutoriais é a clareza da exposição.
    Abraço de Lisboa.

    Responder

  3. Hi, Marcos Lemos (Melhor assim, né?)…

    Muito obrigado pelo pronto atendimento a meu apelo. [Alteração devidamente implementada] Devo-lhe MAIS uma!

    []'s @inaciorolim

    Responder

  4. Hi, Ordones…

    Já havia tentado implementar o Breadcrumb outras vezes, sem sucesso. Mas com este seu post implementei-o facilmente.

    Agora, uma sugestão e uma dúvida: Tentando melhorá-lo, inclui antes do "Home", que o inicia, a frase "Você está aqui:" Só que ela aparece como um link para o Home, conforme pode ser visto aqui.

    Como incluir esta frase, ou algo parecido, sem o link?

    (Sem querer dar uma de salsinha e já…) rsrs

    Responder

  5. Muinto bom o tutorial dele , ele sabe no que fala , no que diz, nas suas palavras ele não só quer sucesso para ele , mas como para todos os contatos dele os amigos blogueiros,e ate aqueles iniciantes.Ele leva em consideração no que pesquisamos e queremos entender de uma forma , simples e bem explicada . Meus sinceros votos.

    http://www.twitter.com/jhonesemerson

    Responder

  6. Marcos, poxa há tempos que queria implementar isso no blog, mas não sabia nem o termo e agora encontrei mais esta dica aqui bem explicadinha porém, de entendimento simples. Já adicionei e deu tudo certo.
    Te agradeço, pois embora tenha um blog sem fins lucrativos, gosto sempre de aperfeiçoá-lo e facilitar a navegação aos meus leitores.
    Obrigada por mais essa!

    Paz e sucesso a ti,

    @lucyamorepaz

    Responder

  7. Muito boa a postagem mais o grau de dificuldade em navegar em um blog é relativo, depende do interesse da pessoa.

    Responder

  8. Essa alteração funcionou nos
    meus dois blogs, 'Meu Cazzzulo'
    e no 'Dicas do Quaresma'
    Parabéns pela clareza nos tutoriais!
    Grande Abraço…
    A vida é assim…
    E assim se segue…
    NAMASTE!

    Responder

  9. Hum… Achei esse "Você esta aqui:" um tanto deselegante.

    Tirei ele e no lugar de "home" coloquei um pequeno logo do meu blog.

    Ficou show! Vlw Marcos! Ótimo tutorial!

    Responder

  10. Gostei do tutorial. Mas ele funciona no modelo Simples do Blogger? Me tire essa dúvida: se eu adicionar vários códigos diferentes antes de “ ]]> ” , um não vai anular o outro?

    Responder

  11. Pingback: Você conhece a importância do BreadCrumb? | Guia do Blogueiro

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.