Afficher un gadget remplacé par un lien

obtenir ces boutons

Afficher un gadget remplacé par un lien

1) Pour raccourcir une colonne latérale, on peut très facilement remplacer des gadgets par de simples liens. En cliquant sur ces liens, on fait apparaître les gadgets cachés.

2) Exemple : dans la colonne de gauche de ce site, se trouve le lien : FORMULAIRE DE CONTACT ▼. En cliquant dessus, le gadget apparait.

En cliquant ensuite sur "fermer ▲", le gadget est à nouveau masqué.

Autre exemple : dans la même colonne de gauche de ce site, cliquer sur le lien : MUSIQUE EN LIGNE ▼.

3) Pour obtenir cela, il faut ajouter deux gadgets HTML/JavaScript dans le blog.
Rappel : comment ajouter un gadget HTML/JavaScript sur un blog

4) Le code du premier gadget à ajouter est le suivant :
<h2>
<a id="ContactForm1-A" onclick="affichercacher('ContactForm1','CONTACTER CE SITE ▼');">CONTACTER CE SITE ▼</a></h2>

"ContactForm1" est le nom du gadget concerné. Pour cacher un autre gadget, il suffit de remplacer (deux fois) "ContactForm1" par le nom de cet autre gadget. Pour connaître le nom du gadget, aller dans "Mise en page" et cliquer sur "Modifier" dans le rectangle correspondant au gadget : le nom apparait à la fin de l'adresse, en haut de la fenêtre qui s'est ouverte ("HTML1" ...).

Il faut enfin éventuellement modifier (deux fois) le texte du lien : CONTACTER CE SITE ▼ (ci-dessus en rouge).

On peut ajouter autant de gadgets que l'on veut.

Ce gadget se place, dans "Mise en page", JUSTE AVANT le code du gadget concerné.

5) Le code du second gadget à ajouter est le suivant :
<script>
function affichercacher(id,id3)
{id2=id + "-A";
if(document.getElementById(id).style.display=='block')
{document.getElementById(id).style.display='none';
document.getElementById(id2).innerHTML=id3;}
else
{document.getElementById(id).style.display='block';
document.getElementById(id2).innerHTML='fermer ▲';}
return;}
</script>

<style type='text/css'>
#ContactForm1{display:none}
</style>

Ce code ne doit être ajouté qu'UNE SEULE FOIS dans le blog, même s'il y a plusieurs gadgets à cacher.

Il faut cependant ajouter une ligne avec le code "#ContactForm1{display:none}" par gadget à cacher, en remplaçant "ContactForm1" par le nom du gadget concerné.

Ce gadget se place, dans "Mise en page", JUSTE AVANT le premier code prévu au point 4).

4 commentaires:

bernard vandervart a dit…

merci beaucoup pour ce Post Gégnal il ma vraiment aidé dans l'amélioration de mon blog
centre d'appel

call center

L'MAE Miroirauxessences a dit…

Bonjour,
Effectivement ce post est génial, il marche à merveille, grâce à vous je viens de fermer des modules.
Merci beaucoup pour cet article.
Je l'ai appliqué sur ce blog :
http://www.erhabenmaya.com

Mamzelle a dit…

Pour une raison que je ne m'explique pas, ça ne fonctionne pas pour moi!!! Des pistes de solution???

Bouzaien Tarek a dit…

merci beaucoup je veux obtenir les même barre verticalement si c'est possible