A carregar...



Pista de Migalhas de Pão / Breadcrumb Trail


Quem não ficou já perdido na nevegação de um site. Especialmente daqueles enormes, com uma grande profundidade hierárquica, com páginas que chamam páginas-filho, páginas-neto, e por aí fora.
OK, não é o caso dos blogs, especialmente do meu, mas mesmo assim vou aqui descrever a técnica que permite atenuar essa sensação de perda, um widget que ajuda a mantermos sempre a visão da situação da página onde nos encontramos e rapidamente (através de um clique) voltarmos um nível (ou mais) acima.
Esse widget tem o nome de "breadcrumb trail" e aparece em muitos sites.



O meu blog tem outro contra em relação à sua eficaz utilização, que é o facto de ter colocado logo no topo da página, sobre o espaço das mensagens, o "menu de abas / tab view", o que faz com que o "breadcrumb trailer" que irei instalar fique abaixo desse menu, impossibilitando a sua visão fácil.
Estão avisados.
Mesmo assim vou instalá-lo por algum tempo, pois como prometi no início deste blog, tentarei, sempre que possível, instalar as dicas que descrevo.
Não é na da difícil:
Passo 1: Instalar a Função de Definição do Widget e a sua Função de Chamada
Edite o Esquema do seu blog >> Editar HTML (veja como e os cuidados a ter)
Marque a caixa "Expandir os Esquemas de Widgets"
Procure (utilize o menu Editar >> Procurar do seu browser):
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
Procure:
<b:includable id='main' var='top'>
que está ali por perto
Imediatamente antes de
<b:includable id='main' var='top'>
Coloque o código seguinte:

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>


A seguir Adicione a linha seguinte (ver ainda imagem anterior):

<b:include data='post' name='breadcrumbs'/>

imediatamente antes da linha
<b:if cond='data:post.dateHeader'>
que se encontra um pouco mais abaixo.
Passo 2: Estilizar com CSS
Imediatamente antes de
]]></b:skin>
Coloque o seguinte código:

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}


para estilizar o seu "breadcrumb trail".
Naturalmente que pode alterar esse estilo a seu gosto.
E é tudo.
Espero que tudo funcione.
Questões nos comentários, p.f.








                         


Mensagens relacionadas (por Tags)







2 Comentárioa


GAMA disse...

Mas so pega na area d apostagem.. eu gostaria de colocar em outros locais do template ...

luisj disse...

Penso que deverá colocar
<b:include data='post' name='breadcrumbs'/>
na zona em que pretende.
Experimente, tomando anteriormente os devidos cuidados com o seu template/código...

Enviar um comentário