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 == "item"'>
<!-- 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'>»
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == "true"'/>
</b:loop>
<b:else/>
»Sem Marcador
</b:if>
»<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> » Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » 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 aceima 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'/>Referência:Beautiful Beta,Templates para Você,Blogger'SPhera



7 Comentários
mais tarde
Muito bom , facilita para o visitante achar principalmente a HOME (página inicial).
Não funciona com as páginas estáticas. Mas gostei da dica.
Eu só precisava do código para retirar aquela mensagem chata que aparece no marcador e quando eu tiro os posts da home, vou usar isso no meu novo projeto: http://jogos.jethot.com.br
Apenas marcano pois escrevi errado, ferramente exelente. (y)
ALELUIA achei! ótimo post, muito bem feito, estava procurando isso a muito tempo! =D
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.