Comment créer un menu horizontal sur Blogger ?


Avoir un menu sur son blog est bien pratique pour mettre en valeur certaines pages (comme la page A propos), présenter ses rubriques et aider les lecteurs à se repérer. Dans ce tutoriel, je vais vous montrer comment créer un menu horizontal simple sur Blogger, où les liens changent de couleur quand on les survole avec la souris.

Pour un menu déroulant responsive, un peu plus complexe, j’ai rédigé un autre tutoriel que vous pouvez aussi consulter si vous recherchez un menu plus sophistiqué.

Pour créer un menu horizontal sur Blogger, ça se passe en deux étapes :

  • D’abord, on crée le code HTML qui permet de définir quels liens contient le menu, quels sont ses intitulés, etc ;
  • Ensuite, on crée le code CSS qui permet de mettre en forme le menu pour que l’affichage soit joli.

Créer un menu horizontal facile sur Blogger

Etape 1 – Créer un menu horizontal

Pour créer un menu sur Blogger, il faut aller dans la rubrique « Mise en page » de votre blog et choisir à quel emplacement vous aller afficher le menu. En général, un menu principal est affiché en haut de page, sous le header, et prend toute la largeur de l’écran.

Ajouter un gadget à l’emplacement souhaité

Dans cet exemple, je vais cliquer sur « Ajouter un gadget » au niveau de la zone qui s’appelle « Cross-Column » parce qu’elle répond exactement à ces critères : elle est sous le header (et au-dessus des articles) et elle prend toute la largeur du blog.

Sur votre thème Blogger, cette zone peut porter un nom différent. Il peut également arriver qu’un thème ne propose pas la possibilité d’ajouter des gadgets.

Créer un menu sur Blogger

Choisissez ensuite comme type de gadget « HTM/Javascript ».

Ajouter un gadget HTML/Javascript à Blogger

Ajouter du code dans ce gadget

Pas la peine de lui donner un titre. Dans la zone intitulée « Contenu », nous allons copier le code qui va afficher les liens de votre menu. Il va se présenter comme ça :

<div class="notuxmenu"><ul class="menuliste">
<li><a href="A">Rubrique 1</a></li>
<li><a href="B">Rubrique 2</a></li>
<li><a href="C">Rubrique 3</a></li>
<li><a href="D">Rubrique 4</a></li>
</ul></div>

Je vous explique ce code :

  • Chaque ligne commençant par <li> et se terminant par </li> correspond à un lien du menu. Autrement dit, si votre menu comporte 7 éléments, il y aura sept lignes comme celles-là. Dans mon exemple, il y a donc 4 éléments de menu (= 4 lignes commençant par <li> et finissant par </li>).
  • Vous devez remplacer les lettres A, B, C et D par des liens (commençant par http://).
  • Les mots « Rubrique 1 », « Rubrique 2 », etc., correspondent aux intitulés de votre menu, ceux que les lecteurs verront.

Par exemple, imaginons que le blog « incroyableblogdereve.blogspot.fr » ait un menu avec une rubrique Photo, une rubrique Design, une page A propos et un lien vers un autre site comme Instagram. Il pourrait se présenter comme ça :

<div class="notuxmenu"><ul class="menuliste">
<li><a href="http://incroyableblogdereve.blogspot.fr/search/label/Photo">Photo</a></li>
<li><a href="http://incroyableblogdereve.blogspot.fr/search/label/Design">Design</a></li>
<li><a href="http://incroyableblogdereve.blogspot.fr/2015/11/a-propos.html">A propos</a></li>
<li><a href="http://www.instagram.com/incroyableblogdereve" target="_blank">Instagram</a></li>
</ul></div>

La partie que j’ai ajoutée en bordeaux permet de faire en sorte que le lien s’ouvre dans un nouvel onglet. C’est utile quand vous envoyez les lecteurs sur un autre site que le vôtre (Instagram dans mon exemple) : le site s’ouvre dans un autre onglet mais les lecteurs ne quittent pas votre blog pour autant.

Au passage, si vous ne savez pas comment créer des catégories sur Blogger, j’ai écrit un tutoriel dédié.

Une fois que le code est inséré, vous pouvez enregistrer le gadget. En fonction du modèle Blogger que vous utilisez, dans certains cas, ce menu va automatiquement adopter une mise en forme horizontale. Si ce n’est pas le cas, il va s’afficher à la verticale, d’une manière pas très esthétique à vrai dire. C’est pour cette raison que nous allons passer à la deuxième étape de ce tutoriel : le design !

Menu vertical sur Blogger

Etape 2 – Personnaliser le design du menu horizontal

Cette fois-ci, les choses se passent dans la rubrique « Thème » de Blogger. Cliquez sur « Modifier le code HTML ». Si vous avez peur de faire une erreur, pensez à faire une copie de tout le code qui s’affiche. Comme ça, vous pourrez facilement la remettre en place en cas de problème et récupérer un blog fonctionnel.

Parmi le code qui s’affiche, cherchez la ligne </b:skin> (n’hésitez pas à faire Ctrl + F sur PC, ⌘ + F sur Mac puis à entrer la ligne de code dans le champ de recherche). Il faut bien cliquer dans la zone de texte avant de faire la recherche car parfois, certaines parties du code sont masquées par défaut sur Blogger quand on ouvre un thème.

Juste avant la ligne </b:skin>… et avant les doubles crochets, vous allez copier ces lignes :

/* Menu horizontal
---------------------------------------------- */ 
.notuxmenu {
  width:100%;
} 
ul.menuliste li {
  display: inline-block;        /* Permet au menu de s'afficher à l'horizontale */
  padding: 5px 30px;            /* Espace autour de chaque lien (5px en haut et en bas, 30px à gauche et à droite) */
  text-transform: uppercase;    /* Permet de mettre le texte en majuscules */
}	
ul.menuliste li a {
  color: #000000;		/* Affiche les liens du menu en noir */
  text-decoration: none;        /* Evite que les liens soient soulignés */
}
ul.menuliste li a:hover {
  color: #777777;             	/* Les liens du menu deviennent gris quand on les survole */
}

Ça apparaîtra comme ça :

Style du menu horizontal sur Blogger

Vous pouvez personnaliser les couleurs par exemple, en remplaçant #000000 et #777777 par d’autres couleurs. Pour trouver le chiffre qui correspond à la couleur que vous souhaitez, vous pouvez par exemple utiliser ce site : Codes couleur HTML.

Si tout s’est bien passé, vous avez maintenant un menu horizontal sobre et efficace dont les liens s’affichent en noir par défaut et en gris au survol de la souris :

Menu horizontal Blogger

En fonction du design que vous utilisez sur votre blog, ce code peut nécessiter des ajustements pour bien fonctionner. Par exemple, certains templates font disparaître les widgets sur mobile et votre menu risque donc de ne pas s’afficher sur mobile sans quelques modifications du code.

Le menu peut aussi être enrichi en fonction des besoins, pour changer la police d’écriture ou la taille du texte par exemple, toutes les folies sont permises !

J’espère que ce tuto vous aidera !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

211 commentaires sur “Comment créer un menu horizontal sur Blogger ?

  • Laetitia

    Chère Marlène,
    un grand grand merci pour ce blog.J’ai pu faire enfin un menu. Tu expliques super bien et c’est cool.
    J’ai un petit souci et c’est en voulant mettre mon menu de maniere horizontal. J’ai copié et collé ta ligne de code avant les crochets et /b:skin mais ca ne change rien. Dois-je bien laisser le « notuxmenu  » ou le remplacer par le nom de mon blog?
    Enorme merci d’avance pour ton aide. :)

    Répondre à Laetitia
    • Marlène

      Hello Laetitia, tu sembles avoir installé le menu dans la « sidebar » (colonne latérale) de ton blog… et c’est probablement pour ça qu’il se positionne à la verticale. Il faudrait que tu le déplaces dans la même colonne de contenu que le contenu des articles.

      Répondre à Marlène
  • Posidius

    Bonjour j’ai un blog et j’ai du mal à le rendre comme le vôtre. Quand vous y aller, vous êtes directement sur ma page Articles or j’aimerais que ce soit la page Acceuil qui s’affiche en premier

    Répondre à Posidius
    • Marlène

      Hello, mon propre blog est fait avec WordPress. Sur Blogger, on peut avoir une page d’accueil statique en créant une « Page » puis une redirection permanente de l’adresse de la page d’accueil vers l’adresse de cette page statique.

      Répondre à Marlène
  • Cristina

    Merci pour cet article ! Petit problème chez moi, je tentais de modifier le code HTML mais un message d erreur qui s affiche : Erreur d’analyse XML, ligne 3716, colonne 6 : The processing instruction target matching « [xX][mM][lL] » is not allowed

    Des idées ?

    Répondre à Cristina
    • Marlène

      Bonjour, l’erreur est souvent provoquée par un espace en trop ajouté au tout début du code !

      Répondre à Marlène
    • Cristina

      Çà fonctionne !! Merci pour ta réponse !

      Répondre à Cristina
  • Axelle

    C’est encore moi; j’ai finalement trouvé ^^’
    Désolée du dérangement et merci encore pour cet article!

    Répondre à Axelle
  • Axelle

    Bonjour,
    grâce à vous j’ai pu créer le menu… enfin, pas intégralement: les noms des rubriques s’affichent à la verticale dans la sidebar, mais impossible de changer le design car la ligne n’existe pas/n’apparaît pas en HTLM… que pourrais-je faire?
    merci à l’avance

    Répondre à Axelle
  • Vanessa

    Bonjour Marlène,

    j’aimerais savoir comment modifier la taille de la police de mon menu.
    J’ai fais la chose suivante dans :
    ul.menuliste li a {}
    J’ai intégrer :
    font-size:10px;
    et cela ne fonctionne pas, j’ai essayer 10,20,30 et 40 pour essayer de voir une différence mais rien ne se passe…. aurait-tu une solution ?
    merci

    Répondre à Vanessa
    • Marlène

      Hello Vanessa, c’est au niveau de la ligne nav#menu.menu > ul > li > a { que tu dois ajouter la ligne « font-size » :)

      Répondre à Marlène
    • Vanessa

      ça marche ! merci beaucoup !!

      Répondre à Vanessa
  • Cora

    Bonjour,
    je suis tombée sur votre blog et merci infiniment de tous ces conseils . Pour autant, j’ai tenté de faire ce que vous disiez, j’ai du me tromper car ça ne marche pas. ça ne change rien création d’une page « vierge » medias pour avoir en sous rubrique , vidéos et articles.
    alors deux points : mon blog est désormais rattaché à un nom de domaine. et donc le https ne donne pas une ligne blogspot. et dans le cross column je n’ai pas dedans ajouter un « ajouter un gadget  » , il est à part à droite. Merci de votre lumière ! cordialement

    Répondre à Cora
    • Marlène

      Bonjour Cora, je ne suis pas sûre d’avoir compris le problème. Quand on a un nom de domaine, il suffit de mettre son nom de domaine à la place de la partie « monblog.blogspot.com » des adresses. Si la zone pour insérer un gadget ne s’appelle pas pareil, ce n’est pas un problème non plus.

      Répondre à Marlène
  • fanny

    Bonjour,
    J’ai réussi à créer un menu horizontal grace à votre tuto (merci beaucoup , je n’aurai jamais réussi sans )
    Seulement au dessus du menu une ligne en pointillée apparait, et ce n’est pas très esthétique. Comment faire pour la supprimer ?
    Bonne journée :)

    Répondre à fanny
    • Marlène

      Hello Fanny, cette ligne est créée non pas par le tuto mais par ton thème Blogger, qui comporte ce bout de code :
      border-top: dashed 1px #828282;

      Si tu le retires, tu n’auras plus la ligne en pointillés.

      Répondre à Marlène
  • Angelilie

    Bonjour Marlène,
    J’ai réussi à mettre ma barre de menu à l’horizontal au lieu de verticale initialement ;) Mais comme tu peux le voir elle se place sur 2 colonnes. J’aimerais la mettre en haut du blog, sur une ligne, à l’horizontal. Est-ce que c’est possible? Comment faire ? merci pour ton aide.

    Répondre à Angelilie
    • Marlène

      Hello, malheureusement je n’arrive pas du tout à accéder à ton blog, il ne charge pas, j’ai essayé sur Firefox et sur Google Chrome et ça cherche, ça cherche, ça cherche sans m’afficher quoi que ce soit.

      Mais j’imagine que si le menu actuel est sur deux colonnes, ça veut dire que le code actuel le prévoit ainsi, avec un widget qui n’occupe que la moitié de l’écran, et qu’il faut vraiment modifier le code de ton thème Blogger pour changer ça.

      Répondre à Marlène
    • Angelilie

      Merci pour ta réponse. Je comprends pas pourquoi mon blog ne se charge pas de ton côté car moi il fonctionne bien. Cela vient peut-être des boutons de partage flottants que j’ai mis sur mon blog récemment. Je les ai enlevé et remplacé par d’autres plus léger. Je suis pas sur blogger mais sur wordpress.org.

      Répondre à Angelilie
  • Claire

    Bonjour,
    Je n’arrive pas à rajouter des rubriques et que celles-ci s’affichent sur la même ligne que les autres. Même si je n’en rajoute qu’une seule, elle se place en dessous et change pleins de trucs dans ma présentation… Sinon j’ai pensé à simplement centrer mes rubriques (car là elles vont de gauche jusqu’au centre, mais impossible d’en rajouter à droite par exemple) pour que ça soit plus esthétique mais je ne sais pas comment faire.
    En tout cas merci pour cet article qui aide beaucoup de monde je pense !

    Répondre à Claire
    • Marlène

      Bonjour Claire, je ne comprends pas bien le problème en voyant le blog. Il y a bien des rubriques côte à côte (beauté, mode, décoration).

      Répondre à Marlène
    • Claire

      Bonjour,
      Oui mais ça ne fonctionne pas si je fais plus de rubriques

      Répondre à Claire
  • Laura

    Bonjour,
    D’abord merci pour les tutos ils m’ont été très utile. En revanche j’ai un souci car j’ai bien recopié le code mais rien à faire ça ne fonctionne pas pour moi, mon menu refuse de se mettre à l’horizontale… Comment faire ?

    Répondre à Laura
    • Marlène

      Bonjour Laura, j’ai l’impression en regardant ton code que tu n’as pas suivi tout le tutoriel. Je ne vois pas les éléments comme « notuxmenu » mentionnés dans le tuto… donc c’est normal que ton menu n’ait pas la même mise en forme que celui du tuto.

      Répondre à Marlène
  • Angelilie

    Bonjour Marlène,
    J’aimerais changer ma barre de menu qui est actuellement verticale sur mon thème de blog. J’aimerais la mettre à l’horizontal, mais je ne sais pas si cela est faisable. Je suis sur WordPress.com et j’ai accès au CSS de mon blog. Merci pour ton aide.

    Répondre à Angelilie
    • Marlène

      C’est faisable mais il y a plusieurs choses à modifier : en gros, la zone de ton menu occupe une largeur prédéfinie de 30% (c’est la partie intitulée .top-navigation dans ton CSS). Pour mettre le menu à l’horizontale, il faut juste ajouter display: inline-block; à la partie .top-navigation div>ul>li du CSS. Mais du coup, le menu va passer sur deux lignes car il n’a que 30% de la page pour « s’étaler » et ce n’est pas assez vu les éléments que tu mets dedans. Donc il faut aussi modifier la structure du haut de la page pour que le menu ait plus de 30% à sa disposition… sans pour autant passer par-dessus ton logo sur la partie gauche.

      Répondre à Marlène
    • Angelilie

      Merci Marlène pour tous ces conseils. Je vais voir ça dans mon code CSS si je peux apporter une modification au menu vertical. Je pensais que cela n’était pas possible vu la structure initiale de mon thème de blog. C’est le point négatif de mon thème (le menu vertical) Mais c’est vrai que ça lui donne une originalité aussi. Merci. Bonne journée

      Répondre à Angelilie
  • Damia

    Coucou, j’adore ton article tu explique tout et parfaitement, malheureusement pour moi j’ai un léger soucis avec la mise en page j’ai essayer plusieurs thème mais il n’y a toujours pas l’option  »ajouter un gadget » je ne comprend pas car quand j’ajoute une page au menu je n’arrive pas a mettre plusieurs article mais qu’un seule… Je ne sais pas si tu comprend ou je veux en venir. Merci d’avance

    Répondre à Damia
    • Marlène

      Hello, quand tu vas dans le menu « Mise en page » de ton blog et que tu regardes le « schéma » de l’apparence du blog, notamment sur le côté droit, tu ne vois aucun endroit « Ajouter un gadget » ?

      Répondre à Marlène
  • Sophie

    Bonjour, merci beaucoup pour votre tutoriel! Mais je ne sais pas ce qu’il se passe, j’ai essayé plusieurs tuto pour créer un menu horizontal, et il reste vertical quoi que je fasse. Je souhaiterais en fait créer un menu déroulant en haut de ma page et tout ce que j’ai pu faire c’est un menu très basique qui n’est pas vraiment esthétique. Auriez vous un conseil à me donner?

    Répondre à Sophie
    • Marlène

      Bonjour Sophie, j’ai voulu jeter un oeil sur le blog mais je ne vois pas le même code que dans le tuto… et je ne vois donc aucun élément qui indique au menu de se mettre à l’horizontale.

      Répondre à Marlène
    • sophie

      Oui, je ne pouvais pas laisser le blog comme il était (ce n’était vraiment pas joli) donc j’ai tout supprimé. J’ai finalement trouvé une solution plus simple pour faire un menu. Merci pour votre réponse!

      Répondre à sophie
  • Cece

    Bonjour, merci beaucoup pour ton tuto, ça m’a bien aidé
    mais je voulais savoir si c’est normal que le menu s’affiche deux fois?

    Répondre à Cece
    • Marlène

      Non :) J’ai jeté un oeil à ton blog et on dirait que tu as deux widgets différents qui affichent le menu. Soit c’est ton thème qui affiche un même gadget à deux endroits, soit ça signifie que tu as créé deux menus dans deux gadgets distincts.

      Répondre à Marlène
    • Cece

      Merci beaucoup pour ta réponse, en effet le gadget était présent en double et j’ai pu régler ce problème
      Merci beaucoup

      Répondre à Cece
  • shasha

    merci pour cet article très bien expliqué ! seul bémol j’ai un thème telechargé hors blogger (cher up ) mais je trouve seulement b if et non b skin est ce un équivalent ?

    Répondre à shasha
    • Marlène

      Bonjour, non ce n’est pas la même chose. Essaie de chercher le mot « skin » tout seul. Sinon, peut-être que le créateur du thème l’a crypté pour qu’il ne puisse pas être modifié, ça arrive avec les thèmes gratuits pour obliger les gens à acheter la version premium.

      Répondre à Marlène
  • Stéphanie

    Bonjour,
    Je suis en train d’essayer de créer mon blog, avec je l’avoue aucune connaissance en la matière.
    J ‘ai suivi tes conseils pour créer un menu (pas horizontal, mais n’étant vraiment pas douée c’est déjà pas mal), cependant ce que je souhaiterai c’est que en dessous de chaque titre de mon menu apparaisse mes articles. Je m’explique : dans mon menu, j’ai mis : Pâtisserie puis Déco puis Mode puis Beauté. Je suis en train de rédiger un article, plus exactement une recette que je voudrai mettre directement dans Pâtisserie. Comment puis-je faire pour que quand on se positionne sur Pâtisserie et que l’on clique dessus tous les articles concernant cet intitulé s’affichent ? J’espères avoir été explicite. Merci par avance.

    Répondre à Stéphanie
    • Marlène

      Hello Stéphanie, je te conseille cet article qui explique comment créer des catégories sur Blogger, il faut utiliser les libellés :)

      Répondre à Marlène
    • Stéphanie

      Super merci beaucoup ça marche. Par contre impossible d’afficher mon menu en horizontal. J’ai tout fait comme tu dis, j’ai essayé plusieurs fois mais rien n’y fait.

      Répondre à Stéphanie
    • Marlène

      Hello, je vois un menu sur ton blog mais il a l’air déjà complètement intégré à ton thème, avec un design déterminé par ton thème… donc pour le modifier il faudrait le recoder complètement.

      Répondre à Marlène
    • Stéphanie

      Coucou, merci beaucoup. Je vais essayer çà… Y a t-il un article sur ton blog pour m’aider à le faire ? En tout cas, bravo pour tout tes articles qui aident énormément.
      Mille fois merci

      Répondre à Stéphanie
    • Marlène

      Non je n’ai malheureusement pas d’article car c’est propre à ton thème, c’est une modification de design… et comme aucun design n’est codé pareil :-/

      Répondre à Marlène
  • cecile

    Bonjour Marlène!

    merci pour ces tutos qui aident grandement les debutants qui n’ont jamais codé!
    mon probleme est dans l’étape 2; j’ai essayé mais rien ne s’étant passé, j’ai annulé; je pense cependant avoir coupé un bout de code, car quand j’essaye à nouveau il ne me donne plus les lignes que je cherche. Je crois avoir compris pourquoi je n’y arrivais pas mais je ne peux pas revenir en arrière. Je n’ai pas l’impression que cela affecte le blog mais cela ne donne pas ce que je voulais
    pouvez vous m’aider?
    je vous remercie beaucoup

    Répondre à cecile
    • Marlène

      Hello, je vois bien le code et le menu mais je ne sais pas ce que vous cherchez à faire :) Là, le menu s’affiche et suit la mise en forme du thème.

      Répondre à Marlène
    • Cecile

      J essayais de changer des couleurs pour les noms Québec par exemple
      Ce qui m’inquiète c est que je sais que j ai efface quelque chose par erreur
      Si je voulais que les titres de mon menu horizontal soient d une autre couleur j irai dans la balise b/skin ; or la si je veux y aller je ne peux pas ( du moins je crois )
      Je ne suis pas sure d être claire

      Répondre à Cecile
    • Marlène

      On ne peut pas aller à l’intérieur de la balise en question, on écrit le code entre les deux balises b:skin (balise ouvrante, balise fermante). Dans ton thème, il y a une instruction qui ordonne aux liens de se mettre en blanc, elle supplante l’instruction ordonnant au texte de se mettre en noir. Pour que le texte soit bien en noir, il faudrait que tu écrives :
      .widget ul.menuliste li a à la place de ul.menuliste li a

      Répondre à Marlène
    • Cecile

      D accord ! Je vais essayer ! Merci beaucoup :)

      Répondre à Cecile
  • Romane

    Hello ! Merci pour ce tuto ! Ma situation est un peu différente de ce que tu proposes et du coup j’ai du mal à voir ce que je dois copier et surtout où … J’ai déjà fait un menu déroulant et personnalisé pour mon blog mais uniquement adapté pour les ordinateurs. Et je voudrais simplement avoir le code pour faire adapté ce menu aux mobiles. Du coup est ce que tu peux m’indiquer la partie que je dois copier coller et à quel endroit l’introduire dans le code HTML de mon blog ? Je suis novice et j’ai un peu peur de faire une bêtise … Et je me demande si je ne vais pas devoir enlever le code que j’ai fait initialement pour ordinateur ce qui m’embêterai un peu :/
    Merci d’avance !

    Répondre à Romane
    • Marlène

      Bonjour, le code indiqué ici est conçu en fonction de la structure du menu présentée dans le tutoriel… donc ne pourra pas s’appliquer en l’état à ton propre thème. Pour créer des instructions spécifiques selon une taille d’écran, ça se passe dans le CSS et il faut utiliser les media queries, je te conseille ce cours qui explique comment ça fonctionne.

      Répondre à Marlène
    • Romane

      Ca marche merci beaucoup pour ta réponse je vais aller regarder tout cela !

      Répondre à Romane
  • Lahcina

    Bonjour ! Je ne sais pas si votre article est toujours d’actualité mais pour ma part je n’y arrive pas , pourtant j’ai suivit tous vos descriptions à la lettre !
    La première partis a très bien marché mais la deuxième non , le code s’affiche tous en haut de mon écran ! et les menus reste à la vertical…
    En espérant avoir une réponse , merci d’avance !

    Répondre à Lahcina
    • Marlène

      Bonjour, si le code s’affiche à l’écran, c’est qu’il n’a pas été copié au bon endroit dans le thème du blog. S’il est bien copié au niveau de la partie style du thème, il ne doit pas être visible sur la page. Je vois par exemple ce bout de code dans le thème actuel :

      body#layout.rtl .sidebar-container {
      float: right;
      }

      Les styles qui définissent la mise en forme du menu peuvent être copiés juste après.

      Répondre à Marlène
    • Lahcina

      Merci beaucoup de m’avoir répondu si rapidement, cependant je ne vois pas ce que vous voulez dire par partie style du thème ? Personnellement n’ayant pas la même version de blogger que sur l’article je suis allé dans Thème puis Modifier le code HTLM et j’ai ensuite suivit vos instructions …

      Répondre à Lahcina
    • Marlène

      Le code qui définit la mise en forme du menu n’a pas été copié au bon endroit, c’est ce qui explique qu’il n’agisse pas sur le menu et s’affiche à la place sur le blog. Appuyez-vous sur le bout de code donné dans ma première réponse pour vous guider ;)

      Répondre à Marlène
    • Lahcina

      Merci beaucoup de votre aide , malheuresement je n’ai pas réussit du coup j’ai opté pour une autre méthode , même si le résultat n’est pas celui que je voulais j’ai une barre de navigation sobre et classique !
      Merci encore de votre aide

      Répondre à Lahcina
  • amoureuse

    Bonjour,
    je n’ai pas la rubrique Cross-Column, est ce que cela empeche de faire le menu deroulant ?

    Répondre à amoureuse
    • Marlène

      Non, du tout ! Les zones peuvent porter des noms différents d’un thème à l’autre.

      Répondre à Marlène
  • LapinouBleu

    Merci !

    Cet article m’a littéralement sauvée. Grace à ton travail et à tes explications claires j’ai réussi à donner un minimum de forme à mon nouveau blog.
    Encore merci.

    Répondre à LapinouBleu
  • Valérie

    Bonjour Marlène,
    Il y a deux mois, j’ai créé mon blog grâce à vos tutos. Et ça s’est vraiment bien passé. Par contre, j’aimerais ajouter une ou plusieurs rubriques à mon menu et impossible de retrouver le gadget où j’ai mis les codes HTML mentionnés dans votre article ci-dessus. C’est certainement tout bête à trouver, mais voilà ça fait trois jours que je me prends la tête avec ça, sans succès. Un grand merci d’avance pour votre réponse !

    Répondre à Valérie
    • Marlène

      Bonjour Valérie, il faut aller voir dans le menu « Mise en page » de Blogger, c’est sûrement l’un des gadgets qui y figure (ex : « sticky-wrapper ») ?

      Répondre à Marlène
    • Valérie

      Merci beaucoup Marlène pour votre réponse ! J’ai effectivement trouvé et ça a marché. Ca m’a prêté à confusion car je pensais retrouver le format html que j’avais mis à la base. Mais ça va aussi comme ça. Merci pour tout !

      Répondre à Valérie
  • D.

    Coucou. Je me permets de t’envoyer un messages car je tente depuis plus de deux jours de faire un menu horizontal mais j’en suis incapable. Je n’y arrive pas, et quand je tente d’entrer le code, cela me met « Error ». Je désespère. Merci par avance.

    Répondre à D.
    • Marlène

      Hello, je vois bien un menu horizontal sur ton blog et il ne semble pas renvoyer d’erreur :)

      Répondre à Marlène
  • Clémence

    Alors merci beaucoup pour ce tuto, tu m’as sauvé parce que je ne savais pas du tout comment on faisait ! Je viens de commencer mon blog et je suis tombée sur le tien en ayant besoin d’aide et franchement tu vas être mon blog référence pour m’aider !! MERCI !
    Je suis en bille en informatique mais quand c’est détaillé et bien expliqué, comme ton tuto, c’est top !

    Répondre à Clémence
    • Marlène

      Il n’y a pas de billes en informatique, il n’y a que des gens qui ont plein de choses à apprendre ;) On commence tous par être débutants !

      Répondre à Marlène
  • Mirna

    Bonjour,
    1000 merci pour tes tutos. Tu as une approche qui dédramatise toutes ces histoires de code. Heureusement que des blogeuses comme toi existent pour que d’autres blogs puissent vivre. Moi je me suis mise sur la création d’un blog sur blogger hier. J’ai fait la première partie avec succès. J’ai bien une barre de menu avec trois rubriques bien alignées. Maintenant sur la 2éme partie tu dis qu’elle se passe dans la partie « Modèle ». Je ne trouve pas du tout cette partie. :-(
    C’est bien dommage d’être bloquée à cause de cela.

    Répondre à Mirna
    • Mirna

      J’ai trouvé ! Autant pour moi ! Maintenant j’essaie. Ca fait peur tous ces codes on a l’impression qu’on n’y arrivera jamais.

      Répondre à Mirna
    • Mirna

      Bon ben j’ai fait la 2ème partie et ça m’a fait un truc bizarre.
      Premièrement j’ai eu un avertissement de Google qui me disait que si je modifie je sais plus quoi ça fera je sais pas quoi
      Et puis finalement je l’ai quand même fait et ça m’a affiché tout le code en haut au niveau du Nivbar.
      J’étais sur wordpress jusqu’à présent et je suis venue ici parce qu’il faut payer pour stoker une grande quantité de photos sur wordpress. Et j’ai pas fini d’en mettre. Alors on m’a dit que Blogger était plus facile mais avec wordpress je n’ai jamais eu à entrer des codes. Ca me parait hyper complexe de créer un menu sur blogger.
      Je suis démotivée :-(

      Répondre à Mirna
    • Marlène

      Hello, sans l’adresse de ton blog il est malheureusement impossible de t’aider car je n’ai aucune indication sur ce qui a pu échouer (code copié au mauvais endroit, problème lié au modèle Blogger choisi…).

      Pour info, Blogger est aussi limité en capacité mais la limite est plus élevée (15 Go en gratuit).

      Répondre à Marlène
    • Mirna

      Bonjour Marlène,
      En effet, je ne t’avais pas laissé l’adresse du blog car je ne l’ai pas encore ouvert. Pour l’instant je l’ai mis en privé car il n’y a rien dessus mais du coup je l’ai mis en public pour que tu vois. Mais en faite j’ai supprimé les codes que j’avais entré pour la 2ème partie (CSS) car ils s’affichaient clairement au niveau du Navbar.
      Je me demande si je place bien le code à l’endroit où tu le dis. C’est entre et que je dois placer le code ou avant.
      Pour blogger, en effet c’est limité à 15go mais sur wordpress c’est 3 et c’est un blog de pâtisserie en pas à pas que j’ai. Et donc sur wordpress j’atteint déjà les 3go alors que je dois être à une quinzaine d’articles.
      Par contre je trouve que la création du blog est bien plus pratique sur wordpress. Je n’ai eu à entrer aucun code. Même là, je vois que pour insérer un lien facebook c’est tout un truc alors que sur wordpress ça s’est fait en un clic. On m’avait dit que vu que je voulais quelque chose de simple et sur lequel je puisse stocker des photos, blogger serait mieux, mais du coup j’hésite à rester sur wordpress. Qu’en penses tu ?
      Merci pour ton super blog et pour ta réactivité surtout

      Répondre à Mirna
    • Marlène

      Hello, je viens de faire un tour sur ton blog et je vois bien un menu (pâtisserie, boulangerie, cuisine) ? Tu as réussi entre temps ?

      Répondre à Marlène
    • Mirna

      Oui en effet. Mais je n’ai pas fait toute la partie CSS pourtant ?!?
      Est ce que mes menus fonctionnent sans ? J’ai juste à écrire le nom du menu dans le libellé quand je crée un article et c’est bon c’est ça ?

      Répondre à Mirna
    • Marlène

      La quasi totalité des thèmes ont déjà une mise en forme prévue pour certains éléments de menu :) Je ne sais pas comment fonctionne ton thème donc je ne peux pas répondre à ta question !

      Répondre à Marlène
    • Mirna

      J’ai le thème contempo. Mais j’ai l’impression que ça fonctionne.
      Merci beaucoup de m’avoir accordé tout ce temps en tout cas. Je ne sais pas comment tu fais pour répondre à tout le monde. C’est un atout majeur pour faire marcher un blog et ça le rend tellement plus vivant.
      Merci encore.

      Répondre à Mirna
  • Adeline

    Coucou, ton article m’a très bien aidé pour créer mon premier menu tout en haut de mon article. Cependant, j’aurais voulu en créer un deuxième en dessous de mon logo, entre les deux barres horizontale mais je n’y arrive pas… Pourrais-tu m’aider stp ? :)

    Bisous :)

    Répondre à Adeline
    • Marlène

      Hello, je vois bien un menu entre les deux barres horizontales donc je suppose que tu as réussi…

      Répondre à Marlène
  • Emmanuelle Trit-Dubreuil

    Bonjour,
    Peut-on créer à moteur de recherche sur blogger qui prenne en compte les pages et pas seulement les articles ?
    Merci pour votre aide
    Emmanuelle

    Répondre à Emmanuelle
    • Marlène

      Bonjour Emmanuelle, à ma connaissance on peut le faire seulement en créant un moteur de recherche Google personnalisé sur le site car la recherche Blogger par défaut ne le propose pas.

      Répondre à Marlène
    • Emmanuelle Trit-Dubreuil

      Merci bien
      J’ai essayé en faisant un moteur de recherche google personnalisé, mais je ne suis pas très douée, et du coup le moteur de recherche prend en compte les sites internet et pas les pages de mon blog.
      Je pense que je vais annuler le moteur de recherche… mais je vais refaire une autre tentative avant !
      Merci encore
      Emmanuemlle

      Répondre à Emmanuelle
    • Marlène

      Dans le champ « Sites sur lesquels effectuer des recherches », il faut bien penser à mettre l’URL complète de son blog. J’espère que ça fonctionnera !

      Répondre à Marlène
  • Laulia blabla

    Coucou, encore merci pour ce super tuto qui est vraiment ultra simple à réaliser, même pour moi qui suis ultra nul en codage :) En plus je n’ai même pas eu à modifier le code html il m’a suffit de le personnaliser directement dans l’onglet thème, il était déjà horizontal, donc vraiment rien de plus simple. Je te remercie grâce à tes articles mon blog d’améliore de jour en jour.

    Répondre à Laulia
    • Marlène

      Merci à toi pour ton commentaire, contente que ça fonctionne comme tu l’espérais !

      Répondre à Marlène
  • HappyNewMom

    Super tes TUTOS ! J’adore ! par contre je suis embêter avec mon menu ! il se met en quinconce ? tu vois ce que je veux dire ?
    Dans l’attente de te lire.

    Répondre à HappyNewMom
    • Marlène

      Tu as bien fait de mettre le lien de ton blog en signature car je vois tout à fait… et en plus je vois d’où vient le problème ;) Tu as un petit bout de code <br> qui s’est ajouté entre chaque ligne de ton menu (après chaque </li>. Ce code indique qu’il faut aller à la ligne… donc à chaque élément de menu, ça crée un saut de ligne. Si tu supprimes tous ces « br » en trop, ton menu sera bien aligné.

      Répondre à Marlène
    • HappyNewMom

      Oh mais tu es d’une rapidité !
      Action – Reaction
      J’ADORE

      Il me reste plus qu’à retiré à la fin />> mais je ne sais pas où ?!
      Encore merci à toi d’avoir créer les tutos

      Répondre à HappyNewMom
    • Marlène

      Ce sont encore des petits bouts de code qui traînent entre des lignes :)

      Tu as un slash avant la ligne Grossesse (juste avant <li>) et tu as deux signes >, l’un avant la ligne « Test & Avis » et l’autre avant la ligne « Recette » (pareil, juste avant le <li>).

      Répondre à Marlène
  • Milky ♥

    Hello ! jolie Marlène, Je te remercie beaucoup pour tout tes tutos qui m’ont franchement bien aidé et mon blog commence a avoir de la « gueule » ! Concernant ce tuto là je beug grave, j’ai fais comme dans ton post mais rien ne marche… Je ne comprend pas en fait, j’ai beau vérifier la première fois c’est parce que j’avais mal copié, mais là je t’avoue que ça fait 2 heures que je tourne en rond lol J’ai donc crée des pages mais ça ne me convient pas au niveau de la disposition et il faut que je fasse des sous-rubriques. En faut j’ai les deux lol les pages + mes rubriques créées avec le widget html ! Pourrais-tu m’éclairer ? Je t’en remercie beaucoup et à très vite !

    Répondre à Milky
    • Marlène

      Hello, on dirait que tu as deux menus en fait. Tu en as un qui commence par ce code :

      <div class="widget-content">
      <ul>
      <li class="selected"><a href="http://milkyawayofficial.blogspot.fr/">SWEET HOME</a></li>

      Et le deuxième, plus bas, qui est incomplet. Tu as copié un bout de code qui commence par <ul class="categories-blog"> mais il contient des liens en vrac sans utiliser la balise <li>. Si tu regardes dans le tuto, dès qu’on utilise la balise « ul », il y a des lignes « li » à l’intérieur.

      Répondre à Marlène
    • Milky ♥

      Hi jolie Marlène, je vois en fait ce qu’il s’est passé, mais je pense que quelque chose bug car quand je copie le code à l’étape 1 et que je le modifie avec mes propriétés, deux secondes après ça change, Bizarre… Dons voici un petit aperçu : http://milkyawayofficial.blogspot.fr/
      En tout cas merci pour tout ! Je passe à la rubrique menu déroulant… J’avoue que je ne suis pas trop sereine lol ! Merci encore de ta réponse

      Répondre à Milky
    • Marlène

      Le menu déroulant est vraiment un autre tuto qui n’a rien à voir avec celui-ci :) Il est effectivement plus technique. Pour ton histoire de blog qui ne se met pas à jour, c’est peut-être seulement un problème de cache (l’ancienne version du blog est « mise en mémoire » par ton navigateur et ne prend pas tout de suite en compte les modifications). Il faut faire Ctrl + F5 pour recharger la page en vidant le cache au passage.

      Répondre à Marlène
    • Milky ♥

      Hi ! jolie Marlène, mepour tes explications très claires ! Ah voui je n’en doute pas mais même pas peur d’abord LoL ! ;)

      Répondre à Milky
  • Antoine

    Bonjour Marlène et merci pour ce tuto sur le menu horizontal. Comment fais-tu au moment de la rédaction des articles pour qu’ils soient référencés et catalogués dans le bon menu ? Par ailleurs, comment centrer une image dans l’espace réservé à la bannière ? Merci !

    Répondre à Antoine
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.