Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

Fazer a barra de navegação no blogger é uma forma interessante de mostrar onde o visitante está no seu site. Estamos falando daquele tipo de menu mostrando inicio > nome do marcador > titulo da postagem. Isso pode ajudar a diminuir a sua taxa de rejeição fazendo os visitantes permanecerem mais tempo na sua pagina já que mostra links dos marcadores no menu de navegação que alguns sites chamam de Gadget Breadcrumb. Caso esteja procurando aqueles barras com ferramentas com botão curtir, retweet e outros que alguns blogs mostram no rodapé da pagina veja neste link: Criar barra com acessórios no blog.

colocar menu de navegação no blogger
Caso tenha ficado interessado em colocar musicas do blog aqui está o link do tutorial da imagem que usamos como exemplo:Colocar Várias Músicas no Blog - Como Criar Playlist.

Mas para colocar essa ferramenta de navegação no seu blog primeiro sugerimos que faça um backup do seu template já que vamos mexer no código HTML. Agora entre na pagina modelo > editar HTML, marque a opção expandir modelos de widgets.

marcar opção expandir modelos de widgets

Procure esse código HTML no seu blogger:
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Apague o código, coloque esse outro no lugar e salve as alterações:
<div id='breadcrumbs'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<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>

E já está pronto agora seu blogspot tem um menu de navegação interna do site, mas ainda podemos melhorar e personalizar esse menu usando alguns códigos de formatação de texto.

Então continuamos na pagina editar HTML, mas desta vez vamos procurar por ]]></b:skin> e colocar antes dele:

.breadcrumbs {background-color: #FFC;border: 1px dashed #000;margin: 5px;padding: 3px;}

Veja aqui algumas dicas para formatar e destacar o texto da barra de navegação do seu blogspot:
Diferença entre Margin e Padding - Alterar Template
Código das Cores
Colocar ou alterar as bordas

Além disso, você pode notar no código os textos: Você está em, Início, Posts da Categoria, Arquivos de (que se refere ao mês da postagem). Então você pode modificar esses textos como desejar, mas tenha cuidado para não apagar nada além destes textos porque todo o restante faz parte do código e não deve ser modificado. Sugerimos primeiro testar o código como publicamos aqui neste tutorial e somente depois começar fazer outras modificações nele.

Achamos bem interessante esse código do widget de navegação (breadcrumbs) e nos testes que fizemos (7/05/2012) funcionou perfeitamente nos navegadores Firefox, Internet Explorer e Google Chrome. Aproveite e veja aqui como Criar barra de ferramentas do seu blog para esses navegadores. Esperamos que gostem e que esse acessório ajude seu blog a conseguir mais pageviews e conquistar mais visitantes fazendo com que as pessoas conheçam mais paginas do seu blog. Abraços a todos e boa semana!

38 comentários :

  1. gostei muito desse código

    ResponderExcluir
  2. já estou usando também, eu procurei tanto e no final era tão facil fazer

    ResponderExcluir
  3. Fabiano, entre neste site: http://www.tirashabbianas.com/

    Perceba que há vários gadgets no lado esquerdo, e quando clicamos na imagem da aba "Almanaque" todos os gadgets somem e fica apenas o de Login do Fórum deles. Como faz isso?

    PS: eles são blogger, porém compraram domínio próprio. Para comprovar, pode entrar aqui:
    www.tirashabbianas.blogspot.com

    ResponderExcluir
  4. Veja este site: http://www.tirashabbianas.com/

    Perceba que eles tem uma área de Login para um fórum feito com o WebHosting Área e colocaram no blogger. Como faço isso?

    ResponderExcluir
  5. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  6. Já coloquei , muito bem explicado.

    ResponderExcluir
  7. Fabiano eu aqui de novo,aliás, não consigo ficar sem vir aqui.Eu vim aqui procurar sobre posts duplicados,acabei encontrando este código.
    Estou levando,bjs

    ResponderExcluir
  8. Anonimo
    ele criou esse sistema de login fora do blogger.
    na verdade é um iframe.

    ResponderExcluir
  9. Graça
    é curioso mas boa parte das coisas que faço nos meus blogs eu também encontro quando procurava um assunto totalmente diferente.

    ResponderExcluir
  10. Fabiano tem como colocar só 5 marcadores para aparecer nesse código? é porque eu uso muitos marcadores nas minhas postagens e ia ficar estranho se aparecesse todos nesse código.

    ResponderExcluir
  11. eu não tinha notado isso, mas acho que é um limite do proprio código e não sei como alterar.

    ResponderExcluir
  12. Aguem pode-me ensinar a fazer menu com sub-menu para o blogue. resposta para bailedegaragem@iol.pt
    Obrigado

    ResponderExcluir
  13. Rez isso pode fazer as pessoas ficarem mais tempo no seu blog e visitarem mais paginas aumentando o pageview e isso ajuda em SEO.

    mas é claro depende das pessoas se interessarem pelo link do menu.

    ResponderExcluir
  14. Fabiano Roberto entedi vlw pela explicação e parabens pelo trabalho magnifico que vc faz

    ResponderExcluir
  15. oii.. preciso saber como modificar a ordem dos marcadores.. as únicas pções são deixar em ordem alfabetica ou em ordem de visitas, mas eu queria em ordem de preferência mesmo, na ordem que eu escolher.. tem como fazer isso? obrigada desde já

    ResponderExcluir
  16. Engenharia Ambiental UFFS Chapecó

    é possivel fazer um menu de marcadores usando html, mas terá que fazer isso manualmente.

    retire o gadget de marcadores e adicione um gadget de html/javascript e nele coloque os links que desejar que podem ser os links dos marcadores na ordem que desejar.

    ResponderExcluir
  17. Queria um menu por ordem de postagem com sub menu. Por exemplo: Prevenção, você clica nele e aparecem todas as postagem relacionadas a prevenção e assim por diante. Como o que você tem na lateral esquerda da sua página. Outra coisa, qual a melhor posição dos anúncios? lateral, banner, blocos... e como cobrar por uma postagem paga sobre uma clínica por exemplo, falando de metodologia, direcionamento, tempo espaço físico, atividades e assim por diante com foto a escolha do cliente. Já fiz essa pergunta e ninguém me responde. Este blog está demais. Uma coisa, os códigos são daquele tamanho mesmo? E se puser outro tem que dar espaço entre eles? Como funciona isso? Abraços César

    ResponderExcluir
  18. Cesar use a busca do nosso site já falamos sobre sub menu e posicionamento de anuncios.


    normalmente anuncios no inicio da pagina dão melhores resutados

    ResponderExcluir
  19. Eu não conseguir achar o codigo ..

    ResponderExcluir
  20. Olá comecei um blog recentemente ,mais tenho dificuldades ,vejo sempre teu blog pra configurar o meu xD
    Mais tenho uma duvida ,eu fiz uma barra do menu com nome : dicas
    mais como faço pra´por mais assuntos alem do quais estao la ,sem altera-lo ???

    ResponderExcluir
  21. essa barra é criada usando os marcadores do blogger e não tem como alterar

    ResponderExcluir
  22. cara, como faz isso no blog 2013?

    ResponderExcluir
  23. Cleyton o procedimento é o mesmo o que mudou é a forma de achar os código na pagina html, veja aqui:
    Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

    ResponderExcluir
  24. Mesmo fazendo a busca na caixa de pesquisa,tinha palavras que não tinha e o meu bloh não tem expandir HTML,Só tem -SALVAR MODELO-EDITAR MODELO(MESMO EDITAR MODELOS NÃO TEM ALGUMAS PALAVRAS QUE PROCURO COMO top,message,status.
    Eu tenho um Blog de filme e gostaria de saber como postar apenas as fotos do filme na pág.inicial e depois e só clicar nela para ver o filme.Dê uma olhada no meu blog http://cinetsunami.blogspot.com.br e o blog de exemplo de como eu estou querendo é esse http://www.armagedomfilmes.biz.Abraço

    ResponderExcluir
  25. Cristiane
    a pagina editar html mudou, veja aqui:
    Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F


    sobre colocar filmes para assistir no seu blog embora muitos sites façam isso na maioria das vezes viola os direitos autorais e pode a levar a punições do Google e Adsense

    ResponderExcluir
  26. Fabiano, adorei esse post! No meu template, não havia esse código CSS antes da tag ]]>, e logo a frase se misturava com o fundo escuro que tornava algo meio estranho feinho... Estava em busca deste detalhe faz um bom tempo! Agora ficou mais organizadinho com essa caixa de texto básica :D

    ResponderExcluir
  27. Gostaria de saber como faço para aparecer a palavra inico antes do meu marcador pois o inicio só fica lá em baixo do blog.Eu quero que fica em primeiro lugar antes das palavras do meu marcador

    ResponderExcluir
  28. Anônimo

    era para aparecer como está na imagem que publicamos no tutorial...

    talvez seu blog tenha algum outro código CSS formatando os links que altera o posicionamento dos links.

    verifique também se colocou o código no lugar certo no seu html pois o lugar onde aparece o gadget no blog depende de onde coloca o código.

    sem saber o endereço do blog não tenho como dar respostas mais diretas sobre o assunto.

    ResponderExcluir
  29. Gostaria de saber como faço para aparecer a palavra inico antes do meu marcador pois o inicio só fica lá em baixo do blog.Eu quero que fica em primeiro lugar antes das palavras do meu marcador

    http://blogbibliotecaescolara.blogspot.com.br/

    http://bibliotecamadrecarmelita.blogspot.com.br/search/label/Biblioteca%20Informatiza%C3%A7%C3%A3o

    ResponderExcluir
  30. qual palavra inicio você está falando?

    é normal só aparecer os links dos marcadores

    ResponderExcluir
  31. Quero que tenha a palavra Inicio antes de todas as palavras do marcador (inicio é a onde aparece a ultima postagem ou melhor o endereço do blog dê uma olha neste blog no marcador tem inicio,livros.... olha este blog http://ntesrec.blogspot.com.br/

    ResponderExcluir
  32. aqui é um menu horizontal.... veja aqui:
    Menu Horizontal com Efeitos no Blogger usando CSS

    lá você cria o menu usando html e coloca os links que desejar

    ResponderExcluir
  33. Amigão como fazer para o inicio aparecer apartir da tela de postagems, e não na tela inicial?

    ResponderExcluir
    Respostas
    1. a pagina inicial é padrão do blog e não tem como trocar

      Excluir
  34. Bom dia, gostaria de saber como faço para mudar o menu do meu blog, eu estou seguindo todos os passos recomendados no site mas não estou tendo sucesso.
    Obrigada desde de já.

    ResponderExcluir
  35. qual menu? esse do tutorial?

    se for é só criar o estilo .breadcrumbs junto com os outros css do seu blog

    ResponderExcluir