Afficher des icônes à côté des titres pour différencier les articles par catégories (libellés)

By
Advertisement

icones photos du libellé à côté du titre de l'article
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 :

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 == &quot;NOM_DU_LIBELLE_1&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_2&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_3&quot;'>

<span class="icocat"><img src="http://urldelimage.com/image.jpg" alt="description"/></span>
</b:if>
<b:if cond='data:label.name == &quot;NOM_DU_LIBELLE_4&quot;'>

<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 == &quot;NOM_DU_LIBELLE&quot;'>
<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".

@+


4 commentaires:

  1. Salut et merci pour toutes ces astuces !!

    Voici mon problème pour celle-ci:

    alt="description" se mets avant "http://urldelimage.com/image.jpg", après enregistrement

    ...faut-il mettre autre chose que "description" ??

    Merci !!

    RépondreSupprimer
  2. @ Jabamiah : Cela ne pose pas de problème. c'est blogger qui met alt="description" avant l'url du blog. Ne t'en fais pas.

    RépondreSupprimer
  3. Bonjour Rodney et merci de l'astuce qui fonctionne très bien, j'ai juste un problème d'alignement quand il y a deux icones l'une à coté de l'autre (dans mon cas un drapeau et un logo). Ils ne sont pas alignés par le milieu... Peux tu aider stp ? merci d'avance super héros et merci de tous ces bons conseils de la part d'un internaute de France !

    RépondreSupprimer
  4. Bonjour Rodney ! Cette astuce j'en rêve depuis des années... mais elle ne fonctionne pas, je ne comprends pas, aucune image ne s'affiche. Pour l'image est bonne...

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT