Breadcrumb no Blogger

Descrição: Essa dica é muito boa mesmo
Nossa Avaliação Do Conteúdo:
Screen:

Está ferramenta você já deve ter visto em vários sites, ele consiste em exibir o caminho feito pelo leitor desde o ínicio do blog e assim auxiliando o leitor a encontrar ou se localizar no blog. Aqui no blog possui está ferramenta clique no título do post para ver ela em funcionamento. Está função deixa o template mais bonito e atraente, vamos ver abaixo como aplica-la ao seu:

Instalando

1.Acesse o painel do Blogger (blogger.com)

2.Vá em "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"


3.Procure pelo código abaixo "Utilize as teclas Ctrl e F":

<b:includable id='main' var='top'>

4.Substitua o código anterior pelo seguinte:

<b:includable id='breadcrumb' var='posts'>

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

<!-- Sem breadcrumb na página inicial -->

<b:else/>

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


<!-- breadcrumb para a página do post -->

<p class='breadcrumbs'>

Você está em: <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'>&#187;

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


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

</b:loop>

<b:else/>

&#187;Sem Marcador

</b:if>

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


</b:loop>

</p>

<b:else/>

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

<!-- breadcrumb para o arquivo e página de buscas.. -->

<p class='breadcrumbs'>

Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>


</p>

<b:else/>

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

<p class='breadcrumbs'>

Você está em: <b:if cond='data:blog.pageName == &quot;&quot;'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Todos os Posts


<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>

</b:if>

</p>

</b:if>


</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

5.Procure pelo código abaixo:

<b:include data='top' name='status-message'/>

6.Substitua-a o código acima por:


<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

Inserindo a CSS

1.Procure pelo código abaixo:

]]></b:skin>

2.Antes do código acima adicione:

/*-----Breadcrumbs-----*/


.breadcrumbs {

font-size: 14px;

padding:5px;

font-weight: bold;

border-bottom:3px double #BEBEBE;

line-height: 1.4em;

}

.breadcrumbs a {

font-weight: bold;


color:red;

}

3.Salve as alterações e visualize.

Dica

Para remover aquela mensagem que aparece ao procurar no blog, ou clicar em um marcador é facil basta remover este código no seu template "É necessário marcar a caixa Expandir Modelos de Widgets":

<b:include data='top' name='status-message'/>