23 dezembro 2008

BreadCrumb Navigation no Blogger/blogspot


Este hack pode ser bastante útil para que assim que seus visitantes cheguem ao seu blog por meio de mecanismos de busca saibam exatamente onde estão, como mostra a imagem acima.

Mas e agora como eu faço isso, é fácil é só seguir os passos abaixo:

1. Acesse o Blogger com o seu ID
2. Clique em Layout
3. Clique na aba Editar HTML
4. Clique em Baixar modelo completo e sempre faça um backup, caso algo não fique certo
5. E agora em Expandir modelos de widgets
6. Encontre o código ]]></b:skin>
7. Copie e cole o código a seguir exatamente acima do código ]]></b:skin>


.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}


8. Agora localize esse por este trecho do código:
<div class='post hentry uncustomized-post-template'>

9. Em seguida cole todo o código abaixo da linha citada acima:


<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>



Browse &#187; <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'>


<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;


<a expr:href='data:label.url' rel='tag'><data:label.name/></a>


</b:if>

&#187;
<span><data:post.title/></span>



</b:loop>

</b:if>

</b:loop>



</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a>
&#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>




10. Clique em Visualizar, se estiver tudo certo salve.

NOTA: O BreadCrumb Navigation só aparece na página do post.

UPDATE 24/12: Encontrei essa segunda opção no Blogger´Sphera, confira clicando aqui. Muito legal!

0 Comentários:

Postar um comentário

Bem-vindos(as)!!
- Os comentários são moderados;
- Spam não é publicado;
- Dúvidas? Mande-nos um e-mail clicando aqui.

Obrigado pela visita!