Cursos 24 Horas - Cursos 100% Online com Certificado

Breadcrumb no Blogger - Exibir o Caminho feito pelo Leitor desde a Home

9 Comentários Autor : Notícia e blog 01 dezembro 2009


Está ferramenta você já deve ter visto em vários sites, ele consiste em exibir o caminho feito pelo leitor desde o ínicio do blog e assim auxiliando o leitor a encontrar ou se localizar no blog. Aqui no blog possui está ferramenta clique no título do post para ver ela em funcionamento. Está função deixa o template mais bonito e atraente, vamos ver abaixo como aplica-la ao seu:

Instalando

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Procure pelo código abaixo "Utilize as teclas Ctrl e F":
<b:includable id='main' var='top'>
4.Substitua o código anterior pelo seguinte:
<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'>

5.Procure pelo código abaixo:
<b:include data='top' name='status-message'/>
6.Substitua-a o código acima por:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>


Inserindo a CSS

1.Procure pelo código abaixo:
]]></b:skin>
2.Antes do código aceima adicione:
/*-----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;
}

3.Salve as alterações e visualize.

Dica



Para remover aquela mensagem que aparece ao procurar no blog, ou clicar em um marcador é facil basta remover este código no seu template "É necessário marcar a caixa Expandir Modelos de Widgets":
<b:include data='top' name='status-message'/>

Referência:Beautiful Beta,Templates para Você,Blogger'SPhera

    9 Comentários

    ADRIANO VENTURA disse...
    13 de dezembro de 2009 04:12 #
    ALCB disse...
    21 de janeiro de 2010 21:55 #

    Muito bom , facilita para o visitante achar principalmente a HOME (página inicial).

    Adrimar disse...
    13 de março de 2010 23:24 #

    Não funciona com as páginas estáticas. Mas gostei da dica.

    Jc Denton disse...
    5 de junho de 2010 20:30 #

    Eu só precisava do código para retirar aquela mensagem chata que aparece no marcador e quando eu tiro os posts da home, vou usar isso no meu novo projeto: http://jogos.jethot.com.br

    Mauricio Lima disse...
    23 de dezembro de 2010 11:48 #
    Este comentário foi removido pelo autor.
    Mauricio Lima disse...
    23 de dezembro de 2010 11:49 #

    Apenas marcano pois escrevi errado, ferramente exelente. (y)

    Victor disse...
    4 de maio de 2011 14:38 #

    ALELUIA achei! ótimo post, muito bem feito, estava procurando isso a muito tempo! =D

    Lucas Felix disse...
    6 de agosto de 2012 11:04 #

    Ajudou bastante! Vlw :)

    Carlos Eduardo disse...
    4 de junho de 2013 07:46 #

    Eu já havia pensado em remover essa mensagem que aparece ao clicar um marcador e agora navegando pelo seu blog encontrei por acaso

    obrigado por compartilhar esse artigo.
    parabens

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.