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 == "item"'><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'>»<a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'/> </b:loop>» <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 == "archive"'> <div class='breadcrumbs'>Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » 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> » 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-----*/ |
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)
Nenhum comentário: