Créer un menu Déroulante avec Regroupement d'éléments sur Blogger

Selon vos possibilités vous pouvez réaliser de vrais MENU sur Blogger plus ou moins sophistiqués.

Rappel, via les liens et les libellés vous pouvez faire apparaître vos mots clés, cela peut être suffisant pour certains blogs.

Les bases pour les débutants : Notion de lien

Lors de l'édition d'un article ou d'une page, il est facile de faire un lien à l 'aide du Menu "Associer"

Ce lien pointe vers un article ou une page dont vous avez mémorisé l'URL.

En mode HTML, voici le code HTML :

Lien simple :

<a href="adresse du lien">titre du lien</a>

Pour obtenir : cliquer ICI

il faut ce code : cliquer <a href="http://www.leblogger.fr">ici</a>

Lien s'ouvrant dans une nouvelle fenêtre

<a href="adresse du lien" target="blank">titre du lien</a>

Pour obtenir : cliquer là et une nouvelle fenêtre s'ouvre

il faut ce code : cliquer<a href="http://www.leblogger.fr" target="_blank"> là</a>

et une nouvelle fenêtre s'ouvre

1- Concevoir un Menu "classique" simple

 

Vous devez avoir les compétences nécessaires pour cette réalisation qui nécessite d'adapter du code ou, du moins, bien respecter les consignes.

PRINCIPE :

Allez sur "Mise En Page" et , en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget".

Choisir le gadget "HTML/JavaScript", collez le code du menu dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".

Voici un exemple de Menu relativement simple de Liste Déroulante avec Regroupement d'éléments :

Voir exemple menu Déroulante avec Regroupement d'éléments sur Blogger:

Code à copier/coller :

-------------------------------------------------------------------------------------------

<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>

<optgroup label="Groupe 1">
  <option value="Lien 1">Titre1</option>
  <option value="Lien 2">Titre 2</option>
</optgroup>

<optgroup label="Groupe 2">
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option> 
<option value="Lien 5">Titre 5</option>
</optgroup>

<optgroup label="Groupe 3">
<option value="Lien 6">Titre 6</option>
  <option value="Lien 7">Titre 7</option> 
</optgroup>

</SELECT>
</FORM>

-------------------------------------------------------------------------------------------------------

Configuration :

Ce code HTML ci-dessus est à copier tel quel : il faudra uniquement changer ce qui est en couleur :

• Le titre du menu : Menu déroulant de liens
• Les groupes: Groupe 1 
• Les liens: lien 1 
• Le titre du lien: Titre 1 
• Menu Déroulant De Liens : C'est le titre à afficher sur la lite, vous pouvez le modifier avec un titre de votre choix.-Lien 1, Lien2, Lien 3 et Lien 4 sont les adresses (URL) des pages vers lesquelles vont pointer les entrées Titre1, Titre 2, Titre 3 et Titre 4 

➯Vous devez faire les modifications nécessaires.

Comment ajouter ce Menu Déroulant dans Blogger

1. Copier le code HTML de la liste déroulante de votre choix (sans ou avec regroupement d'éléments) 
2. Et allez à :"Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
3. Collez le code dans la petite fenêtre qui s'ouvre, modifiez-le 
4. Et enfin cliquez sur "Enregistrer".