Mapa de navegação de páginas no Blogger

Mapa de navegação de páginas no Blogger

Um site ou blog que oferece facilidade para navegação aos seus visitantes traz um diferencial importantíssimo para seu desenvoilvimento. Hoje apresentaremos um tutorial que os ensinará a colocar em seus blogs o "famoso"Breadcrumb (migalhas do caminho). Este recurso é muito interessante pois a cada página visitada seu leitor será guiado com a informação das páginas que passou para chegar até a atual.

Recém implantado aqui no Tutorial Para Tudo, esta ferramenta traz resultados praticamente imediatos no tempo de permanência e número de páginas visitadas. Uma boa forma do visitante voltar à páginas anteriores sem ter que percorrer todo o caminho de novamente. Antes de começarmos o tutorial recomendo veementemente que façam um backup do modelo atual de seu blog. Isto é sempre recomendável antes da aplicação de qualquer nova  ferramente, mesmo em caso como aqui em que testamos realmente todos os tutoriais antes. Vejam abaixo como é simples implantar esta ferramenta sensacional:

INSTALANDO O MAPA DE NAVEGAÇÃO:

PRIMEIRO PASSO - Abra o painel do Blogger e clique no menu “Layout” >> “Editar HTML” marcando em seguida a opção “Expandir modelos de widgets” para que apareça completamente o código-fonte de seu blog, como abaixo:

Expandindo o Html do blog

SEGUNDO PASSO - Procure pela seguinte linha no Html do blog (dica: aperte Ctrl + F para procurar):

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

TERCEIRO PASSO - Cole o trecho seguinte imediatamente abaixo dela:

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

QUARTO PASSO - Agora faça uma nova busca e encontre esta linha:

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

QUINTO PASSO - Logo acima desta cole este outro trecho, sem nenhuma modificação:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>
<span class='post-labels'>
Você está aqui: <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'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='post-labels'>
Você está aqui: <a expr:href='data:blog.homepageUrl'>Home</a> » Arquivos de <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
Você está aqui: <a expr:href='data:blog.homepageUrl'>Home</a> » Todos os artigos
<b:else/>
Você está aqui: <a expr:href='data:blog.homepageUrl'>Home</a> » Artigos do Marcador <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

SEXTO PASSO - Novamente faremos uma busca no Html, procure desta vez por esta linha:

]]></b:skin>

SÉTIMO PASSO -  Imediatamente acima dela cole o trecho:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

OITAVO PASSO - Agora salve o modelo do seu blog e veja como ficou. Para verificar o resultado navegue pelos marcadores e pelos artigos e veja o guia aparecendo no topo dos artigos. Lembrem-se que na página inicial nada será modificado.

É isto aí meus caros, está pronto e posso garantir a vocês que é um recurso muito bacana e de uso mais que recomendado.