UN MENU TRES DISCRET EN 1 CLIC !

Vous avez peut être remarqué que mes colonnes ont considérablement diminuées...
Ras le bol de jouer de la roulette, le soir j'ai des crampes dans la main droite !

Alors voici comment ranger vos liens, vos blocs, tout ce qui traine et qui prend de la place...
Seul le titre est apparent, il suffit de cliquer dessus pour afficher le contenu.
Pratique non !?

Voici le code de base :

<script type="text/javascript">
function showhide(blocid) {
var monbloc1= document.getElementById(blocid);
if (!monbloc1) return;
monbloc1.style.display = (monbloc1.style.display=="none" ) ? "block" : "none";
}
</script>
<p class="bloclien1"><a onclick="showhide('monblocdelien1')"> 
<div class="title">TITRE DE VOTRE BLOC DE LIENS</div></a></p>
<div id="monblocdelien1" style="display: none;">
------>Collez ici les liens
</div>

Une fois que vous avez collé ce script dans votre colonne, vous devez ajouter l'adresse de vos liens que vous voulez mettre dedans et ajouter la balise <ul> </ul> au début et à la fin..

Comme ceci :

<script type="text/javascript">
function showhide(blocid) {
var monbloc1= document.getElementById(blocid);
if (!monbloc1) return;
monbloc1.style.display = (monbloc1.style.display=="none" ) ? "block" : "none";
}
</script>
<p class="bloclien1"><a onclick="showhide('monblocdelien1')"> 
<div class="title">TITRE DE VOTRE BLOC DE LIENS</div></a></p>
<div id="monblocdelien1" style="display: none;">
<ul>   
<li><a href="http://Adresse de mon lien">Nom du lien</a></li>
<li><a href="http://Adresse de mon lien">Nom du lien</a></li>
<li><a href="http://Adresse de mon lien">Nom du lien</a></li>
</ul>
</div>

Pour mettre un bloc comme celui des Derniers messages c'est le même principe, mais pour mettre plusieurs menus sur votre blog, il faut les différencier les uns des autres en leur attribuant un numéro, ne touchez pas à la première parti du script, modifiez seulement les 3 numéros en gris, si c'est le deuxième menu mettez le chiffre 2, si c'est le troisième le chiffre 3 et ainsi de suite.

<script type="text/javascript">
function showhide(blocid) {
var monbloc1= document.getElementById(blocid);
if (!monbloc1) return;
monbloc1.style.display = (monbloc1.style.display=="none" ) ? "block" : "none";
}
</script>
<p class="bloclien2"><a onclick="showhide('monblocdelien2')"> 
<div class="title">DERNIERS MESSAGES</div></a></p>
<div id="monblocdelien2" style="display: none;">
<ul>
  <CBLastPosts>
  <li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
</div>

Ensuite vous devez collez les codes qui permettent l'affichage des Derniers messages (en blanc).
Voila, ça marche avec tous les blocs...

Vous pouvez changer le code suivant dans le script :

<div class="title">DERNIERS MESSAGES</div>

C'est le titre qui s'affiche, mais vous pouvez mettre <h2>DERNIERS MESSAGES</h2> pour un affichage comme la date de vos articles.

<h3>DERNIERS MESSAGES</h3> comme le titre de vos articles.

Ou encore <font color="#FFFFFF"  font face="georgia">DERNIERS MESSAGES</font> pour modifier la police et la couleur du texte...

C'est comme vous vous voulez...

Mais Attention...ne touchez pas aux </a></p> qui se trouvent à la fin de cette ligne de code !

<div class="title">DERNIERS MESSAGES</div></a></p>

Vous pouvez aussi mettre des images cliquables comme ceci :

<script type="text/javascript">
function showhide(blocid) {
var monbloc1= document.getElementById(blocid);
if (!monbloc1) return;
monbloc1.style.display = (monbloc1.style.display=="none" ) ? "block" : "none";
}
</script>
<p class="bloclien1"><a onclick="showhide('monblocdelien1')"> 
<div class="title">TITRE DE VOTRE BLOC DE LIENS</div></a></p>
<div id="monblocdelien1" style="display: none;">
<ul>   
<li><a href="http://Adresse de mon lien"><img src="Adresse de l'image"></a></li>
<li><a href="http://Adresse de mon lien"><img src="Adresse de l'image"></a></li>
<li><a href="http://Adresse de mon lien"><img src="Adresse de l'image"></a></li>
</ul>
</div>

Amusez vous bien !

Comments

[cactus24]

Bonjour ! Et déjà : un grand merci pour ton blog très complet!! Je voulais savoir comment avait été réglé le problème de curseur qui fait son capricieux et refuse de montrer le lien du menu? J'ai mi un temps fou avant de comprendre qu'en fait mon menu marchait mais que le lien n'était juste pas indiqué par la souris ^^"
Voila, sinon, nikel tes explications! et encore merci pour ton travail titanesque!!

[gigi]

Merci beaucoup ! ça marche. [Super]

[gigi]

Bonjour,

J'ai le même problème que Sofi pour les tags ils s'affichent et je voudrais comme toi, je n'ai pas bien compris où sur la page d'accueil. Merci et bonnes vacances.[Fleur]

[sofi]

Bon bah je suis désolée je dois etre neuneu mais j y arrive pas,
je te laisse profité de tes vacances tranquillement, reposes toi bien, et je te contacterai plus tard
bonnes vacances et a bientot
merci encore
sofi

[Demolite]

[Salut] Sofi

Eh bien tu es sur le bon tuto...c'est quoi qui te dérange ?
Tu dois coller le script que je donne plus haut (celui avec les "derniers messages") et tu mets le code de ton bloc de nuages de tags dans le script.
Comme ça :
[Img]:url://i34.tinypic.com/s320t1.gif[/Img]
[Super]