Menu très discret en 1 clic

Voici comment ranger vos liens, vos blocs, tout ce qui traine et qui prend de la place dans vos colonnes...
Seul le titre du menu est apparent, il suffit de cliquer dessus pour afficher le contenu.

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> au début et </ul> à 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 bleu, si vous mettez deux menus dans votre pages, mettez le chiffre 2, pour 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...

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 balises </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 !