19 mars 2012

Ajouter Un Fil D'ariane à Votre Blog Blogger

Breadcrumb Fil D ariane
Le breadcrumb (traduction: miette de pain) est le terme anglais pour désigner le fil d'Ariane. Cela fait référence à un élément de navigation sur les sites web. Cet élément indique à l'utilisateur où il se situe dans la hiérarchie du site, par rapport à la page d'accueil. A titre d'exemple, le breadcrumb pourrait indiquer à l'utilisateur dans quel catégorie il se situe, dans quelle sous-catégorie et sur quelle page de cette sous-catégorie.
Voici un exemple :
Accueil >> Tutoriel Blogger >> Ajouter un fil d'ariane à Blogger

Nous allons voir dans ce tutoriel comment ajouter un breadcrumb/Fil d'Ariane à Blogger Blog.

Ajouter Un Fil D'Ariane à Blogger

Vous savez maintenant ce qu'est un fil d'Ariane, suivez les étapes suivantes pour l'ajouter à votre blog blogger :

1. Allez à "Présentation" > " Modifier le code HTML" > Cochez la case " Développer des modèles de gadgets"

2. Recherchez (avec CTRL+F) la ligne suivante dans votre modèle
<b:include data='top' name='status-message'/>
Et juste avant collez le code suivant
<b:include data='posts' name='breadcrumb'/>

3. Maintenant recherchez la ligne suivante
<b:includable id='main' var='top'>
Si vous trouvez deux occurrences, placez-vous sur la deuxième et juste avant elle ajoutez le code suivant
<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>
Ce code affichera uniquement le dernier libellé d'article dans le fil d'Ariane. Si vous souhaitez afficher tous les libellés, alors vous devrez supprimer les 2 lignes en bleu.

4. Enregistrer votre modèle.
)
5. Si vous souhaitez réduire la taille du fil d'Ariane, ajoutez le code CSS suivant à votre modèle ( juste avant la balise ]]></b:skin> )
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

4 commentaires:

  1. Génial, depuis le temps que je cherchais comment procéder!
    merci merci merci

    RépondreSupprimer
  2. Bonjour,

    Chez moi ça ne marche pas.
    Voici le message d'erreur:

    Message d'erreur XML : The element type "b:widget" must be terminated by the matching end-tag "".Error 500

    Merci

    RépondreSupprimer
  3. Bonjour,
    Vérifier la sélection des codes et n'oublie pas de faire défiler la zone de texte dans l'étape 3.

    RépondreSupprimer
  4. Bonjour, merci beaucoup pour cette explication, est-ce qu'il est possible de changer le premier mot dans le fil d'ariane, pour ma part, j'ai "Home" mais j'aimerais mettre "Accueil"

    RépondreSupprimer