Peek-a-boo pour afficher/cacher vos menu sur la colonne latérale

Magali avait placée la demande suivante dans la liste de vœux :

C'est plus Noël ni l'Epiphanie, mais tu exauces peut être nos voeux toute l'année qui sait ?

Alors voilà sur ce blog : http://dlparadise.blogspot.com l'organisation des colonnes est très intéressantes puisqu'avec [+/-] on peut afficher ou cacher le contenu des catégories, des messages récents etc... Si tu sais comment ça fonctionne, j'aimerais bien que tu nous donnes le truc.

Et sur le même site, si tu cliques sur Listen To Music Of, ça fait un vrai juxebox avec les photos des artistes. Moi j'aime bcp, tu sais comment on fait ça ? J'ai l'impression que ça fonctionne avec
www.radioblogclub.fr

On va dire que si tu savais pas quoi faire, je viens de te trouver une occupation :D

Mais le truc des [+/-] je pense que ça pourrait intéresser pas mal de gens.

Bonne journée,

magali

Après recherche, j’ai trouvé la méthode utilisé pour arriver à ce petit prodige. On appele cela du Peek-a-boo, le fait d’avoir une fonctionnalité qui permet de cacher ou afficher sans avoir à charger une nouvelle page le contenu de vos menu dans la barre latérale ou même le contenu de vos articles à la page d’accueil, aux pages de libellés et des archives.

Je vais vous proposer des méthodes toute simple pour disposer de cet fonctionnalité dans votre blog

1. Pour le widget HTML/JAVASCRIPT

Voici deux formulaire qui vous permettent d’installer en un click un widget HTML/JAVASCRIPT disposant de la fonctionnalité d’afficher et cacher son contenu dans votre blog. Le premier affiche et cache le contenu quand on clique sur le titre tandis que le second affiche et cache le contenu quand on clique sur [+/-] .

Après avoir sur la page où vous serez amené, cliquez sur “ modifier le contenu ” et collez votre code HTML/JAVASCRIPT à la place de HTML/JAVASCRIPT Ici.

HTML / JavaScript Ici <b:includable id='main'> <h2 class='title'> <script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = "; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">'); /* ]]> */ </script> <data:title/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/a>'); /* ]]> */ </script> </h2> <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name='quickedit'/> </b:includable>

HTML / JavaScript Ici <b:includable id='main'> <h2 class='title'> <script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = "; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>'); /* ]]> */ </script> <data:title/> </h2> <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name='quickedit'/> </b:includable>

2. Formulaire pour ajouter 3 sortes de widgets Peek-a-boo dans votre blog (Html/Javascript, Liste des liens, Libellés)

Ce formulaire vous permet d’ajouter l’un de trois widgets proposés dans votre blog. Pour cela, après avoir choisis les options que vous voulez, cliquez sur “ générer le code ”. Prendre le code qui sera généré et allez le coller dans votre modèle dans la colonne latérale (qui ressemble à ceci <b:section class='sidebar' id='sidebar' preferred='yes'>), juste avant la balise </b:section> ou après la balise </b:widget>. Prenez soin de cochez sur “ développer des modèles de gadget avant d’effectuer l’opération. Il ne vous restera plus qu'à aller sur "éléments de la page" , de trouver le widget que vous veniez d'ajouter et d'y mettre le nécessaire (en cliquant sur "modifier" bien sûr).

Je vous donne ici une version traduite du formulaire que vous irez remplir chez Singpolyma. Notez que le code ne sera pas généré ici.

Type de widget: Liste des liens Libellés (X)HTML / JavaScript

Afficher/Cacher grâce au : Titre du widget [+/-]

Cacher par défaut?

Déroulant?

Ouvrir les liens dans une nouvelle fenêtre (Liste des liens seulement)?

Astuces trouvé chez Singpolyma

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter
pour rester à jour ou encore  rejoindre ma communauté sur Blogcatolog. N'oubliez pas
d'ajouter ce blog à vos favoris sur Technorati.