Menu avec liens actifs affichant une couleur de fond différentes

La grande difficulté à laquelle je fus buté en adaptant le thèmeVisiting card, c'est que je n'arrivais pas faire en sorte que la couleur fond des liens du menu change selon que l'on se trouve sur une page ou une autre, selon qu'une page est active ou pas. Mes recherches sur les autres templates blogger disponible en ligne furent infrectueuses, car aucun n'arrivait à rendre le menu actif sur pour une page et pas pour les autres.

Si j'étais tombé sur le code que je vais vous présenter, je crois que je me serais un peu plus débattu pour avoir le résultat escompté. Dans l'image ci-haut, je me trouvait à la page d'accueil du blog, et ainsi le fond du bouton accueil sur le menu avec une couleur différente des autres. Dans l'image ci-bas, je me trouve sur une autre page et la couleur de fond du bouton menu de ce lien actif  est celle qui devient différente des autres. 

Le template que j'utilise actuellement sur blogger mastering rend parfaitement l'effet que j'attendais. C'est pourquoi je me suis permis de vous en livrer le secret, car qui sait si quelqu'un ici  a besoin de permettre aux visiteurs de mieux se situer par rapport à la page du lien du menu sur laquelle ils se trouvent.

Voici les étapes à suivre pour disposer de ce menu sur son blog :

1. Se connecter à votre compte Blogger. Aller sur "Mise en page" puis sur "Modifier le code html".
2. Mettre le css suivant juste avant la balise ]]></b:skin>

/*NAVIGATION BAR */

.nav {
    border-top:1px solid #ddd;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi99Btv1cHEsBTbMixXd441Myt0tM5vQZztuA-OtWxi91QbTtkJa_3HRMcbC1b6pJXEVj6fyyvJrOWFw7VFOoRX-YOLYL7ZG5COUXAHtq9KZfZiBJTeRu0sfWYFs24MAaJ9aMeWmOIgbHQ/s1600/nav_bg.png) repeat-x;
    width:980px;
    height:30px;
}

.nav li {
    float:left;
    padding:0 10px;
    line-height:30px;
    height:30px;
    border-right: 1px solid #ddd;
}
.nav li a{
    text-decoration:none;
    text-transform:uppercase;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
    letter-spacing:2px;
    font-weight:900;
}
.current-cat{
    background:#fff;
}
.actived a {
    color:#c34b9b !important;
}


3. Ajouter ce script avant la balise </head>

<script type='text/javascript'>
     function currentpage (url,current,name) {
     var name = name ;
     var url = url;
     var current = current;
     if (current == url) {
     document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
     }
     else {
     document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
     }       
     }
</script>

4. Ajouter cette section avant le </div> qui ferme votre <div id="head"> ou votre <div id="header">

     <b:section class='nav fl' id='menubar' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
                         <ul>
                             <b:loop values='data:links' var='link'>
                                <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
                                
                             </b:loop>
                         </ul>                
                 </b:includable>
</b:widget>
</b:section>

Enregistrer votre modèle.

5. Se rendre sur "Mise en page" et cliquer sur le "modifier" pour le widget "LinkList" (Liste des liens) qui s'affiche désormais après le "header" (entête). Ajoutez des liens à votre menu et enregistrez les modifications. 

Maintenant, votre blog aura un système de navigation avec liens affichant une couleur  de fond différente selon que se trouve une page dont le lien se trouve sur la barre de menu. 

@+