.jpg) |
| Breadcrumbs (Navegação Estrutural) |
Boas pessoal, bem vindos a mais um tutorial do Uncomplicated Works e hoje irei ensinar como adicionar Breadcrumbs ao Blog. Muitos de vocês devem estar perguntando o que é Breadcrumb e para que serve?
Segundo o Wikipédia Breadcrumb é uma Navegação Estrutural, literalmente navegação por migalhas de pão, é uma técnica usada em interfaces de usuário para proporcionar-lhes um meio de localização dentro da estrutura de programas ou documentos, ou seja, ele informa os leitores em que página realmente se encontram no blog. Assim, os leitores podem navegar pelo seu blog apenas clicando em um link.
1º Passo: Template > Editar HTML e procuramos por:
<b:include data='top' name='status-message'/>
E, imediatamente acima adicionamos:
<b:include data='posts' name='breadcrumb'/>
2º Passo: procuramos por:
<b:includable id='main' var='top'>
E, imediatamente acima adicionamos:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
3º Passo: procuramos por:
]]></b:skin>
E, imediatamente acima adicionamos:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Espero que tenham gostado do tutorial, como adicionar Breadcrumb ao blog e que vos tenha sido útil!
