Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Códigos e Scripts Postagens Vanessa S.

Instalar Ferramenta Breadcrumb no Blogger

Breadcrumb é uma ferramenta que exibe o caminho feito pelo leitor, desde a página inicial, até a postagem que ele está lendo no momento, facilitando o acesso a página inicial, ou ao marcador especifico onde o post está arquivado.

2

Esta ferramenta é importante e facilita a navegação no blog, visto que o leitor tem a facilidade de encontrar os artigos que ele procura no seu blog.
Neste tutorial você vai ver como aplicar esta ferramenta no seu blog.

1º Passo – Instalando o Hack

1) Acesse o menu “modelo >> Editar HTML >> marque a caixinha “Expandir modelos de widgets” e 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 == &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><!-- Fim Breadcrumbs -->

 

Salve as modificações.
Agora sigamos para o 2º Passo:

2º Passo – 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!

 

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

35 Comentários

  1. victor disse:

    gostaria de saber como tirar o nome do post fica grande e atrapalha eu so quero que fique os links das categoriais mais não o nome do post no final

  2. Funciona bem, unica coisa de ruim é que no meu blog parou de aparecer a mensagem de página não encontrada. alguma dica? abraços : )

  3. PadocaGames[ADM] disse:

    Brigado você *0*

  4. .:: Clau ::. disse:

    PadocaGames
    Que bom que deu certo. E obrigada pela colaboração viu? 😉

    Down Wolrd
    O @padocagames já deixou a dica ai.

  5. PadocaGames[ADM] disse:

    @Down Wolrd

    Adicione: /*—–Breadcrumbs—–*/
    #breadcrumbs {
    font-size: 12px; /*—tamanho da fonte do texto—*/
    font: small-caption ;
    color: #FF0000;
    padding:5px;
    font-weight: bold;
    line-height: 1.4em;
    padding-top:10px;
    padding-left:10px;
    background-image: url("URL-DA-IMAGEM");
    background-repeat: no-repeat;
    width:100%;
    height:58px;
    }

  6. Down Wolrd disse:

    muito bom o tutorial, mais tenho uma pergunta;
    tem como adicionar uma imagem no fundo do breadcrumb ?

  7. PadocaGames[ADM] disse:

    UHUUUUUUUUUUUUUUUUUUUUUUUUUUUUULLLLLLLLLLLLL!!! Consegui!!! Agora ficou tudo certinho, só tive bastante trabalho no CSS, pois estava querendo mudar a cor dos links das "LABELS". XD
    Vlw Clau! *0*

  8. PadocaGames[ADM] disse:

    Bem Clau, eu não sei se foi por falta de aviso ou se foi por improbabilidade.. Meu template tem 2 desses:

    Agora eu apliquei no outro.. e FUNCIONOU! *—*
    Muito obrigado!

  9. Talita Ackles disse:

    Não sei o que houve… mas não aparece nada.
    Tenho absoluta certeza de que fiz tudo certinho, da forma que vc falou ai.

  10. Adm RC disse:

    Simplesmente ótimo, tão bem explicado assim só aqui!

  11. Andrea Winchester disse:

    Clau, muito obrigada mesmo!! Era o que eu estava querendo muito colocar no meu blog.

  12. Mariana Garcia disse:

    Clau parabéns pelo blog e pelo artigo realmente muito bom.

    Tenho somente uma dúvida, eu normalmente utilizo muitos marcadores no meu blog e gostaria que aparecessem somente dois niveis (os dois mais utilizados).

    Por exemplo

    Home-> Marcador 1 -> Marcador 2 – Titulo do Post

    Voce sabe se é possível fazer essa configuração?

    Obrigada pela ajuda!

  13. .:: Clau ::. disse:

    ?a?
    Fico feliz q tenha dado certo e mais feliz ainda pelo retorno. 😉

  14. ?a? disse:

    Fiz e deu super certo.
    Adooooro quando acontece isso! rsrs

    Valeu pela dica.
    Dani

  15. mundodadanca1 disse:

    Olá Clau!

    Mais uma vez está muito legal este post. Aos poucos estou me tornando um grande fã seu.
    Com sua ajuda meu blog está cada vez mais profissional.
    Já apliquei a ferramenta, logo mais retornarei aqui para colocar as modificações que preciso. Deixa amadurecer a idéia do que eu quero.

    Abraços
    Roger Dance

  16. Herbert Fernandes disse:

    gostei das dicas, mas acho desnecessário colocar o leia mais no mundo blogger (…) incorporado nas modificações. Me atrapalhei todo para tirar isso. Reconheço seu trabalho, mas fica estranho esse aviso incorporado na nossa template. Mesmo assim, parabéns pelas dicas.

  17. Lucas disse:

    Perfeito!

  18. Lucas Rezende disse:

    Gostaria de mudar a fonte de preto para branco, tem como?

  19. ::Clau:: disse:

    @Kakashi:
    Me desculpe, mas isso que vc está pedindo não tem nada a ver com este tutorial.
    Se quiser informações a respeito desta linha que vc citou, leia este tutorial:
    Configurando a área dos artigos.

  20. Kakashi disse:

    muito obrigado, mais tem mais um problema:

    eu não to conseguindo tirar o "post-header-line-1", é um sublinhado abaixo do sublinhado. como eu tiro ele em css na mesma parte que vc me ajudou (o titulo(#breadcrumbs .post-title{))?

  21. ::Clau:: disse:

    @Kakashi:
    No código do 2º passo, inclua tb este código aqui:

    #breadcrumbs .post-title{
    font-size:130%; /*tamanho da fonte*/
    }

  22. Kakashi disse:

    Como eu mudo o tamanho do titulo do post:

    Você está em: Início » Marcador » "Titulo do post"

  23. ::Clau:: disse:

    @Afonso:
    Olha eu não testei, mas você pode tentar retirar esta parte do código:

    <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>

    Testa e veja se dá certo!

  24. Afonso disse:

    Olá, primeiramente gostaria de te parabenizar por sempre postar dicas excelentes e de facil entendimento, continue sempre esse belo trabalho de ajudar as pessoas que tem dificuldade (meu caso rs) e tb gostaria de saber como faço para que apareça em meu site assim: Voce está em: Início >> "Titulo do Post"?
    Sem os marcadores.

  25. Herzl - www.dotaisfun.com disse:

    vlw mais não é disso que eu estou falando querida, é do modo como seus posts ficam na pagina incial, resumidos e dentro de um "quadro", o que também pode-se ver no templatesparanovoblogger.blogspot.com

  26. ::Clau:: disse:

    @AnneKira™:
    Eu tb acho bem interessante esta ferramenta..facilita bastante. A 1ª vez que vi foi em um blog em inglês..fiquei boba..=)
    Obrigada pelo comentário…volte sempre e sempre viu?;)

  27. AnneKira™ disse:

    Muito legal, eu via os blogs usando mas não sabia exatamente do que se tratava.

    Aliás, seu blog está muito lindo *O*

  28. ::Clau:: disse:

    @Herzl – http://www.dotaisfun.com:
    Eu quem agradeço por ter alertado e fico feliz que agora tenha conseguido!
    Sobre seu pedido, dá uma lida aqui:
    Personalizar Blockquote.

  29. Herzl - www.dotaisfun.com disse:

    um desejo meu e de vários outros amigos e blogueiros, é aprender como "separar em caixinhas" os posts assim como vc faz e tbm o templatesparanovoblogger da ariane, caso um dia possa nos ajudar com isso séria mto bom.

  30. Herzl - www.dotaisfun.com disse:

    muito obrigado por tudo, você foi atenta e dedicada ao seu público, isso é lovavel!

  31. ::Clau:: disse:

    Atenção:
    Código modificado e postagem atualizada.

  32. ::Clau:: disse:

    @Herzl – http://www.dotaisfun.com;
    Realmente, encontrei um erro no código, acho que na hora da digitação. Aguarde que estou verificando aqui e já atualizo o postagem!

  33. ::Clau:: disse:

    @DuDuCP:
    Imagina, eu quem agradeço por participar do blog e enviar sugestões de artigos.

    @Herzl – http://www.dotaisfun.com
    Vc tem certeza que está colando o código no local correto?

  34. Herzl - www.dotaisfun.com disse:

    não estou conseguindo instalar o widget
    esta dando o seguinte erro

    Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    O widget id "Blog1" não pode conter o elemento: "#comment". O widget só pode conter elementos b:includable.

    já refiz várias vezes o processo, e sempre da isso, logo no primeiro passo! obrigado.

  35. DuDuCP disse:

    Obrigado por atender meu pedido!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.