Breadcrumbs para o Blogger

Breadcrumbs são elementos de navegação usados ​​para exibir a profundidade na qual um usuário está atualmente em um site. Normalmente, estã...

Breadcrumbs são elementos de navegação usados ​​para exibir a profundidade na qual um usuário está atualmente em um site. Normalmente, estão presentes na parte superior de preferência logo acima do título do post ou do título de uma página.

No Blogger não existem reais sub-diretórios para que você possa mostrar um caminho hierárquico, então vamos usar os marcadores como solução.

Também vamos discutir como exibir um único ou vários marcadores no Breadcrumbs e como fazê-los aparecer nos resultados de pesquisa do Google utilizando Microdatas.

DEMONSTRAÇÃO

Guia Passo a Passo

1. Vá em modelo > Editar HTML e marque a opção Expandir modelos de widgets

2. Agora, procure por <div class='blog-posts hfeed'>e abaixo dele adicione o seguinte código

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
</b:if>
</b:loop>
</div>
<b:else/>
<div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a href='#'><span> Sem marcador</span></a>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'><span>Arquivos para <data:blog.pageName/></span></a>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'><span itemprop='title'>Artigos arquivado em <data:blog.pageName/></span></a>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>

Você pode encontrar várias instâncias do termo a ser pesquisado, adicione o código apenas abaixo, onde você possa ver esse código --> <b:includable id='main' var='top'>

3. Agora, procure por ]]></b:skin> e logo acima adicione o seguinte CSS.

.breadcrumbs {
list-style: none;
margin: 0;
}
.breadcrumbs a {
color: #666;
display: inline-block;
font-size: 12px;
margin-left: -15px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
vertical-align: top;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ejs98aGSzyTExECfrw5QCJaLnjV7LtRHEGDiicSQCmaPBqh-mf2mZJyDA98LLqQKFZroHLHL6HZDvKZnnnRBmtqYF_Fo1RPyv6n1jOs39gVY-hoqClgv66TAk_Snc2kA5SWVgP-mEHGy/s1600/hc_yarnlett_global.png');
background-repeat: no-repeat;
background-position: 100% 0;
z-index: 1;
}
.breadcrumbs a:hover {
background-position: 100% -48px;
color: #333;
}
.first , .first:hover {z-index: 30 !important;}
.first span {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ejs98aGSzyTExECfrw5QCJaLnjV7LtRHEGDiicSQCmaPBqh-mf2mZJyDA98LLqQKFZroHLHL6HZDvKZnnnRBmtqYF_Fo1RPyv6n1jOs39gVY-hoqClgv66TAk_Snc2kA5SWVgP-mEHGy/s1600/hc_yarnlett_global.png');
margin-left: -26px;
padding: 7px 6px 11px 10px;
z-index: 12 !important;}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
background-position: 0 -48px;
color: #333;
}

4. Salve seu modelo e agora os Breadcrumbs vão começar a aparecer em suas páginas de artigo, de marcadores, de arquivos, bem como nas páginas estáticas.

Algumas opções

Mostrar um ou vários marcadores

O código acima mostra apenas o último marcador atribuído ao post como trilha. Se você quer mostrar todos no Breadcrumbs, então remova as linhas destacadas, em negrito, na etapa 2 e acrescente o seguinte CSS abaixo de .breadcrumbs a:nth-child(2) {z-index:29 !important;} na etapa 3.

.breadcrumbs a:nth-child(3) {z-index:28 !important;}
.breadcrumbs a:nth-child(4) {z-index:27 !important;}
.breadcrumbs a:nth-child(5) {z-index:26 !important;}
.breadcrumbs a:nth-child(6) {z-index:25 !important;}
.breadcrumbs a:nth-child(7) {z-index:24 !important;}
.breadcrumbs a:nth-child(8) {z-index:23 !important;}
.breadcrumbs a:nth-child(9) {z-index:22 !important;}
.breadcrumbs a:nth-child(10) {z-index:21 !important;}
.breadcrumbs a:nth-child(11) {z-index:20 !important;}
.breadcrumbs a:nth-child(12) {z-index:19 !important;}
.breadcrumbs a:nth-child(13) {z-index:18 !important;}

Na minha experiência, mostrar vários marcadores em Breadcrumbs custa a autoria no Google Search. Então, sugiro usar somente um marcador. Se quiser usar vários, então sugiro que remova a especificação de microdatas para que não haja nenhum risco envolvido. Em tudo, eu não quero que perca sua autoria Google (Google Authorship). Farei um post detalhado sobre isso em breve.

O que é o responsável por fazê-los aparecer no Google?

Isto é devido à especificação Microdatas usada ​​no código. Ele usa simples tags HTML e atributos para atribuir nomes descritivos para itens e propriedades. Google entende, interpreta-os e mostrá-os nos resultados da pesquisa.

Design

O design que usa este widget é o design usado atualmente pelo Google Suporte. É simples e estética. Estarei compartilhando alguns designs de Breadcrumbs nos próximos dias.

Caso haja algum problema durante a aplicação ou utilização, sinta-se livre para perguntar nos comentários.