Aïe non, “Gain de place” (je me crois encore en vacances ).

Après cette introduction un peu facile (je n’ai pas pu m’empêcher de la faire…), je vous propose une nouvelle rubrique intitulée “Trucs & Astuces“. Aujourd’hui, voici une astuce qui vous permet de gagner de la place dans votre sidebar. Les pros et les amateurs éclairés connaissent sûrement ce genre de ficelles. Cet article s’adresse donc plutôt aux newbies du blogging.

Vous avez peut-être par exemple, une blogroll qui n’en finit plus de s’étirer dans votre panneau latéral, a tel point qu’il dépasse en longueur la zone des posts. Outre le fait que ce soit assez peu esthétique, son ergonomie et par conséquence son utilité s’en trouvent limitée.

L’idée est donc de ne faire apparaitre que le titre (par exemple : “Ma blogroll”) et de “dérouler” les liens de la blogroll quand on clique sur le titre et de “rétracter” les liens quand on clique a nouveau. voici ce que ça peut donner (cliquez sur “Ma Blogroll”):

Pour réaliser cet effet, j’ai utilisé la boite � outil (toolkit) appelée : scriptaculous. C’est une bibliothèque javascript permettant d’utiliser les possibilités d’Ajax de manière très simple. Pour notre exemple, vous avez besoin de récupérer sur le site de scriptaculous les fichiers javascript suivants : prototype.js et scriptaculous.js (le mieux, c’est de télécharger et d’uploader toute la bibliothèque c’est a dire, le dossier “scriptaculous”). Une fois les fichiers sur votre site, insérez dans votre header, entre les balises HEAD, les lignes suivantes :

<script src=”/scriptaculous/lib/prototype.js” type=”text/javascript”></script>
<script src=”/scriptaculous/src/scriptaculous.js?load=effects” type=”text/javascript”></script>

Ensuite, dans le fichier de votre sidebar, placez le script suivant :

<a onclick=”Effect.toggle(’mablogroll’,’slide’)” style=”cursor:pointer”>Ma blogroll</a>
<div id=”mablogroll” style=”display:none”><div>insérez vos liens ici</div></div>

Et voila. vous avez normalement une belle blogroll déroulante, façon Ajax. Je dis normalement car c’est comme les recettes de cuisine, il suffit d’oublier le sel et c’est raté !

Pour vous familiariser avec scriptaculous, rendez vous sur leur site, ils on plein de démos.