Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Como Instalar Ferramenta do Breadcrumb no seu Blog

Phablo Projetos

Instalar a ferramenta Breadcrumb no Blog ou site, é uma das melhores formas para familiarizar seu Blog nas buscas, porque essa ferramenta segmenta todo percusso feito entre paginas do seu Blog ou site, além de ser uma configuração SEO, conhecida como migalha de pão popularmente, ou até mesmo links de categorias. Mas não deixe de usar, isso é muito importante para seu Blog ou Site.

Mas não posso deixar de ser sincero eu conheci essa ferramente através do Ebook Otimização de sites para Mecanismos de Pesquisa (SEO) - Guia do Google para Iniciantes -, logo percebi que seria um ótimo post aqui no Phablo Projetos.

Phablo Projetos


Como na imagem acima pode-se ver o breadcrumb, mas vamos logo aos passos desse Tutorial, primeiro faça o Backup do seu Template, logo depois vá ao seu Blogger, Modelo, Editar HTML, Expandir modelo e procure por:

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


Substitua o Código por esse:

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

Visualize e se nada acontecer salve.


Agora vamos mudar a aparência do Breadcrumb através de CSS, com essa funcionalidade você pode mudar as cores através de uma tabela de cores, então vamos ao passo abaixo, procure por ]]></b:skin> e acima dela cole este código:

/*-----Breadcrumbs-----*/ #breadcrumbs { font-size: 13px; /*TAMANHO DO TEXTO*/ padding:5px; font-weight: bold; line-height: 1.4em; } #breadcrumbs a:link { font-weight: bold; color: #F00;  /*COR DO LINK*/ } #breadcrumb a:hover{ font-weight: bold; text-decoration:underline; color: #00F;  /*COR DO LINK QUANDO O MOUSE ESTÁ EM CIMA*/ } #breadcrumb a:visited { font-weight: bold; color: #666;  /*COR DO LINK JÁ VISITADO*/  }


Pronto como indicado acima nas tags /* você pode ver entender o que será  mudado, entre na tabela de cores e mude os códigos que começam com #, depois visualize e salve.
ADM: Gostou? Então comenta, não se esquece de curti e seguir nosso Blog.

Gostou? Compartilhe:

Um comentário:

  1. Gostei muito, eu estava procurando há um tempão como fazer isso e você foi demais! Parabéns

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube