Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

20.10.2009

Affichez vos listes de liens dans un menu déroulant

Nous avons vu comment proposer l'accès aux archives en proposant une liste déroulante en bas du calendrier. Voyons comment appliquer cette méthode à la mise à disposition de listes de liens.

De nombreux blogs proposent des listes de liens à rallonge qui vont prendre grand place dans une ou deux colonnes. Afficher la liste ou pas, faire une sélection ou pas, autant de questions que chaque bloggueur finit par se poser. Sans prétendre proposer la solution idéale, la liste déroulante peut-être intéressante en prenant peu de place, tout en étant toujours gérée par le module d'administration de Hautetfort.

Pour éviter les malentendus, cliquez-ici pour voir un exemple de listes de liens mises en liste déroulante. Voyons un extrait du code.


<FORM>
<SELECT NAME="ListeUrl" onChange="ChangeUrl(this.form)">
<OPTION SELECTED VALUE=""> Sites amis
{bloglist folder="echangeur-2" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
<OPTION VALUE="{$listitem.url}">{$listitem.name|truncate:25}
{/bloglist}
</SELECT>
</FORM>

Il fallait d'abord activer les commandes de la liste de lien avec {bloglist}.
Puis, il fallait bien préciser le nom de la liste (ici "echangeur-2") et son identifiant de base de données (ici "97896").
Pour le nom de "l'invite", ce qui s'affiche avant de dérouler les choix possibles, j'ai choisi Sites amis mais c'est évidemment complètement libre (hormis la longueur de l'expresssion que vous devrez éventuellement adapter).
Après, il suffit de donner l'adresse du lien {$listitem.url}, et son nom {$listitem.name|truncate:25} pour que le formulaire soit généré.

Cette liste a plusieurs inconvénients :

- Ce n'est pas très joli et la personnalisation des formulaires est chose tellement hasardeuse, que je ne me risque pas à vous embarquer dans cette aventure.
- Il faut rapidement tronquer les libellés des liens pour contenir la largeur de la liste.
- Les liens sont ouverts dans la même fenêtre. Votre blog disparait donc au profit du lien externe. C'est la seule façon de s'affranchir des logiciels qui filtrent les fenêtres en pop-up, habituellement utilisées par la pub. Si le lecteur est vraiment fidèle, il reviendra, non ?

Mais elle a plusieurs avantages :

- la gestion de la liste continue d'être effectuée dans le module Hautetfort. Et après tout, si on s'en lasse, le retour au standard est aisé.
- on gagne tout de même beaucoup de place.
- on peut s'autoriser à multiplier les listes pour organiser les liens. C'est d'ailleurs ce que j'ai fait pour illustrer mon propos. Il suffit de répéter ce qui se trouve entre <!-- liste1--> et <!-- /liste1-->, ces commentaires compris, et de changer les valeurs pour le nom de la liste, l'identifiant, l'invite.

Le code à copier

<!-- liste_deroulante_liens -->
{literal}
<!-- DEBUT DU SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT http://www.editeurjavascript.com -->
<script language="JavaScript">
function ChangeUrl(formulaire)
{
if (formulaire.ListeUrl.selectedIndex != 0)
{
location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
target=_blank;
}
else
{
alert('Veuillez choisir une destination.');
}
}
</script>
<!-- FIN DU SCRIPT -->
{/literal}
<!-- Début adaptation du script à Hautetfort par Gee Mee -->
<!-- liste1 -->
<FORM>
<SELECT NAME="ListeUrl" onChange="ChangeUrl(this.form)">
<OPTION SELECTED VALUE=""> Sites amis
{bloglist folder="echangeur-2" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
<OPTION VALUE="{$listitem.url}">{$listitem.name|truncate:25}
{/bloglist}
</SELECT>
</FORM>
<!-- liste1 -->
<!-- liste2 -->
<FORM>
<SELECT NAME="ListeUrl" onChange="ChangeUrl(this.form)">
<OPTION SELECTED VALUE=""> Liste de test
{bloglist folder="liste-de-test" type="2" id="109374" sort="list_item_name ASC" assign="listitem"}
<OPTION VALUE="{$listitem.url}">{$listitem.name|truncate:25}
{/bloglist}
</SELECT>
</FORM>
<!-- liste2 -->
<!-- Fin adptation proposée par http://geemee.hautetfort.com -->
<!-- FIN DU SCRIPT --><noscript><a href="http://www.editeurjavascript.com/countus/">compteur live</a></noscript>
<!-- /liste_deroulante_liens-->

Pour repérer les valeurs de votre liste de liens, vous pourrez lire : Personnalisez l'affichage de vos listes de liens...
Puis vous pourrez vous référer à Personnalisez les éléments de colonne sans (trop) intervenir dans le code.

Les commentaires sont fermés.