Afficher un breadcrumb de navigation sur BLogger

Afficher un breadcrumb de navigation sur BLogger

Un breadcrumb est un système de navigation qui indique au lecteur sur quel page du site il se trouve par rapport au plan global de celui-ci (voir image). Sur Blogger, les libellés nous permettent de catégoriser nos articles, ce qui permet d’avoir une hiérarchie du blog par rapport à l’accueil, en plus des pages d’archives.
 

Pour l’avoir sur votre blog, il vous faut :

1. Vous connecter à votre compte, sur “ Mise en page ” pour le blog dans lequel l’insérer puis sur “ Modifier le code Html ” et cochez sur modifier le code html

2. Trouvez le code suivant :

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

3. Remplacez-le par celui-ci :

<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Bienvenu sur <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Vous êtes ici : <a expr:href='data:blog.homepageUrl' rel='tag'>Accueil</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>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>


</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Vous êtes ici : <a expr:href='data:blog.homepageUrl'>Accueil</a> » Archives pour <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div><!-- end places -->

Si vous aviez utilisé l’astuce pour effacer le message de la page libellé, vous ne trouverez pas le code de l’étape 2 sur votre blog.

Il vous faut plutôt mettre le code de l’étape 3 avant celui-ci :

souvent avant :

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>

source