Afficher un gadget masqué

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 : plus bas dans la 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.



4) Le code du premier gadget à ajouter est le suivant :

<h2>
<a id="ContactForm1-A" onclick="affichercacher('ContactForm1','FORMULAIRE DE CONTACT ▼');">FORMULAIRE DE CONTACT ▼</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 : FORMULAIRE DE CONTACT ▼ (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).

Aucun commentaire:

Enregistrer un commentaire