Instalar Breadcrumb no Blogger

Breadcrumb é uma ferramenta que serve para mostrar o 'caminho' da postagem do seu blog. Esse 'caminho' é composto por links - que vão desde o link da página inicial, marcadores e o título do artigo. Com essa ferramenta o visitante pode navegar facilmente por outras páginas do seu blog.

 

Além do visitante navegar mais facilmente pelas páginas do seu blog, pode ajudar um pouco os sites de busca a posicionar melhor seus artigos. Vejamos um exemplo de Breadcrumb.

Início » Retirar/Ocultar » Remover 'Assinar: Postagens (Atom)'

 

Para separar um link do outro no Breadcrumb, é necessário usar algum símbolo (», >>, -, | ou barras - por exemplo). É muito fácil instalar essa ferramenta ou hack como falam no mundo da Blogosfera. Vamos instalar então?

Siga o Tutorial Passo a Passo

• Clique em Modelo;
• Editar HTML;
• Copie o código abaixo. Agora, clique no código de fonte do seu blog. Agora aperte CTRL + F, cole e de enter.

 

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

 

• Ao achar o código acima,  SUBSTITUA  ele por esse código abaixo.

 

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

 

• Não altere o código pois pode ser que não funcione se for alterado algum trecho. Agora, clique em Salvar modelo.

 

Incrementando estilo no Breadcrumbs (isso é opcional).

Caso você achou que a fonte e a cor do  Breadcrumb não estão adequados ao design do seu blog, com esse procedimento é possível fazer algumas modificações no hack instalado. Lembrando que é opcional, só faça se você quiser realmente.

 

• Clique em Modelo;

• Editar HTML;
•  Copie o código abaixo. Agora, clique no código de fonte do seu blog. Agora aperte CTRL + F, cole e de enter.

 

]]></b:skin>

 

• Cole esse código ACIMA do anterior e clique em  Salvar modelo.

 

/*-----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---*/ }

 

Os trechos em vermelhos tem a descrição do que pode ser alterado no Breadcrumb. No caso, pode alterar a fonte (aumentar ou diminuir), a cor do link, a cor do link quando ele é visitado e quando passa o mause em cima do link pode alterar também.

 

Conclusão

Não é difícil instalar essa ferramenta no seu blog. O Breadcrumb aparece logo acima do título do seus artigos e é automático, ou seja, não precisar colocar o código manualmente em cada artigo.

Qualquer dúvida, deixe um comentário que iremos tentar sanar suas dúvidas.

 

(Fonte: http://www.mundoblogger.com.br/2010/03/instalar-ferramenta-breadcrumb-no-blog.html)