BLOGGING&CO

Modifier le menu prédéfini d’un template Blogger

 
 Hello ! J’espère que vous allez bien.
Aujourd’hui je vous propose un article « Tuto » qui vous permettra de modifier le menu prédéfini de votre thème Blogger.
Qu’est-ce que j’entends par menu prédéfini ? 
Il faut savoir que les menus proposés par les templates Blogger varient d’un thème à un autre. Certains parmi vous pourront le modifier grâce aux Widget « Pages » d’autre au Widget « Liens » et d’autres encore auront un menu déjà tout fait qu’ils devront modifier dans le code html, c’était le cas de mon amie Jen. Après l’avoir aidé à installer correctement son menu, je me suis dis que ça pourrait peut-être être utile à d’autres ^^ Voilà pourquoi je crée aujourd’hui cet article 🙂

  Modifier le menu prédéfini d’un template Blogger

Dans un premier temps, sauvegardez votre thème actuel (Au cas où vous feriez une mauvaise manipulation, cela vous permettra de le ré-installer tel qu’il était auparavant) Pour cela, sur votre tableau de bord à gauche, il vous suffit de cliquer sur THÈME puis en haut à droit de la page « Sauvegarder/Restaurer ». Une fenêtre s’ouvre , cliquez sur « Télécharger le Thème » (enregistrez-le sur votre bureau par exemple).
Toujours dans la partie THÈME, cliquez sur « modifier le code HTML« 

Vous arrivez sur la page  HTML & CSS de votre blog. Cliquez n’importe où dans le code. Maintenant à l’aide de votre clavier, appuyez sur les touches « CTRL + F », une zone de recherche s’ouvre. Collez y l’un des mots-clés suivants : 
  • <ul class= »menu »>
  • banner 
  • navigation
  • top-navigation 

 

(Par exemple pour Jen, j’ai copié/collé le mot « banner« ) 
Normalement vous devriez désormais voir apparaitre votre menu sous la forme suivante : 
Si ce n’est pas le cas, voici une autre solution (Rendez-vous sur la page d’accueil de votre blog, placez votre souris sur votre menu et faites un clic droit, puis sélectionnez « inspecter l’élément », une zone de codes s’affiche, dont une ligne surlignée en bleu, c’est la ligne de code de votre menu, repérez un ou plusieurs mots-clés, copiez-le(s) et collez-le(s) comme expliqué à l’étape précédente)
<– DEBUT DU MENU –>
<ul class= »nav » id= »menu-primary »> 
<li class= » »>
<a class= »active » href= »/ »>
<i class= »fa fa-home »></i>
<div id= »act »>
</div>
</a>
</li>
<li><a class= »act » href= »http://jenstyle001.blogspot.fr »>ACCUEIL</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/about.html »>A PROPOS</a></li>
<li class= »dropdown »><a class= »dropdown-toggle » data-toggle= »dropdown » href= »# »>FASHION<i class= »icon-angle-down »></i></a>
<ul class= »dropdown-menu »>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Look »>Looks</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Conseils »>Conseils</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Whislist »>Wishlists</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/shop-my-style.html »>Shop my Style</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/vide-dressing.html »>Vide Dressing</a></li>
</ul>
</li>
<li class= »dropdown »><a class= »dropdown-toggle » data-toggle= »dropdown » href= »# »>LIFESTYLE<i class= »icon-angle-down »></i></a>
<ul class= »dropdown-menu »>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/humeur »>Humeurs</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Divers »>Divers</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Deco »>Déco</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Beaute »>Beauté</a></li>
</ul>
</li>
<li><a href= »https://jenstyle001.blogspot.fr/p/collabs »>COLLABS</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/# »>MES SERVICES</a></li>
<li>
<a href= »https://jenstyle001.blogspot.fr/p/blog-page_21.html »> Contact me </a></li>
</ul>

<– FIN DU MENU –> 

  • Les balises <UL> symbolisent le menu (<ul> … </ul> signifie « ceci est un menu »)
  • Les balises <li> symbolisent les « éléments » du menu (<li> …  ACCUEIL </li> , ceci est un élément du menu).
  • Les balises < a href = # > </a> symbolisent les liens

Donc pour modifier votre menu : 
<li><a class= »act » href= »http://jenstyle001.blogspot.fr »>ACCUEIL</a></li>

 

  • Modifiez les mots entre les Balises <li><a href> Titre </a> </li>
  • Collez le lien de la page (ou des tags d’articles) entre les «  » après le href. (parfois la place du lien est symbolisé par un « # » (soit : <a href= »# »> )
  • Si vous n’avez pas assez d’élément et que vous souhaitez en ajouter, copiez/collez la ligne entière <li> </li> (et modifiez simplement le lien et le nom de la catégorie)

Si vous souhaitez ajouter une catégorie avec SOUS-MENU , il vous faudra copier/coller toute cette partie : 

<li class= »dropdown »><a class= »dropdown-toggle » data-toggle= »dropdown » href= »# »>FASHION<i class= »icon-angle-down »></i></a>
<ul class= »dropdown-menu »>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Look »>Looks</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Conseils »>Conseils</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/search/label/Whislist »>Wishlists</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/shop-my-style.html »>Shop my Style</a></li>
<li><a href= »https://jenstyle001.blogspot.fr/p/vide-dressing.html »>Vide Dressing</a></li>
</ul>
</li>
Ici le « <UL> » permet de créer une nouvelle catégorie avec des sous-menus (car en réalité les sous-menus, sont simplement une répétition de menu (un menu, dans un menu))

 Voilà, il ne vous reste plus qu’à enregistrer le thème. 

Vous venez de personnaliser votre Menu 🙂

  RECAP   

Un menu est composé de : 
 
<ul> // Symbolise le menu
<li> <a href= »lien »> HOME </a> <li>  // Les éléments du menu <li> dont le titre est entre <a href>  titre </a> )
// <li> <a href= »# »> CATÉGORIE</a> <li> // le lien se met après le href, entre «  »
        <ul> 
                <li> <a href= »lien »> Beauté </a> <li>
                <li> <a href= »lien »> Mode </a> <li> // pour ajouter un élément il faut copier une ligne <li>
                <li> <a href= »lien »> Lifestyle</a> <li>
        </ul>
   </li> // toute cette partie symbolise le « Sous-menu » 
</ul>

 

Si vous avez des questions, n’hésitez pas à me laisser un commentaire ou à me contacter par mail. 

 Des bisous les Ladies ~ Xoxo 

 

 

4 Commentaires

  • Reply Jen Style 21 mars 2017 at 11:50

    c'est rigolo de se voir 😉
    en tout cas tout est clair merci!
    maintenant je pense savoir le faire même si au premier abord sa parait compliqué ^^
    je le mets dans mes favoris
    bisous ma belle <3

    • Reply Aurelie B 21 mars 2017 at 12:42

      De rien ma belle ^^ N'hésite pas si tu as besoin 😉 Des bisous <3

  • Reply Frau Pruno 23 mars 2017 at 13:46

    Bravo pour ce tuto très clair et concis! Je suis sur blogger, alors forcément, ça me parle! Jusqu'à présent, je suivais à la lettre les tutos de Lady Birdr, mais je suis bien contente de voir qu'il y a une autre personne ressource sur la toile!

    • Reply Aurelie B 23 mars 2017 at 14:43

      Merci pour ton passage sur le blog et ton commentaire, ça fait toujours plaisir 🙂 Oui je connais Lady Bird red et je suis bien loin d'arriver à son niveau, mais je suis une passionnée du web et du graphisme, je suis actuellement en licence communication numérique (mais finalement on en apprend davantage seule, qu'en cours). Bref, je vais faire de mon mieux pour vous faire des tutos précis, utiles et agréables ^^ Merci encore pour ton petit commentaire qui m'a vraiment fait très plaisir 😀
      Bises ~

    Laisser un commentaire