Breadcrumbs para o Blogger

Como instalar Breadcrumbs no 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ã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.

breadcrumbs


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('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/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('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/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.

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Breadcrumbs para o Blogger
Breadcrumbs para o Blogger
Como instalar Breadcrumbs no Blogger
http://4.bp.blogspot.com/-M1pWnqcb2sM/UE1eZKqrFwI/AAAAAAAAAnU/H7qlSwfm-Kg/s1600/breadcrumbs.png
http://4.bp.blogspot.com/-M1pWnqcb2sM/UE1eZKqrFwI/AAAAAAAAAnU/H7qlSwfm-Kg/s72-c/breadcrumbs.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/09/breadcrumbs-para-blogger.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/09/breadcrumbs-para-blogger.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar