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 Blogger

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.

Listez le contenu du menu Blogger

Avant de commencer le tuto, je vous conseille de lister les liens que vous aimeriez faire apparaître dans votre menu… et éventuellement de créer des rubriques sur Blogger si vous n’en avez pas encore.

Ajouter un gadget à l’emplacement souhaité

Dans cet exemple, je vais cliquer sur « Ajouter un gadget », puis choisir le gadget « HTML/JavaScript ».

Ajouter un gadget HTML/Javascript à Blogger

Une fois le gadget ajouté (sans aucun paramètre dedans pour l’instant), vous allez le faire glisser vers la zone où doit apparaître votre menu horizontal. Par exemple, dans le thème de mon exemple, il y a une zone située juste sous l’en-tête du blog, intitulée « Liste des pages (en haut) », qui serait parfaite pour ajouter un menu.

Zone de menu sur Blogger
Zone de menu sur Blogger

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.

A ce stade du tuto, vous disposez maintenant d’un espace pour ajouter le code qui va afficher le menu horizontal.

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="ntmenu"><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 https://). Ces liens peuvent mener à des pages, à des articles ou tout simplement à des rubriques si vous en avez créé.
  • 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 « monblog.blogspot.fr » ait :

  • Une rubrique « Photo », créée grâce au libellé « Photo » : le lien sera https://monblog.blogspot.fr/search/label/Photo.
  • Une rubrique « Design », créée grâce au libellé « Design » : même structure, le lien sera https://monblog.blogspot.fr/search/label/Design.
  • Une page A propos dont le lien est https://monblog.blogspot.fr/2021/11/a-propos.html (ouvrez la page sur votre blog et copiez-collez simplement l’adresse qui s’affiche dans votre navigateur !).
  • Un compte Instagram à l’adresse https://www.instagram.com/monblog.

Si vous voulez mettre tout ça dans un menu horizontal sur Blogger en suivant mon exemple, cela va donner ce genre de code à copier-coller dans le gadget HTML/JavaScript :

<div class="ntmenu"><ul class="menuliste">
<li><a href="https://monblog.blogspot.fr/search/label/Photo">Photo</a></li>
<li><a href="https://monblog.blogspot.fr/search/label/Design">Design</a></li>
<li><a href="https://monblog.blogspot.fr/2021/11/a-propos.html">A propos</a></li>
<li><a href="https://www.instagram.com/monblog" 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.

Notez qu’il n’est pas utile de donner un titre à votre gadget. Un menu horizontal n’est généralement pas surmonté d’un titre.

Gadget HTML JavaScript du menu
Gadget HTML JavaScript du menu

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 « Personnaliser » puis 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
---------------------------------------------- */ 
.ntmenu {
  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

J’ai mis des petits commentaires dans le code qui permettent de savoir à quoi correspond chaque ligne, histoire de vous faciliter la tâche si vous voulez modifier le code. Vous pouvez personnaliser les couleurs par exemple, sachant qu’en codage HTML les couleurs sont notées en « notation hexadécimale » : autrement dit, elles sont remplacées par un code à 6 lettres et/ou chiffres.

Par exemple, #000000 désigne le noir, #FFFFFF désigne le blanc. Pour trouver le code 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 e-mail 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.

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

  • eglantine

    Bonjour,
    Merci beaucoup pour cet article. Je souhaiterais savoir comment est ce qu’on peut publier des articles dans les différentes catégories du menu, s’il vous plait.
    Je vous remercie d’avance.

    Répondre à eglantine
  • Lieven

    Hello,
    Pour moi qui démarre de très très loin, voici un tuto comme je les aime
    Bon y a plus qu’à faire les liens ;) et peut être centrer ce menu
    Au départ j’ai fait la même erreur que Marlène un peu plus bas , mais dès que j’ai compris tout est rentré dans l’ordre
    Merci bcp
    Merci beaucoup

    Répondre à Lieven
  • Biscotti

    Coucou, tout d’abord merci tous ces conseils, j’avais déjà réussi à utiliser cette technique pour un autre blog, mais cela semble fonctionner moins bien sur celui que je suis en train de créer. Est ce que ça provient tout simplement des 5 rubriques en horizontal ? Dois je rester à 4 pour que tout s’affiche de version horizontale ? Merci infiniment pour ton retour. Je suis en train de devenir complètement chèvre haha

    Répondre à Biscotti
    • Marlène

      Hello, peut-être que le thème utilisé influe sur le menu, je n’ai malheureusement pas le temps d’analyser le code de chacun de manière individuelle.

      Répondre à Marlène
  • Jean-Jacques

    Bonjour Marlène,
    Je ne vais pas te dire merci à chacun de tes articles, mais il reste que ton blog est un puits d’informations capitales et… compréhensibles.
    Bravo !

    Répondre à Jean-Jacques
    • Marlène

      Merci à toi, j’essaie de continuer à trouver des idées après toutes ces années de blogging ;)

      Répondre à Marlène
  • Marco

    Bonjour Marlène,
    Je suis en train de faire un nouveau blog, et grâce à tes indications, j’ai crée un menu horizontal. En revanche, je n’arrive pas du tout à le personnaliser. J’ai copié (je pense au bon endroit) ton script prévu à cet effet, mais malgré tous mes essais, rien ne change.
    Je souhaiterais y mettre un fond gris, les textes noir et en gras, et bien entendu le centrer par rapport à l’entête.
    Si tu pouvais me dire ce qui cloche et ce que je dois faire pour effectuer ces modifications tu me sauverai pour la deuxième fois ( tu l’as déjà fait il y a quelque temps pour un autre de mes blogs :-) )
    Encore mille mercis pour ton aide et pour ton site bourré d’informations précieuses.
    Bonne journée

    Répondre à Marco
    • Marlène

      Hello, si les conseils que je donne dans le tutoriel pour personnaliser l’apparence ne suffisent pas, c’est peut-être que des éléments du design actuel « supplantent » les personnalisations effectuées sur le menu. Par exemple, le thème définit une certaine mise en forme qui prend le dessus sur celle que tu personnalises. On peut le contourner mais il faut étudier le code du site pour comprendre ce qui bloque.

      Répondre à Marlène
  • 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
  • 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
  • Aurélia

    Bonjour,

    Après avoir pris un peu de repos et relu avec attention votre auto, ça y est, j’ai mon menu ! Donc, merci beaucoup ! Par contre, lorsque je clique sur une rubriques, j’ai une page grise qui s’affiche : « Safari ne parvient pas à trouver le serveur ».
    Je précise que pour l’instant je travaille sur un blog « test ». Il n’y a pas encore d’article, je me contente de « bidouiller »…
    Pouvez-vous m’aiguiller ? Merci d’avance !

    Répondre à Aurélia
    • Marlène

      C’est très probablement parce qu’il y a une erreur sur le lien indiqué et qu’il mène à une page qui n’existe pas. Sans l’adresse du blog, je ne peux malheureusement pas en dire plus. Il faut simplement corriger le lien indiqué dans le menu.

      Répondre à Marlène
    • Aurélia

      Finalement, c’est toujours la même histoire pour les personnes qui comme moi s’emmêlent les pinceaux avec les codes…. Après vérification, le problème venait bien d’une erreur de retranscription…. Merci encore pour votre blog qui devrait être déclaré d’utilité publique…

      Répondre à Aurélia
    • Marlène

      Le principal, c’est que le problème soit résolu :)

      Répondre à Marlène
  • Aurélia

    Bonjour,

    Comment fait-on lorsque le modèle affiche un « cross-column 2 » mais pas de « cross-column » tout cours au même endroit que dans votre exemple ?
    Merci d’avance pour vos conseils.
    Aurélia

    Répondre à Aurélia
    • Marlène

      Hello Aurélia, j’ai vu que le problème était résolu entre-temps mais si jamais quelqu’un d’autre se pose la question, il faut savoir que le nom indiqué peut varier d’un modèle Blogger à un autre, ça n’a donc pas d’importance si ce n’est pas rigoureusement le même nom qui apparaît.

      Répondre à Marlène
  • Apolline

    Merci beaucoup, j’ai enfin réussi !:) Par contre j’aimerai centrer mon menu. Comment faire ?

    Répondre à Apolline
    • Marlène

      Ajouter « text-align: center; » au niveau de ce bout de code :)

      .notuxmenu {
          width: 100%;
          text-align: center;
      }
      Répondre à Marlène
    • Apolline

      Oh super, merci beaucoup pour tes réponses :)

      Répondre à Apolline
  • Apolline

    Bonjour,
    Quand j’arrive à « Personnaliser le design du menu », je fais comme indiqué mais impossible de trouver dans le code html… Pouvez-vous m’aider ?
    Merci :)
    Apolline

    Répondre à Apolline
    • Marlène

      Quand je tape l’adresse du blog j’ai un message disant qu’il a été supprimé donc je ne peux malheureusement pas aider beaucoup :)

      Répondre à Marlène
    • Apolline

      Bonjour,
      Autant pour moi, j’ai changé le nom… Je vous ai mis la bonne adresse ^^

      Répondre à Apolline
    • Marlène

      Dans le code je vois cette partie là :

      .PopularPosts .widget-content ul li {
        padding: 0.3em 0;
      }

      Les personnalisations de design du menu peuvent être copiées juste après l’accolade à la fin de ce bout de code :)

      Répondre à Marlène
    • Apolline

      Super merci beaucoup pour votre aide ! :)

      Répondre à Apolline
  • Jane

    Bonjour,
    Pour simplifier la lecture de mon site, je voudrais faire des sous-catégories via des menus déroulants. J’ai créé ces catégories à partir de l’insertion de pages. Les onglets sont trop nombreux et je voudrais regrouper plusieurs pages sous un même onglet.
    Je ne trouve pas l’endroit où faire les modifications. Si c’est dans « modifier le modèle » puis « modifier le code HTML ». Comment retrouver l’endroit et comment intervenir ?
    Par ailleurs, les pages que je souhaite restructurer en sous-catégories sont déjà alimentées par des photos. Comment transférer ce contenu dans les sous-catégories (si j’arrive à les créer).
    Merci à l’avance

    Répondre à Jane
    • Marlène

      Bonjour, il y a un autre tutoriel sur le blog qui t’aidera peut-être concernant la création d’un menu déroulant.

      Pour la création de catégories, mieux vaut utiliser le format article que le format page. Tu peux ainsi associer un libellé à plusieurs articles pour les regrouper sous un même intitulé. Je pense que j’opterais donc pour la copie du contenu des pages dans des articles avec une redirection de l’ancienne adresse (celle de la page) vers la nouvelle (celle de l’article) histoire de ne pas perdre le référencement existant.

      Répondre à Marlène
  • Mabélie

    Bonjour,
    Alors moi, j’ai un sacré problème! Si quelqu’un pouvait avoir la solution ça serait top!!!
    Depuis quelques jours, lorsque je suis un tuto de modification du code html (car je suis vraiment novice en matière de blog…), cela ne modifie pas mon blog. Par exemple, pour ce tuto que j’ai suivi à la lettre, j’ai bien un menu horizontal (car ca c’est le gadget) mais cela apparaît comme ceci:

    AccueilLesCheveuxLes ToposRevues de ProduitsLes Soins

    Et ceci n’est qu’un exemple. A chaque fois que je fais des modif dans le HTML ca ne les prend pas en compte sur le Blog!!
    Sauriez-vous m’aider car ca me pose vraiment problème!!

    Merci d’avance.

    Répondre à Mabélie
    • Marlène

      Bonjour Mabélie le problème si tu as multiplié les tutoriels, c’est qu’il va être difficile aujourd’hui de retrouver la source du problème, la modification qui a « déréglé » ton blog.

      Pour le menu en l’occurrence, ce n’est visiblement pas un problème de HTML puisque les liens s’affichent bien. C’est plutôt un problème de mise en forme et je ne vois pas du tout dans ton code la partie « design » dont je parle dans le tutoriel. Il est donc normal que l’affichage soit ce qu’il est actuellement car il te manque toute la partie « mise en forme » qui permet par exemple d’espacer les liens, de modifier leur couleur ou de mettre le texte en majuscules. Tu as dû oublier de recopier toute cette partie du code car je ne la vois pas du tout dans le code de ton blog.

      Je pense qu’à ta place, je repartirais sur un design « propre » et vierge de toute modification histoire d’avoir une bonne base avant de te lancer dans un tutoriel. Je te conseille aussi de commencer par un tutoriel sur lequel tu peux recevoir de l’aide. Ça t’évitera de multiplier les tutos avec le risque de « cumuler les erreurs » d’un tuto à l’autre.

      Tu en suis un, tu le termines et tu vérifies que ça fonctionne comme prévu… et seulement ensuite, tu te lances dans un autre :)

      Répondre à Marlène
  • Karine

    Bonjour Marlène!
    J’ai enfin réussi!!
    En fait, ça ne fonctionnait pas parce que j’avais mis l’adresse du blog redirigé. En fait, il ne faut pas utiliser l’adresse redirigée, mais bien celle blogspot.com (ou fr).

    J’ai copié le code dans un doc word pour l’instant, pour me le garder sous le coude: j’ai fait mon menu avec des pages et dans chaque page, j’ajoute manuellement les liens (pas top et pas esthétique, j’en conviens…), mais je me suis aussi servi de ces pages pour faire des sous-rubriques… Une idée pour améliorer le tout?

    Merci Marlène en tout cas: tes tutos sont hyper clairs… ce sont ceux qui ont les mains sur le clavier (enfin surtout moi!) qui ne sont pas toujours au top :-)

    Karine

    Répondre à Karine
    • Marlène

      L’idée des pages est plutôt bonne, d’ailleurs je m’étais même posé la question de fonctionner comme ça sur mon propre blog, pourtant sous WordPress et donc bien plus facile à gérer en termes de menus/rubriques/sous-rubriques. En référencement ça permet d’avoir ce qu’on appelle des « landing pages » (= page thématique bien optimisée sur un sujet, sur laquelle les visiteurs peuvent « tomber » et avoir accès à d’autres ressources). J’ai au final opté pour un choix différent mais je trouve ça intéressant de proposer un regroupement d’articles que tu personnalises au final pour tes lecteurs.

      Répondre à Marlène
  • Maélys

    Bonjour,
    Tuto très utile et efficace, merci! En revanche, j’aimerais un menu avec 7 catégories mais seulement 4 se retrouvent dans la barre horizontale, le reste reste en liste. Que faire?

    Maélys

    Répondre à Maélys
  • Zoé

    Merci pour ce super tuto ! j’ai enfin reussi ! mais j’aurais aimer savoir comment centrer le menu (horizontal) Car il est tout a gauche de ma page.
    Merci beaucoup :)

    Répondre à Zoé
  • Escarpins et Marmelade

    Bonjour et merci pour ce tuto très clair et bien expliqué!

    J’avais réussi à créer un menu horizontal et à fixer la barre de navigation en haut de mon blog, ce qui fait très joli. Le problème c’est que je n’arrive pas à supprimer ce menu sur ma version mobile, et du coup, c’est affreux! Comment faire pour supprimer un menu sur la version mobile? Je ne sais pas si je suis claire…. Merci en tous cas!

    Répondre à Escarpins
    • Marlène

      En général, le plus simple est d’utiliser les media queries. Ce sont des conditions que l’on pose dans le code CSS du menu… et via lesquelles on peut décider d’afficher le menu ou pas selon la taille de l’écran. C’est comme ça que je fonctionne sur mon blog.

      Pour tous les écrans > une valeur de ton choix => tu mets le code CSS du menu.
      Pour tous les écrans < à cette valeur => tu mets un paramètre du type « display:none; » qui permet de masquer le menu… ou alors un code différent qui permet d’adapter la mise en forme du menu à la taille d’un écran de smartphone.

      Tu peux trouver un cours sur le sujet sur Alsacréations par exemple.

      Répondre à Marlène
    • Escarpins et Marmelade

      Merci beaucoup d’avoir pris le temps de me répondre, Marlène! Je vais de ce pas lire ça !

      Répondre à Escarpins
  • Galarixy

    Bonjour, je ne sais pas si l’article est toujours d’actualité mais je tente ma chance quand même ^^
    L’article est vraiment super mais malgré les détails je ne parviens pas a modifier mon code HTLM correctement alors que j’ai suivis les étapes a la lettre.. je suis vraiment perdu, merci de ton aide :)

    Répondre à Galarixy
    • Marlène

      Bonjour, sans aucune précision je ne peux pas vraiment aider… Qu’est-ce qui ne marche pas ? Qu’est-ce qui s’affiche/ne s’affiche pas ? A quelle étape ça bloque ? Sur quel blog ?

      Répondre à Marlène
    • Galarixy

      Merci pour ta réponse, Sur le blog : http://galarixi.blogspot.fr/ , une fois que j’ai créer mes catégories et copie le code pour changer la mise en page rien ne bouge, je ne sais pas si c’est normal ..

      Répondre à Galarixy
    • Marlène

      Bon, tu me dis que tu as suivi le tuto à la lettre… mais moi je vois des petites erreurs ;)
      1/ Déjà, tu n’as pas recopié le code en entier (il y a un bout ul.menuliste li a:hover { mais l’accolade n’est pas fermée et il manque toute la fin).
      2/ Les liens de chaque élément de menu comportent des erreurs (tu as un espace après le http: par exemple).
      3/ Le code HTML présent sur ton blog est différent de celui que je donne dans l’article. Il n’y a pas la partie <div class="notuxmenu"><ul class="menuliste"> par exemple… donc forcément, quand tu définis des règles de mise en forme censées s’appliquer à la partie intitulée « menuliste » ou « notuxmenu » mais que cette partie n’existe pas dans le code… eh bien il n’y a pas de mise en forme :)

      En fait, il faut bien comprendre que c’est une interaction entre 2 bouts de code : le code CSS parle au code HTML. C’est comme s’il interpellait un élève dans la cour de récré en lui disant « Edmond-Robert, remets ton pull jaune ». Si l’élève Edmond-Robert est sourd, il ne va jamais recevoir l’information. Si ton code CSS indique une règle de mise en forme pour une liste qui s’appelle « menuliste » mais que dans ton HTML, la liste n’a pas de nom, elle ne va pas savoir comment se mettre en forme. Je ne sais pas si ça clarifie les choses :)

      Il faut aussi savoir que le code existant de ton modèle définit déjà des règles d’affichage de certains éléments (marges, etc)… donc il se peut que certaines règles déjà existantes supplantent celles du menu. Mais déjà, corrige les erreurs existantes pour partir sur une bonne base :)

      Répondre à Marlène
    • Galarixy

      Je te remercie ÉNORMÉMENT pour toutes tes explications et effectivement j’étais un petit peu à coté de la plaque .. ^^ Je vais essayer de corriger tous ça maintenant :)

      Je te remercie encore pour ton aide, et ton blog et vraiment super !
      Bonne journée :)

      Répondre à Galarixy
  • Mimi

    Bonjour !!

    Je vais tester comme ça, ça paraît si simple, je suis dessus depuis plus d’1 mois, je n’ai pas reussi, grrr

    Répondre à Mimi
  • lablogeuse

    bonjour, pour l’étape 2 quand j’essaie d’entre le code html j’arrive pas a l’enregistrer c’est écrit  » Erreur d’analyse XML, ligne 16, colonne 79: Le nom de l’entité doit suivre immédiatement le ‘&’ dans la référence de l’entité  » aider moi

    Répondre à lablogeuse
    • Marlène

      Bonjour, le code a peut-être été mal recopié (mauvais endroit, effacement accidentel d’un petit bout de texte) ?

      Répondre à Marlène
  • Elisa

    Hello, ton tuto est super ,après plusieurs essais sur différents blogs, le seul qui marche c’est bien le tien et je t’en remercie , tes explications sont nettes, claires et précises ^^
    Tout marche à merveille, sauf ma rubrique « Escapades » où mes articles veulent pas s’y insérer, quand je clique sur escapades dans ma rubrique aucun article ne s’affiche alors que tous les articles que je veux dans cette rubrique ont bien le libellé escapades. J’ai regardé mes codes html, je vois aucune faute pourtant…
    Merci

    Elisa

    Répondre à Elisa
    • Marlène

      Hello, je ne vois pas de rubrique Escapades en allant sur ton blog… et du coup je ne comprends pas trop la question ;)

      Répondre à Marlène
    • Elisa

      Hello,
      j’ai finalement changer avec voyages et tout a remarché finalement. . ^^ je te remercie encore pour tes tutos et tes réponses rapides =)

      Elisa

      Répondre à Elisa
  • Sunna

    bonjour, merci pour cette article qui ma permis de créer un menu. j’ai créer mon blog il y a 2 mois et je n’ sais pas encore comme blogger fonctionne :/… j’ai un problème avec l’étape 2, je ne sais pas exactement ou placer le code html, la ligne s’affiche comme sa :

    Help me Please….merci !

    Répondre à Sunna
    • Marlène

      Bonjour Sunna, l’insertion de code dans les commentaires est bloquée pour éviter le piratage. Il faut copier le code de l’étape 2 avant la ligne </b:skin>, je donne un exemple dans l’article.

      Répondre à Marlène
    • Sunna

      Merci beaucoup, enfaite j’avais peur de le copier coller alors j’ai préféré attendre ta réponse plutôt que faire n’importe quoi. j’ai 2 lignes avec le mot du coup j’étais un peux perdu mais je vais copier tout mon code pour ne pas faire d’erreur, je vais essayé sa devrais marcher… tes tuto sont très bien expliquer ! Merci encore.

      Répondre à Sunna
    • Marlène

      Merci ! Bon réflexe de penser à copier tout ton code, on ne sait jamais. Même avec de l’expérience, une erreur est vite arrivée et parfois, il suffit d’un point-virgule oublié pour que ça plante. Au moins, en ayant sauvegardé tu peux tout de suite remettre en place le modèle d’origine.

      Répondre à Marlène
  • joana

    Bonjour, merci pour ce tuto qui m’a permis de créer un menu sur mon blog.
    En revanche je ne comprends pas comment y classer mes articles!
    Je suis désolé je commence mon blog et je n’y connais rien, pour le moment j’ai mes articles qui se suivent et je souhaiterai les classer par thème, et que l’on puisse donc cliquer sur le thème dans le menu afin d’afficher tous les articles portant sur le même thème.
    Pourriez-vous m’aider?

    Répondre à joana
  • Mad

    Bonjour, alors j’ai essayé ton tuto et l’étape 1 a fonctionné j’ai bien un menu horizontal avec des catégories qui mènent vers les articles et tout et tout, mais l’étape 2 ne semble pas vouloir complètement marcher. Mon menu a toujours des lignes grises autour et l’espace entre chaque lien ne marche pas mais par contre la ligne de code qui permet de mettre en majuscule fonctionne… est ce qu’il y a un problème avec le code ou le modèle? merci d’avance :)

    Répondre à Mad
    • Marlène

      Hello, souvent c’est parce que le code existant de ton modèle « prend le dessus » sur le code ajouté.

      Dans ton cas, tu as d’autres éléments du code de ton modèle qui indiquent qu’il faut ajouter ces lignes grises quand il y a un contenu de type « liste ». Ce sont des bouts de code qui commencent par .section:first-child ul, .tabs-inner .widget ul et .tabs-inner .widget li a qui définissent des bordures (« border ») de 1 pixel. Ce même code .tabs-inner .widget li a définit aussi un espacement (« padding: .6em 1em; » dans le code).

      Répondre à Marlène
  • Shanelle

    Hello, je ne sais pas si la questions a déjà était posée mais comment on fait pour relier ses articles au page(barre de menu) enfaite mes articles se retrouve tous sur une seul page :….. je galère a trouver….merci !!

    Répondre à Shanelle
  • Gloria

    Bonsoir, merci beaucoup pour vos tutos je réussis à tous les coups ! :)
    J’aimerai savoir comment, lorsque l’on a fini de créer ses catégories, on fait pour qu’en allant dessus on n’ait qu’un extrait de l’article et non l’article en entier ?

    Répondre à Gloria
    • Marlène

      Bonjour Gloria, pour qu’il n’y ait qu’un extrait affiché, il faut que l’article comporte un lien « Lire la suite ». Quand tu écris ton article, c’est ce que Blogger appelle un « marqueur d’expansion » (icône située à droite de l’icône « Insérer une vidéo »). Il faut insérer ce marqueur après ton introduction.

      Répondre à Marlène
    • Gloria

      Merci beaucoup !!

      Répondre à Gloria
  • Chabookine

    Je viens d’ouvrir un blog et j’ai un problème avec l’étape 2. La 1 a fonctionné par contre je ne trouve pas la ligne même en faisant Ctrl F il ne le trouve pas. Je ne peux donc pas avoir un menu horizontale. Mon design de blog vient de http://gooyaabitemplates.com/free-blogger-templates/ je ne sais pas si ça a un rapport. Avez-vous une solution ?

    Répondre à Chabookine
    • Marlène

      Bonjour Chabookine, tu peux essayer d’insérer le code avant </style>. La partie qui se situe entre <style> et </style> contrôle l’apparence de ton blog. Si tu y places les éléments qui contrôlent l’apparence de ton menu, ça devrait régler ton problème !

      Répondre à Marlène
    • Chabookine

      ça fonctionne ! un grand merci à toi ! par contre, serait-il possible que les noms du menu soit plus espacer et au milieu parce que si tu regardes sur mon blog, c’est un peu vers la gauche

      Répondre à Chabookine
    • Chabookine

      C’est bon j’ai trouvé. Ne tiens pas en compte ma question. Encore un grand merci pour ton aide

      Répondre à Chabookine
  • Menand Anne

    Merci pour cet article qui m’a permis de réaliser mon menu facilement alors que je commence juste mon blog…. Juste une petite question, quelle ligne de code faut-il ajouter pour augmenter la police ? Pour l’instant mon menu est tout petit…
    Je pense que je vais passer beaucoup de temps sur votre site dans les prochains jours !!!

    Répondre à Menand
    • Marlène

      Bonjour Anne, il faut ajouter cette ligne à l’intérieur des accolades « ul.menuliste li a {} » :
      font-size:XXpx;
      Et vous remplacez XX par la taille de police souhaitée (par exemple, essayez avec 15px, en fonction de la police d’écriture que vous utilisez ça peut apparaître comme petit ou gros donc il faut ajuster). Sans l’adresse de votre blog, je ne peux pas être plus précise :)

      Répondre à Marlène
  • Léa

    Bonjour,

    Tout d’abord merci pour ce tuto très bien expliqué !

    J’aurais aimé savoir comment il est possible de gérer les espacements entre chaque nom de rubrique, parce que moi tout est a gauche et puis à droite il y a un grand espace et ça fait pas très beau.
    merci pour vos conseils :D

    Léa

    Répondre à Léa
    • Marlène

      Bonjour Léa, visiblement tu as trouvé la solution à ton problème car les noms de rubriques semblent espacés comme il faut. N’hésite pas à m’en dire plus si tu n’es pas satisfaite du résultat actuel.

      Répondre à Marlène
    • Lea

      Oui j’ai réussi, je ne suis pas encore très satisfaite de l’esthétique de mon blog mais pour l’instant je prend mes marques et j’apprends jour après jour et il faut dire que c’est casse tête mais très intéressant

      Lea

      Répondre à Lea
  • valeri

    coucou, tout a bien fonctionner pour moi c’est top mais petite question
    une fois le menu fait, comment classe t’on nos articles dans les menus ?

    merci val

    Répondre à valeri
    • Marlène

      Bonsoir, si tu parles de créer des catégories regroupant plusieurs articles, tu peux lire ce tutoriel : Comment créer des catégories sur Blogger ?

      Répondre à Marlène
    • filimoehala

      Re bonsoir, j’ai créer les rubriques, ça j’ai tout compris nickel , je voudrais simplement classer mes articles dans les rubriques ;
      Les libellés ont il un lien pour le classement des posts via les rubriques ?

      et si les libellés ont un rapport, j’ai créer les libelles supplémentaires mais dans mes rubriques , les posts sont tous pareil alors que certains sont que dans 1 rubrique et je suis obligé de faire affiché tous les post pour les voir
      merci val

      Répondre à filimoehala
    • Marlène

      Bonjour, l’article dont j’ai donné le lien répond justement à ces questions. Il explique comment classer les articles dans une même rubrique, comment récupérer le lien, etc.

      Je suis allée faire un tour sur ton blog et les libellés que tu mets dans ton menu ne correspondent pas à ceux que tu mets dans les articles donc Blogger n’arrive pas à faire le lien :) Par exemple, ton menu renvoie à un libellé « Mes essais – Mes tests » mais dans les articles tu as séparé en « Mes essais » d’un côté, « Mes tests » de l’autre.

      Répondre à Marlène
  • Celine

    Bonjour !
    Je viens de commencer un blog, un style de revue musicale…
    J’ai installé un template, c’est ça? un design hors Blogger, qui vient du site https://gooyaabitemplates.com/free-blogger-templates/

    Seulement, il y a déjà un menu horizontal et des icones pour les réseaux sociaux… Je n’arrive pas à trouver par quel moyen je peux modifier ça ? Je ne trouve rien qui pourrait être ce menu au niveau des gadgets sur la page de mise en page…
    Help ? :)

    Répondre à Celine
    • Marlène

      Bonjour, j’ai l’impression que leurs thèmes sont fournis avec un fichier d’explications, je ne sais pas si c’est le cas de tous mais j’ai téléchargé Amazine et il y a un fichier « Amazine Blogger Template Installation Guide » avec toutes les explications pour modifier le menu (« Main Navigation Menu »).

      Répondre à Marlène
  • Paulin

    Dites-moi comment mettre la couleur du fond du menu horizontal en noir et les listes en blanc? Comment selectionner le background-color ? Merci !

    Répondre à Paulin
    • Marlène

      Bonjour, actuellement sur le menu que vous utilisez il y a déjà un fond via une ligne de code qui ressemble à ça :
      .tabs-inner .widget ul{background:#f5f5f5 url(https://www.blogblog.com/1kt/transparent/tabs_gradient_shade.png) repeat scroll bottom}

      C’est là qu’il faut indiquer .tabs-inner .widget ul{{background-color:#000;} pour avoir un fond noir.

      Ensuite, vous avez un autre endroit avec .tabs-inner .widget li a {color:#992211;} où il faudra remplacer #992211 par #FFF pour que le texte soit blanc.

      Répondre à Marlène
  • Marlène

    Bonjour, je suis désolée mais votre commentaire n’a rien à voir avec le sujet de l’article, je vous conseille de vous tourner plutôt vers un forum dédié au code qui sera plus adapté pour répondre à vos questions. Je ne peux pas écrire un code complet dans un commentaire et pour une seule personne ;) Merci.

    Répondre à Marlène
  • Annelfi

    Merci pour ce tuto et tous les autres.
    Une petite question sur laquelle je m’arrache les cheveux depuis qq jours. Comment centrer ce menu et faire en sorte qu’il prenne toute la largeur de ma page ? Idem pour la banniere….
    Voici mon blog pour visualiser ce que j’aimerai améliorer…
    https://carnetdetunis.blogspot.com/
    merci beaucoup beaucoup

    Répondre à Annelfi
    • Marlène

      Hello, j’ai jeté un œil au code de ton blog, le problème est qu’il y a énormément de choses à modifier car actuellement, la largeur est fixée de manière précise (1300 pixels a priori) et le menu est contenu dans cet élément de 1300 pixels de large. Je ne peux donc pas régler ton souci en une ligne de code ni même en 2 minutes ;)

      Répondre à Marlène
    • Annelfi

      OK, je ne suis pas encore sure de tout comprendre mais cela explique visiblement pourquoi je n’y arrive pas non plus.Merci en tout cas de votre réponse !

      Répondre à Annelfi
    • Elsa

      Bonsoir Annelfi !

      J’ai le même souci que tu avais au sujet du centrage du menu, je vois à ton blog que tu as su le régler, peux-tu m’expliquer ta démarche ?

      Et merci Marlène pour l’article !

      Une bonne soirée à vous :)

      Répondre à Elsa
    • Marlène

      Certains éléments de ton code existant donnent l’instruction d’aligner le menu à gauche… Pour les contrer, j’essaierais d’ajouter ces lignes dans le style CSS :

      .beauteenfleursmenu ul.menuliste li {float:none;display:inline-block;}
      .beauteenfleursmenu ul.menuliste {text-align:center;}
      Répondre à Marlène
    • Elsa

      Ouiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii merci beaucoup beaucoup beaucoup ! Je débute seulement, je ne connais pas grand chose au graphisme (merci Canva et photoshop) et rien du tout en codage, mais j’ai décidé de commencer à apprendre . C’est super chouette que des personnes comme toi orientent les personnes comme moi, qui souhaitent apprendre.

      Merci encore,

      Elsa :)

      Répondre à Elsa
    • Ophélie

      Bonjour !
      Je pense avoir le même soucis, j’ai un menu déroulant et je ne trouve pas le moyen de le centrer, même si je me casse la tête à chercher mais à chaque fois que je touche quelque chose, il y a tout qui se détraque.. Pouvez-vous m’éclairer ? x)

      Avec tous mes remerciements et merci pour ces articles nous aidant beaucoup !

      Répondre à Ophélie
    • Marlène

      Bonjour Ophélie, je veux bien rendre service mais votre problème porte sur un menu déroulant sans aucun rapport avec ce tutoriel, avec un code qui n’est pas le même…

      Ceci dit, le principe est exactement le même que dans la réponse que je donne à Elsa (utilisation du float:none, display:inline-block, etc.), il faut juste l’appliquer au nom des classes CSS de votre propre menu. Par exemple, au lieu du « .beauteenfleursmenu ul.menuliste li » du code d’Elsa, chez vous ça s’appelle ul#cssnav li.

      Répondre à Marlène
  • Christelle

    Merci pour ces explications très claires! Je débute et je suis parvenue à créer mon menu horizontal. J’ai eu quelques difficultés concernant « l’insertion » des articles dans les rubriques du menu comme Karine, mais je pense avoir résolu le problème: il fallait préciser les libellés lors de la rédaction des articles…

    Répondre à Christelle
  • Flo

    Bonjour, merci pour ton Tuto. Cependant j’ai quelque difficulté, tous se passe super bien, j’ai fais catégorie avec les lignes de codes. Les onglets apparaissent bien horizontalement et sont plutôt esthétique. Mais mon problème vient quand je décide de tester sur mon blog, lorsque je clique sur l’onglet, il met notifié : « Aucun article portant le libellé a propos », j’ai revivifié l’orthographe et les façons d’écrire mais je ne trouve pas d’où cette erreur vient. Merci pour ton aide.

    Répondre à Flo
    • Marlène

      Hello Flo, ton lien « A propos » dirige actuellement vers cette adresse : http://lavalisedeflo.blogspot.fr/search/label/a%20propos%22 (il y a d’ailleurs un guillemet en trop à la fin visiblement). Il faut juste que tu remplaces cette adresse par l’adresse de ta page « A propos ».

      Répondre à Marlène
    • Flo

      merci, je suis passée en mode « plus facile » avec juste de lettre et ca fonctionne. Merci pour ton aide

      Répondre à Flo
  • agnès

    Merci beaucoup pour ce tuto très accessible, grâce à toi j’ai mon joli menu!
    Je viens d’ouvrir un blog ici et je sens que je vais venir souvent pour piocher des conseils.

    Répondre à agnès
    • Marlène

      Bravo pour le lancement de ton blog, j’aime bien l’idée d’associer un thème à une pièce. J’ai une copine qui avait lancé un blog sur ce principe il y a quelques années, chaque thématique correspondait à une pièce d’un appartement. Par exemple, le salon était la rubrique où elle recevait des invités. Elle a vite arrêté faute de motivation mais je trouve le concept sympa :)

      Répondre à Marlène
  • Karine

    Allo!
    J’ai créé mon menu en suivant ton tuto… mais les liens ne mènent nulle part. Avant j’avais créé mon menu avec des pages et danc chaque page j’ajoute le nom de l’article avec le lien.

    Mes questions: maintenant que le menu est créé, que faut-il faire pour que l’on voit les différents articles reliés à ce menu? Et comment faire pour que les articles soient présentés de manière plus visuelle?

    Merci!!

    Karine

    Répondre à Karine
    • Marlène

      Bonjour Karine, que veux-tu dire par « présentés de manière plus visuelle » ?

      Concernant le menu, il faut simplement que tu remplaces les liens de l’exemple que je donne par tes propres liens vers les pages de ton choix.

      Répondre à Marlène
    • Karine

      ok, je comprends, donc ça doit forcément mener vers une page.

      Et la page:
      – y a-t-il un moyen pour que les articles d’une même catégorie soient mentionnés automatiquement? Aujourd’hui je colle le titre + le lien vers l’article de chaque nouvel article, ce qui donne au final une liste
      – pourrait-on faire en sorte que ce soit le début de l’article qui apparaisse, comme lorsqu’il est posté?

      Enfin, dernière question: quelle est la différence entre les catégories et le menu? Avec les catégories, quand on clique sur le libellé, ça cumule tous les articles de la même catégorie… mais pas le menu qui mène vers une page… ou alors je suis encore passée à côté de quelque chose… ce qui ne serait pas surprenant à vrai dire ! :-)

      Merci!

      Karine

      Répondre à Karine
    • Marlène

      Ça peut mener vers une page, une catégorie, un article, n’importe quel site de ton choix (réseau social ou autre) :) Tout dépend du lien que tu indiques dans le menu.

      En fait, je ne comprends pas ce que tu cherches à faire car dans un menu, il y a juste plusieurs intitulés… mais ce n’est pas fait pour afficher les derniers articles ou des extraits d’articles :) C’est plutôt fait pour afficher des rubriques ou des pages. Par exemple, sur mon blog, le menu comporte les intitulés « Conseils blogging » (qui renvoie à la catégorie « Conseils blogging ») mais aussi « Contact », qui renvoie à une page avec un formulaire.

      Chaque élément du menu peut mener vers ce que tu veux…

      Répondre à Marlène
  • Karine

    Bonsoir.

    Et merci pour le tuto.

    C’est ma première modification « en code » donc je souhaiterais un petit renseignement.

    Tout à bien fonctionné, je peux survoler en mes élèments de menu en surbrillance etc mais quand je clique dessus, j’obtiens le message suivant : Désolée la page demandée n’existe pas »…

    Je souhaiterais également savoir comment relier un article à un élément de ce menu.

    Merci pour vos réponses, bonne soirée.

    K

    Répondre à Karine
    • Marlène

      Bonjour Karine, sans l’adresse de votre blog, difficile de vous aider. Si vous avez ce message d’erreur, ça signifie que le lien que vous indiquez dans votre menu n’est pas bon (= il ne mène à aucune page) donc vérifiez que vous n’avez pas oublié une lettre dans l’adresse de la page vers laquelle dirige votre élément de menu.

      Pour qu’un élément de menu mène le visiteur à un article, il suffit d’indiquer le lien de l’article en question dans le menu. Regardez dans l’article, j’ai donné un exemple avec un article intitulé « a-propos.html ». Bonne soirée !

      Répondre à Marlène
  • DisdoncDriss...

    Bonjour,

    J’ai choisi un affichage dynamique pour mon blog et je n’ai pas de Header ou de Cross-Column, dois-je passer sur un modèle simple ou y a-t-il un moyen de modifier mon affichage en ajoutant un fichier CSS ?

    Merci par avance :)

    Répondre à DisdoncDriss...
    • Marlène

      Je mentionnais « Cross-Column » uniquement comme exemple :) Il suffit donc de choisir une zone de ton modèle qui te paraît pertinente pour mettre un menu. Et si aucune n’est pertinente, il faut aller travailler directement dans le code du modèle via le menu Modèle > Modifier le code HTML en ciblant la zone où tu veux insérer ton menu.

      Répondre à Marlène
  • patricia ducerf

    Bravo pour vos explications !
    J’ai créé 6 onglets. Par contre j’ai 2 problèmes.
    1/ Mon 2ème onglet intitulé « Formation »
    la page ouverte a le nom « blog-page_18.html » alors que lors de la création de ma page j’avais bien mis le titre « formation »… et je n’arrive pas à renommer le nom de cette page malgré plusieurs essais de suppression et de création à nouveau de la page en question :-(
    2/ Le 6ème onglet apparaît bien sur le menu horizontal mais aucun lien n’apparaît au survol de la souris.. donc impossible de l’ouvrir
    Pourtant il est bien sélectionné dans le gadget crosscol
    merci d’avance de votre aide cdlt patricia

    Répondre à patricia
    • Marlène

      Bonjour Patricia :
      1/ Lorsque vous rédigez l’article, vous avez dans la colonne de droite un intitulé « Lien permanent ». Si vous cliquez dessus, vous allez pouvoir choisir entre « Lien permanent automatique » et « Lien permanent personnalisé ». Le lien permanent personnalisé permet justement de personnaliser l’URL de la page.
      2/ Vous semblez avoir résolu le problème car le sixième lien pointe bien sur une page.

      Répondre à Marlène
  • azranail

    je commence un blog et j’avoue que j’avais un peu peur de tout les codes. je suis pas très douée et en faite, j’aime bien ça. je ferai pas du code toute la journée mais ça passe le temps et c’est fun.
    merci pour les tutos, j’ai mis en pratique le tuto pour les bouton pour les réseaux sociaux (mais je suis allée chercher des boutons sur le net) et celui-ci.
    ça oblige à rester concentrer et à bien réfléchir ^^
    merci

    Répondre à azranail
    • Marlène

      Hello Azranail, félicitations pour cette plongée dans le blogging… c’est un défi sympa à se lancer et on ne peut qu’apprendre des choses au passage ! Bonne année :)

      Répondre à Marlène
    • azranail

      Merci, bonne année!!!
      J’ai hâte de continuer!

      Répondre à azranail
  • JadeMbd

    Alors moi j’ai suivis toutes les étapes mais je pense que mon modèle ne veut pas l’appliquer, j’obtient une colonne de catégories et de sous catégories, je n’arrive vraiment pas à obtenir un modèle horizontale. Quelles modifications doit-on faire lorsque l’on a un blog avec un modèle ThèmeXpose (l’adresse de mon blog est jadesdaily.blogspot.fr )
    NEEEED SOME HELP PLEASEEEE

    Répondre à JadeMbd
    • Marlène

      Hello, je ne vois pas les éléments « menuliste » et « notuxmenu » dans ton code, je vois juste <ul> par exemple mais pas <ul class="menuliste"> comme dans le tuto. Ça expliquerait que ça ne fonctionne pas car à l’heure actuelle, tu as bien ajouté dans ton design la partie concernant le style mais il manque le code HTML qui dit à ton design « voilà quel style donner à cette liste » :)

      Répondre à Marlène
    • JadeMbd

      Donc je dois mettre ce code HTML avec le design dans quel partie de mon html? (enfin a quelle ligne/avant quelle ligne ?)

      Répondre à JadeMbd
    • Marlène

      C’est expliqué dans le tutoriel (étape 1), ça se place dans un widget ;)

      Répondre à Marlène
    • JadeMbd

      J’ai enfin réussi ! Du moins, mon menu est maintenant écrit horizontalement mais j’avais essayé un changement d’HTML grâce à un autre site pour réussir à créer un menu déroulant cependant il ne semble pas correspondre avec le code HTML que vous avez proposé, avez vous une aide à proposer pour la création d’un menu déroulant ? (ce que j’appelle menu déroulant c’est comme sur votre blog où lorsque l’on survole « CONSEILS BLOGGING » on peut tomber sur « Créer son site »,  » Gérer son blog », « Rédaction web/SEO » ou « Community Management »

      Répondre à JadeMbd
    • Marlène

      Je n’ai pas encore fait de tuto sur le sujet, ça viendra sûrement mais je ne sais pas encore quand :) C’est important aujourd’hui de faire un menu déroulant qui réagit bien sur les mobiles parce que ça peut vite tourner à la catastrophe :) Ce moment où le menu se replie avant qu’on ait eu le temps de cliquer, où il déborde de l’écran obligeant à scroller… :)

      Répondre à Marlène
  • Sophasia

    Merci pour cet article qui me servira si jamais je trouve le courage de chambouler mon menu imagé ou si je décide un jour de me lancer dans un nouveau blog.

    J’ai trouvé d’autres tutos mais qui n’étaient pas aussi bien expliqués! Je me garde ton article sous le coude.

    Merci encore pour tes astuces et tes explications. On galère moins quand on débute grâce à toi :)

    Répondre à Sophasia
    • Marlène

      De rien ! Au moins tu auras un tuto sous le coude si tu en as besoin :)

      Répondre à Marlène
  • Cyrielle

    Merci beaucoup pour ce tuto je cherchais justement comment faire depuis quelques jours :-) tes explications sont toujours très claires, merci !

    Répondre à Cyrielle
  • Etteilla

    Merci pour cette article!!! Je me penche dessus dès ce week end!! :)

    Répondre à Etteilla
  • Délia

    Alors c’est drôle, parce que moi j’ai rajouté un menu horizontal (enfin je crois que c’est bien de ça qu’il s’agit hein?) et j’ai pas du tout procédé pareil (mais pour une inculte du html et tout je m’en suis sortie c’est déjà une belle pirouette haha).
    Mais j’suis passée par le gagdet pages et … en fait j’ai oublié comment j’ai fait *bouleeeet*
    Du coup ça m’applique la mise en page du reste de mon blog, niveau personnalisation c’est assez simple du coup, surtout quand on ne touche pas sa bille en code :)
    Si je change de design j’essayerai te technique, merci pour le tuto :D

    Répondre à Délia
    • Marlène

      Ah, tu as peut-être tout simplement créé des liens sur une page, copié le code HTML correspondant à ces liens et collé le code dans un gadget :) C’est vrai qu’on peut faire comme ça. C’est même une méthode très pratique. Le seul inconvénient, c’est que ça t’offre moins de possibilités de personnalisation ensuite car ça ne te permet pas de comprendre « comment fonctionne le code ».

      Répondre à Marlène
    • Délia

      AH oui tout à fait, je n’ai pas touché au code!
      Disons que comme je n’y comprends pas grand chose et que je ne prends pas le temps de me pencher dessus, cette histoire d’harmonisation avec la mise en page du blog m’a bien arrangée :D
      C’est la méthode des feignasses en fait …

      Répondre à Délia
    • Marlène

      Non pas spécialement :) C’est la méthode des gens astucieux ha ha ! Mais elle ne fonctionne pas avec tous les thèmes Blogger. Donc tant que ça marche, il faut en profiter… et quand ça ne marche pas, il faut un plan B !

      Répondre à Marlène


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.