Si vous vous rendez sur le blog Marketing.fr vous remarquerez que certains articles ont une icône semblable à côté de leurs titres. Il semble que ces icônes servent à différencier les articles des différentes catégories présentes sur le blog.
Quand on sait que l'intérêt de chaque lecteur varie selon la catégorie d'articles pour lesquels il visite le blog, afficher ce petit panneau de signalisation est d'une grande efficacité car il diminuerait le risque qu'un lecteur rate des articles d'une catégorie prisé par lui (vu qu'il sensé de croire qu'on ne lit pas tous les articles de votre blog).
Comme sur Blogger les libellés font office des catégories, il est possible d'afficher une icône propre à chaque libellé à côté du titre de l'article. Voici la démarche à suivre :
Quand on sait que l'intérêt de chaque lecteur varie selon la catégorie d'articles pour lesquels il visite le blog, afficher ce petit panneau de signalisation est d'une grande efficacité car il diminuerait le risque qu'un lecteur rate des articles d'une catégorie prisé par lui (vu qu'il sensé de croire qu'on ne lit pas tous les articles de votre blog).
Comme sur Blogger les libellés font office des catégories, il est possible d'afficher une icône propre à chaque libellé à côté du titre de l'article. Voici la démarche à suivre :
1. Se connecter à votre compte Blogger, puis aller sur "Mise en page", "Modifier le code html" et là cochez la case pour "Développer des modèles de gadget".
2. Trouvez la ligne de code suivante :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
3. Juste avant la ligne en rouge, mettez le code suivant
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "NOM_DU_LIBELLE_1"'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == "NOM_DU_LIBELLE_2"'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == "NOM_DU_LIBELLE_3"'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == "NOM_DU_LIBELLE_4"'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
</b:loop>
Pour ajouter d'autres libellés, il suffit de mettre une ligne de ce genre juste avant le </b:loop>
<b:if cond='data:label.name == "NOM_DU_LIBELLE"'>
<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
L’idéal pour la taille des images, seraient qu’elles varient entre 30x30 pixels ou 50x50 pixels.
4. Juste avant ]]</b:skin> ajouter cette ligne :
.icocat img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}
Enregistrez votre modèle et allez admirer le résultat.
Une astuce inspirée par Blogger Stop et l'article "Photo de l'auteur à côté du titre de l'article sur un blog tenu en équipe".
@+
