Un tuto de Gee Mee le magnifique ! A lire la note originale ici !

Donnez quelques informations aux visiteurs de votre blog qui s'apprêtent à suivre vos liens.

Parmi tous les trucs qui m'énervent, il y a le fil rouge des fromages fondus du bovin souriant, et l'huile des sardines en boîte bien sûr, mais aussi les cases de formulaire inutiles. Quand vous créer une liste de liens avec le module Hautetfort, et que vous faites une description appliquée, aussi pertinente que concise... Elle ne sert à rien. Elle est dans le formulaire, vous retrouvez la description dans le module d'administration, mais pas moyen d'afficher sur la partie publique du blog. Ou alors, et c'est possible, je ne comprend rien à rien.

Je vous propose de rendre cette description disponible dans une infobulle, cette zone qui s'affiche au survol d'un lien hypertexte. C'est déjà en place pour la liste de liens « Échangeur ».

Le code d'origine est le suivant :
{bloglist folder="echangeur" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}<div class="box-decorator1"><div class="box-decorator2"><div class="box-decorator3"><div class="decorator1"><div class="decorator2"><h2>{literal}Échangeur{/literal}</h2></div></div>
<div class="boxcontent-decorator1"><div class="boxcontent-decorator2"><div class="boxcontent-decorator3"><ul>{/if}{if $listitem.list_link_item_rss}<li class="link"><a href="{$listitem.list_link_item_rss}"><img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>&nbsp;&nbsp;{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}</li>{else}<li>{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}</li>{/if}{if $listitem.last}</ul></div></div></div></div></div></div>{/if}
{/bloglist}

Dans l'ordre, on retrouve notamment :
bloglist folder="echangeur" le nom du dossier,
sort="list_item_name ASC" le critère de tri (ici l'ordre alpha ascendant sur le nom du lien).
{literal}Échangeur{/literal} le nom qui va réellement s'afficher.
{if $listitem.list_link_item_rss} étant la vérification de l'existence d'un flux RSS. Cela signifie : si cette zone est renseignée dans la base pour ce lien, dans ce dossier, alors on affiche l'image orange RSS qui pointe vers le flux.
{else} alternative à la condition précédente, on affiche le nom du lien qui point vers le site.
{/if} fin de la boucle. C'est un mécanisme assez simple, que vous pouvez retrouver dans une formule de tableur "Si alors / Sinon". Autrement dit "If then / Else".

Pour que l'image du flux RSS ne décale pas l'affichage des liens, je la passe à la fin du texte, c'est mon côté maniaque discutable.

Le code devient donc :
{bloglist folder="echangeur" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}<div class="box-decorator1"><div class="box-decorator2"><div class="box-decorator3"><div class="decorator1"><div class="decorator2"><h2>{literal}Échangeur{/literal}</h2></div></div>
<div class="boxcontent-decorator1"><div class="boxcontent-decorator2"><div class="boxcontent-decorator3"><ul>{/if}{if $listitem.list_link_item_rss}<li class="link">{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}&nbsp;<a href="{$listitem.list_link_item_rss}"><img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a></li>{else}<li>{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}</li>{/if}{if $listitem.last}</ul></div></div></div></div></div></div>{/if}
{/bloglist}

Comment afficher l'infobulle ?
Il nous faut créer un lien hypertexte auquel nous attribuerons un titre. Dans l'idéal, il aurait fallu pouvoir attribuer la balise "title" au lien affiché, mais je n'ai pas réussi à modifier efficacement la portion de code Hautetfort {link href="`$listitem.url`" text="`$truncitem`"}. Vous noterez que ce lien affiche déjà une infobulle qui reprend le nom du lien. Ce dernier peut être coupé dans la colonne (truncate:70), il est affiché en intégralité en infobulle.

J'ai donc choisi d'afficher les caractères [?], auxquels seront attribués le lien hypertexte de l'item, avec la description dans la balise de titre.
Ce qui donne : <a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>

Il faudra doubler cette instruction pour le cas avec RSS et le cas sans RSS. Les esprits vifs que vous êtes me demanderont d'emblée : « Oui mais quand il n'y a pas de description, le [?] s'affiche-t-il tout de même ? »

Il faut effectivement créer une condition, pour qu'en l'absence de description le [?] ne s'affiche pas. Ce qui, en l'absence de RSS, nous donne : {if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>{else}{/if}

Le code complet va suivre, mais je dois vous mettre en garde avant que vous ne le copiez.

Le coller intégralement dans l'un de vos templates sans le modifier fera afficher MA liste de liens. Ce qui n'a aucun intérêt.
Ouvrez le template à personnaliser, copiez le code qui correspond à la liste de liens, et collez-le dans un éditeur en mode texte.
Repérez les valeurs qui vous correspondent pour modifier celles qui sont surlignées ci dessous.
Une fois que mon code sera personnalisé pour votre liste, vous allez le coller dans votre template
Ah oui, la mauvaise nouvelle, c'est qu'il faudra le faire pour chaque liste de liens.

Le code complet de la liste de liens :

<!-- liste de liens personnalisée début >> -->
{bloglist folder="echangeur-2" type="2" id="100355" sort="list_item_name ASC" assign="listitem"}{if $listitem.first}
<div class="box-decorator1"><div class="box-decorator2"><div class="box-decorator3"><div class="decorator1"><div class="decorator2">
<h2>{literal}Échangeur 2{/literal}</h2></div></div><div class="boxcontent-decorator1"><div class="boxcontent-decorator2"><div class="boxcontent-decorator3">
<ul><li class="description">{literal}Description pour échangeur 2{/literal}</li>{/if}
{if $listitem.list_link_item_rss}<li class="link">{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}
{if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a><a href="{$listitem.list_link_item_rss}" title="{$listitem.notes|nl2br}"><img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>{else}<a href="{$listitem.list_link_item_rss}"><img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>{/if}</li>
{else}<li>{assign var="truncitem" value=$listitem.name|truncate:70}{link href="`$listitem.url`" text="`$truncitem`"}
{if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>{else}{/if}</li>{/if}
{if $listitem.last} </ul></div></div></div></div></div></div>{/if}
{/bloglist}
<!-- liste de liens personnalisée << fin -->

Remerciez GEE MEE et mettez son logo sur votre blog en copiant le code ci dessous !