Situer ses visiteurs grâce au Breadcrumb

On toujours affirmer que le net est une toile d'araigné. C'est à juste titre que ses composantes (les sites et les blogs) doivent aussi être des mini toiles, où les pages sont liées entre elles et à la page principale. Si les sites arrivent à siteur leur lecteurs sur la page où ils se trouvent par rapport à l'architecture général du site, ceci est souvent difficile pour les blogs.

Heureusement, pour ceux qui utilisent Blogger, Hoctro avait trouvé un moyen pas trop compliqué pour afficher au lecteur à quel endroit du blog il se trouve.

Il lui est d'abord mentionné la page d'accueil, le libellé de l'article qu'il va ou qu'il est entrain de lire puis le titre de ce dernier. Vraiement pratique. Et ce breadcrumb ne s'affiche qu'à la page dédié à l'article et non à la page d'accueil, d'archive ou de libellé.

Bon trève de verbiage, je vous montre comment l'installer sur votre blog . Tout d'abord, connectez vous sur votre compte Blogger, allez sur le modèle de votre blog puis sur modifier le code HTML et là cochez la case pour développer des modèles de gadget (N'oubliez pas de gader une copie de votre blog à replacer en cas de pepin).

1. Placez le code en rouge à l'endroit indiqué :

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Placez le code ici

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>

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

(click droit sur l'image ci-dessous et ouvrir sur un nouvel onglet pour voir à quoi ça ressemble)

voici le code à placer

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. Par Hoctro 9/11/2006 http://hoctro.blogspot.com traduit par Rodney http://blogger-au-bout-du-doigt.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Vous êtes ici:
<a expr:href='data:blog.homepageUrl' rel='tag'>Accueil</a> →
<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'>
→ <b><data:post.title/></b> </b:if> </b:if> </span> </p> </b:if> <!-- Fin du Breadcrums Hack --> </b:includable>

2. Ajoutez cette ligne : <b:include data='post' name='breadcrumbs'/>

Juste avant : <b:if cond='data:post.dateHeader'>. (click droit sur l'image ci-dessous et ouvrir sur un nouvel onglet pour voir à quoi ça ressemble)

</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>

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

<b:loop values='data:posts' var='post'>
<b:include data='post' name='breadcrumbs'/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>

Ajoutez ce code css avant : ]]></b:skin>

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

(click droit sur l'image ci-dessous et ouvrir sur un nouvel onglet pour voir à quoi ça ressemble)

3. Enregistrez votre modèle et allez voir le résultat.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Et n'oubliez pas de donner un point de plus à cet article en cliquant sur le petit bouton rouge .