quarta-feira, 7 de dezembro de 2011

Menu de Navegação (Breadcrumb) para Blogger

Breadcrumb é uma ferramenta que mostra ao usuário o caminho percorrido, que por ser da página inicial até a categoria ou postagem. Ele também é bom para os motores de busca ajudando na indexação. Na minha opinião essa ferramenta é indispensável para sites/blogs. Vamos lá!

Para a instalação é necessário editar o HTML, portanto é recomendado que você faça o Backup antes de fazer a instalação. Já fez? Então vamos lá.

1 - Vá em blogger.com > Modelo > editar HTML (Esse tutorial é foi feito com o Novo Painel do Blogger, se não conhece, leia isso)

Marque a caixa “Expandir modelos de widgets”

2- Depois procure por:

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

Se aparecer 2 códigos igual a esse (que foi o meu caso) substitua apenas o 2º.

3 - Encontrou? Então Substitua pelo seguinte código:

<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'><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'><a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/> </div> </b:if> <b:else/> <b:if cond='data:navMessage'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Home</a> &#187; Categorias: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a></div> </b:if> </b:if> </div>

OBS: As partes em no html vermelho pode editar!

4 - Esse passo é opcional, porém é recomendado, que é adicionar o CSS. Vá em Modelo > editar HTML e adicione o código abaixo:

.breadcrumbs { font-family: Arial; /* Fonte */
font-size: 12px; /* Tamanho da Fonte */
border-bottom:3px double #fffff; /* Cor e tipo da Borda */
.breadcrumbs a:link{color:#003300;} /* Cor dos Links */
.breadcrumbs a:visited{color:#999;} /* Cor dos Links visitados */
.breadcrumbs a:hover {color: #000099;} /* Cor ao passar o mouse */
.breadcrumbs a:active {color: #00ccff;} /* Cor ao clicar */
padding:5px; /* Medidas */
font-weight: bold; /* Formatação do Texto */
line-height: 1.4em;}

Acabou! Salve tudo e Pronto!

Este artigo foi escrito por Neto Barros do Baixe Correto, excluído em 22/11/2011.

Fique Sabendo!

é pernambucano, e é estudante e blogueiro nas horas vagas. Gosta de estudar, ler livros, assistir a bons filmes e séries. Na internet gosta de ler notícias interessantes, tecnologia e TV. Também escreve no Mundo Geek.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.