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.
Hoctro avait conçu un breadcrumb pour Blogger qui avait l’handicap de ne s’afficher que sur les pages d’articles. Amanda de Blogger Buster à elle récemment conçu un breadcrumb à même de s’afficher même sur la page d’accueil et sur les pages d’archives. C’est ce dernier que j’aimerais vous partager. Vous pouvez déjà le voir à l’œuvre sur ce site.
Hoctro avait conçu un breadcrumb pour Blogger qui avait l’handicap de ne s’afficher que sur les pages d’articles. Amanda de Blogger Buster à elle récemment conçu un breadcrumb à même de s’afficher même sur la page d’accueil et sur les pages d’archives. C’est ce dernier que j’aimerais vous partager. Vous pouvez déjà le voir à l’œuvre sur ce site.
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>
A+
Bonjour Rodney,
RépondreSupprimerun grand merci pour ton travail.
Au sujet de ce breadcrumb, saurais-tu comment le faire fonctionner dans la section "header-wrapper" ? J'aimerai en effet intégrer cette navigation juste sous mon menu horizontal (là où tu as Accueil, FAQ, Astuces, etc. sur ton site) mais pas moyen de trouver comment faire :/
J'ai posé la question sur le site d'Amanda mais elle est restée sans réponse. Ça n'est peut être pas jouable...
Un grand merci en tout cas pour ce site d'utilité publique :)
@ Yan : Impossible de mettre le breadcrumb ailleurs que dans le widget Blog qui contient les données des articles. le Header wrapper n'en contient pas, le widget sera inutile la-bàs.
RépondreSupprimerMerci Rodney pour ta grande disponibilité.
RépondreSupprimerSi je comprends bien, il est donc impossible d'afficher dans la section "header-wrapper" un breadcrumb qui fasse référence aux données relatives à mes articles qui se trouvent dans un widget Blog,
c'est à dire par exemple, d'afficher "Accueil » Navigation » Afficher un breadcrumb de navigation sur toutes vos pages" lorsque je suis sur ta page "Afficher un breadcrumb de navigation sur toutes vos pages", dans la partie orange de ton site ?
Je rencontre un deuxième problème : le breadcrumb n'affiche qu'un seul label parmi ceux qui sont associés à l'article.
Exemple : j'ai trois labels associés à un article
quand je clique sur label1 par exemple puis sur l'article, le breadcrumb m'affiche "Accueil > label2 > article"
Au lieu de "Accueil > label1 > article" ou "Acueil > label1/label2/label3 > article" (cette dernière solution est toutefois un peu lourde)
Crois-tu qu'il soit possible d'y remédier ?
[PS : désolé pour ce message un peu long, aucun souci si tu ne peux répondre. Voici le site que tes précieux conseils m'ont permis de mettre au point : http://ecoledujudo.blogspot.com/
Amicalement]
@ Yan : il est beau ton site (ou dois-je dire votre : avec la dame).
RépondreSupprimerComme dit ci-haut, impossible que le breadcrumb ne marche s'il ne se trouve pas dans un widget blog.
Toutefois, si tu veux avoir ce que tu désire, il faudra mettre un autre widget blog dans la partie que tu désire et prenant soin d'enlever de ce widget l'essentiel (les codes pour afficher les titres des articles, l'article et le bas de page de l'article). C'est seulement comme ça que tu peux l'avoir dans le headerwrapper.
Si le breadcrumb n'affiche qu'un seul libellé, c'est parce qu'il joue sur une hiérarchie qui va de l'accueil, d'une catégorie et du titre de l'article.
Je ne connais pas comment mettre trois libellés.
Bonjour Rodney,
RépondreSupprimerpour l'histoire des labels affichés par le breadcrumb voilà le schmilblick.
Dans le code développé ci-dessus, le breadcrumb n'affiche qu'un seul label, le dernier (<b:if cond='data:label.isLast == "true"'>).
Donc, si on souhaite afficher tous les labels associés à un article, il suffit de supprimer ce bout de code (et la balise de fermeture qui va avec bien entendu : </b:if>).
On peut réutiliser ce code pour insérer une séparation entre les labels comme une "," ou un "|".
Ce qui peut donner par ex. :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> |</b:if>
</b:loop>
Amicalement
y.
PS : pour pouvoir envoyer mon commentaire, j'ai remplacé les "<" par "<" et les ">" par ">"