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.
<b:if cond='data:blog.homepageUrl != data:blog.url'>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'>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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 == "true"'>
<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 == "archive"'>
<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 == "index"'>
<b:if cond='data:blog.pageName == ""'>
<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>
.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/AVvXsEirZC0trNlcCeYR79eeCkWqgzvMgkNtOe4g5uTHLZjyMDFGrkBE3DEn2npu1JSX5L7UOjTE6nq2yZ3vTq4ok9YdmK5CVkD0VhbmkiB7T0955A08Mc4lO75Ubq3PzGL3d8w9EI7AMB8_Dmka/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/AVvXsEirZC0trNlcCeYR79eeCkWqgzvMgkNtOe4g5uTHLZjyMDFGrkBE3DEn2npu1JSX5L7UOjTE6nq2yZ3vTq4ok9YdmK5CVkD0VhbmkiB7T0955A08Mc4lO75Ubq3PzGL3d8w9EI7AMB8_Dmka/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;
}
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(3) {z-index:28 !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.
.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;}
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.
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.
Ciudad Blogger
Fiz do jeito que você falou mais não apareceu nada. O que faço? Quero que apareca só o último marcador
ResponderExcluirOlá Carlos,
ExcluirNão é problemas nos códigos, pois refiz o tutorial e estão funcionando normalmente.
Certifique se colocou o código da segunda etapa abaixo de:
<div class='blog-posts hfeed'>, este se encontra logo abaixo de <b:includable id='main' var='top'>.
Abraços
Cara agora deu certo, só que está aparecendo tipo um pedaço da imagem do breadcrumb no rodapé do blog, tem como remover este erro?! Ajuda ai por favor.
ResponderExcluirOi Carlos,
ExcluirQue bom que deu certo.
Para resolver esse problema troque todos os <span itemprop='title'> do código da 2ª etapa por <span1 itemprop='title'> e no CSS altere o .first span por .first span1.
Isso resolverá problema.
Abraços
Gosto muito deste bloggermin!
ResponderExcluirO visual e conteudo
merece nota milssssssss!
:)