Créer un Blog avec Blogger

Créer un menu

Selon vos possibilités vous pouvez réaliser de vrais menus 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. Voir nos articles dédiés



Les bases  : notion de lien
 Lors de l'édition d'un article ou d'une page, il est aisé de faire un lien à l 'aide du Menu "Associer"

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

En mode HTML, voici le code  : 


Lien simple :
 <a href="adresse du lien">titre du lien</a>

 Pour obtenir :     cliquer ici
 il faut ce code :   cliquer <a href="http://blogavecblogger.blogspot.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://blogavecblogger.blogspot.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: vous n'avez pas droit à l'erreur (la moindre faute, oubli, ajout dans le code provoque  son dysfonctionnement)


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  issu du site

http://theblogueur.blogspot.fr/2013/02/liste-deroulante-avec-liens-hypertexte.html

Liste Déroulante avec Regroupement d'éléments :

voir exemple ici


Code à copier/coller/adapter
-------------------------------------------------------------------------------------------

<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 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.

Exemple de code finalisé pour 1 groupe

-------------------------------------------------------------------------------------
</optgroup>
<optgroup label="ENTRAINEMENT">

<option value="http://uia-echecs.blogspot.fr/2014/10/le-probleme-dechecs-du-jour.html" />Problèmes

<option value="http://uia-echecs.blogspot.fr/2014/10/testez-votre-ouverture.html" />Tester votre ouverture

<option value="http://uia-echecs.blogspot.fr/2014/10/comment-se-termine-ma-partie-les-finales.html" />Les finales
</optgroup>

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

-Vous pouvez rajouter autant de liens que vous le désirez en recopiant la ligne : 
<option value="Lien X">Titre X</option>

-Les options de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. 

-À l’intérieur d’un élément <select>, on peut inclure autant de groupes que l’on veut.
-Le libellé de chaque groupe est donné dans l’attribut label de l’élément <optgroup>.

Comment ajouter ce Menu Déroulant dans Blogger

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




2- D'autres Menus

Il existe de nombreuses possibilités de créationde MENUS. 

Nous avons éliminé la possibilté d'insertion de Menus en 2 temps, d'abord via un widget puis ensuite via  une modification du  fichier "modèle" du blog, jugé trop complexe pour un débutant

 => voir le principe par  cet exemple:ladybird  ou  celui ci notuxedo)

Ne sont retenus que les menus s'affichant et se gérant uniquement  dans un simple Gadget HTML/Javascript

Voici donc un exemple, selon le même principe, de création d'un menu horizontal déroulant
comme celui de ce blog:

Code à copier/coller/adapter qui correspond au menu ci-dessus
(4 MENUS, le Menu 2 ayant  3 sous menus)

-------------------------------------------------------------------------------------------------------
 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: skyblue;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141
;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
   

<ul>
<li><a href="URL de votre BLOG">ACCUEIL</a></li>
<li><a href="#" rel="ddsubmenu1">MENU 1</a></li>
<li><a href="#" rel="ddsubmenu2">MENU 2</a></li>
<li><a href="#" rel="ddsubmenu3">MENU 3</a></li>
<li><a href="#" rel="ddsubmenu4">MENU 4</a></li>
</ul>
</div>

<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>

<li><a href='URL'>MENU 1.1</a></li>
<li><a href='URL'>MENU 1.2</a></li>
<li><a href='URL'>MENU 1.3</a></li>
<li><a href='URL'>MENU 1.4</a></li>
<li><a href='URL'>MENU 1.5</a> </li>
</ul>




<ul class='ddsubmenustyle' id='ddsubmenu2'>
  
<li><a href='#'>MENU 2.1</a>
    <ul>
            <li><a href='URL'>SOUS MENU 2.1.1</a></li>
           <li><a href='URL'>SOUS MENU 2.1.2</a></li>
            <li><a href='URL'>SOUS MENU 2.1.3</a></li>
            <li><a href='URL'>SOUS MENU 2.1.4</a></li>
            <li><a href='URL'>SOUS MENU 2.1.5</a></li>
      </ul></li>
  
<li><a href='URL'>MENU 2.2</a></li>
<li><a href='URL'>MENU 2.3</a></li>
<li><a href='URL'>MENU 2.4</a></li>
<li><a href='URL'>MENU 2.5</a></li>
<li><a href='URL'>MENU 2.6</a></li>


<li><a href='#'>MENU 2.7</a>
        <ul>

            <li><a href='URL'>SOUS MENU 2.7.1</a></li>
            <li><a href='URL'>SOUS MENU 2.7.2</a></li>
            <li><a href='URL'>SOUS MENU 2.7.3</a></li>
            <li><a href='URL'>SOUS MENU 2.7.4</a> </li>
            <li><a href='URL'>SOUS MENU 2.7.5</a></li>    
      </ul></li>


<li><a href='URL'>MENU 2.8</a></li>

<li><a href='#'>MENU 2.9</a>
       <ul>
            <li><a href='URL'>SOUS MENU 2.9.1</a></li>
            <li><a href='URL'>SOUS MENU 2.9.2</a></li>
       </ul></li>




<ul class='ddsubmenustyle' id='ddsubmenu3'>

<li><a href='URL'>MENU 3.1</a></li>
<li><a href='URL'>MENU 3.2</a></li>
<li><a href='URL'>MENU 3.3</a></li>
<li><a href='URL'>MENU 3.4</a></li>
<li><a href='URL'>MENU 3.5</a></li>
<li><a href='URL'>MENU 3.6</a></li>
<li><a href='URL'>MENU 3.7</a></li>
</li> </ul>


<ul class='ddsubmenustyle' id='ddsubmenu4'>

<li><a href='URL'>MENU 4.1</a></li>
<li><a href='URL'>MENU 4.2</a></li>
<li><a href='URL'>MENU 4.3</a></li>
<li><a href='URL'>MENU 4.4</a></li>
<li><a href='URL'>MENU 4.5</a></li>
<li><a href='URL'>MENU 4.6</a></li>
<li><a href='URL'>MENU 4.7</a></li>
</li> </ul>

------------------------------------------------------------------------------------------------------------
Comment Personnaliser le code du  Menu De Navigation

      TESTER



  • D'abord, copier ce code. 
  • Allez sur  "Mise En Page" et , en dessous de l'entête de votre blog, cliquez sur  "Ajouter un Gadget" > "HTML/JavaScript"
  • Collez le code dans la petite fenêtre qui s'ouvre, cliquez sur "Enregistrer".
  • Vérifier le bon fonctionnement du Menu.
  • Ensuite vous devez l'adapter  à votre blog en choisissant le nombre de menus et l'emplacement éventuel des sous menus.

    MODIFIER
  • Vous n'avez pas à modifier la première partie du code sauf pour changer l'aspect graphique du Menu (couleurs, police...) Soyez prudents !
    • Pour changer les couleurs (fond...), il suffit de changer le code  background mais il en existe plusieurs, aussi faire des tests... et bien noter ce qui est modifié...
    • A savoir: certaines couleurs (texte des liens en particulier) sont déterminées par le choix de votre modèle Blogger, il faudra donc les modifier via :  Modèles >Personnaliser > Avancé puis aller sur "Liens"  / "Texte des onglets" /"Arrière Plan des onglets" : changer les couleurs et tester !
    • Pour toutes les autres modifications de mise en forme et graphisme du Menu, à vous de voir... selon vos compétences.

  • Vous devez obligatoirement modifier les éléments indiqués dans la deuxième partie du code (à partir de: URL de votre Blog) :
    • Remplacez toutes les indications  URL avec votre propres liens.
    • Remplacez MENUS et SOUS MENUS avec vos propres titres de liens.
    • Pour modifier / supprimer / créer un sous-menu comme à l'intérieur du  MENU 2 qui comprend 2 sous menus, il faut modifier le code comme indiqué (procéder par copier coller)
    • Pour mieux comprendre l'organisation du menu, les 4 lignes de code qui introduisent les 4 menus sont mises en rouge
  •  A savoir : les tags   <ul> =  liste      et    <li>= élément de liste  
    les tags fonctionnent  par pairs avec un début <li>et une fin</li>
    => attention de ne pas oublier de fermer un tag !
SI PROBLEME....  d'adresse du SCRIPT (menu ne fonctionnant plus)

<script src='http://theblogueurmenu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>



2 POSSIBILITES de REPARATION





A- remplacer, au début du script, cette ligne de code

<script src='http://theblogueurmenu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script


par [copier/coller via le bloc notes]
 le code affiché sur cette page

ou
 le télécharger via  ce fichier txt


B. (ou)  Déplacer  le fichier  "TheBlogueur_Menu.js" Comme le fichier est indisponible, télécharger ici le fichier "TheBlogueur_Menu.js" 

ou  l'obtenir via ce fichier txt

Ensuite positionner ce fichier  sur un serveur et modifier l'adresse d'accès, voir ci-dessous  un exemple fonctionnel
remplacer le code du début du Menu

 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'

type='text/javascript'></script>


par celui-ci:

<script src='http://uia.ii.free.fr/menu/TheBlogueur_Menu.js' type='text/javascript'></script>



=> Attention le code  pour A ( à coller au début du script) est différent  de B qui est un fichier  à placer sur un serveur distant! 



COULEUR DE FLECHE DU MENU

Comment obtenir un Menu avec une autre couleur de flèche ? ex : blanches
( à la place des flèches rouges...)



remplacer le code du début du Menu par celui-ci: 

 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>

<script src='http://uia.ii.free.fr/menu/Menu_whitearrow.js'
type='text/javascript'></script>

Comment changer les flèches ?
Il faut modifier le script du Menu

1-Récupérer le script "TheBlogueur_Menu.js"  ou autre (voir ci-dessus)
2-Ouvrir ce script (bloc notes...)
3-Retrouver, tout au début du script, ce code qui indique le lien  vers les images (gif) de flèches


http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif

http://3.bp.blogspot.com/NjdLcKUwgLA/T8o5oRsLskI/AAAAAAAAB3Q/CY1mCsobpdA/s1600/helperblogger.com-arrow-right.gif

(voir dans le script ci-dessus le fluo jaune)

4-Modifier ou créer  vos flèches de la couleur souhaitée avec un logiciel image
5-Stocker vos images sur un serveur (ou utiliser celles proposées ci-dessous)

6-Modifier 2 adresses au début du  script avec la nouvelle adresse des flèches

exemple fonctionnel d'adresse de flèches blanches:

http://uia.ii.free.fr/menu/arrow-down-white.gif
http://uia.ii.free.fr/menu/arrow-right-white.gif

D'autres couleurs de flèches sont proposées à la même adresse :
arrow-down-white.gif / arrow-right-green.gif / arrow-right-grey.gif /arrow-right-blue.gif/ arrow-right-yellow.gif/

arrow-right-white.gif / arrow-right-green.gif / arrow-right-grey.gif /arrow-right-blue.gif / arrow-right-yellow.gif 


AUTRES MENUS

-selon ce même concept (uniquement un code à coller dans un gadget html/javascript puis configuer les titres/liens des items du menu), vous pouvez trouver 35 autres menus sur ce site (en anglais)
-http://24work.blogspot.com

-même concept avec un graphisme différent : "Personnaliser Blogger"

-template avec menu déroulant intégré "template simple clean white"

Source et détails voir le blog : 
-http://theblogueur.blogspot.fr/2012/11/menu-navigation-horizontal-deroulant.html 



5-D'autres liens pour d'autres menus:

Voir ces dossiers très complets qui présentent diverses possibilités

-http://optimisation-blogger.blogspot.fr/search/label/Menus

-http://menus-deroulants-pour-blogger.blogspot.fr/ 

-http://optimisation-blogger.blogspot.fr/2011/04/menu-vertical-blog-blogger-utile.html

-http://24work.blogspot.com/2013/09/drop-down-menu-widget-in-blogger.html

-http://ladybirdr.blogspot.fr/2014/09/creer-un-menu-deroulant.html

-http://theblogueur.blogspot.fr/2012/11/menu-navigation-horizontal-deroulant.html

-http://modifier-les-modeles-de-blogger.blogspot.fr/2007/12/menu-horizontal-d%C3%A9roulant-trois-niveaux.html

-http://le-blog-facile.ek.la/menu-horizontal-superieur-deroulant-methode-simplifiee-p348708

en anglais
http://101helper.blogspot.com/search/label/Blogger%20menus