Como adicionar navegação Breadcrumbs no seu Blogger

Muito utilizado para SEO, o Breadcrumbs é um dos Widgets mais procurados pelos criadores de Blog. Veja neste tutorial como instalar no seu Blogspot

Leia também:

Como adicionar navegação Breadcrumbs no seu Blogger

Breadcrumbs ou breadcrumb é usada para navegação do usuário, normalmente aparece horizontalmente na parte superior de uma página da web, após a navegação, geralmente abaixo das barras de título ou cabeçalhos na área do blog.

É bastante usado para adicionar a trilha da postagem desde a página inicial. Isso ajuda as pessoas a saberem facilmente sobre o seu post e também ajuda você no propósito de SEO

Por exemplo:

Página Inicial > Página > Sub Página 


Veja como adicionar navegação Breadcrumbs no seu template Blogspot

1.Primeiro: Procure pelo código:
<b:include data='top' name='status-message'/> 

2.Segundo: Agora substitua este código acima, por este código abaixo:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

3.Terceiro: Procure pelo código:
<b:includable id='main' var='top'>

4. Quarto: Agora substitua este código acima, por este código abaixo:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Como personalizar Breadcrumbs com CSS

1.Primeiro: Procure pelo código
]]></b:skin>

2.Segundo: Agora, logo acima, cole o código abaixo:
/* Breadcrumbs Css info @ https://escolaparablog.blogspot.com */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;}
.breadcrumbs :hover{
border-bottom:2px dashed #e6e4e3;
background:#f1f1f1;
}

Se você estiver usando vários marcadores em uma postagem, o código Breadcrumbs acima mostrará apenas o último marcador adicionado, 
 

Como mostrar todos os marcadores na navegação Breadcrumbs do seu Template

Se você quer que mostre todos os marcadores, basta usar este código abaixo no lugar do código do 4.Quarto paço.
 
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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'>
 »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == "true"'></b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Nenhum comentário:

Postar um comentário