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.
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".
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.
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.
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 !
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 :
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 :
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 !
Bonjour Marlène,
Je te remercie pour ce tuto qui a très bien fonctionné, j’ai dû changer de template récemment suite à des bugs sur le précédent mais il y a des choses que je n’arrive pas à modifier.
Par exemple, j’aimerai que ce menu fraichement créé reste toujours fixer où que l’on aille sur le blog, peux-tu m’aider ?
Merci par avance.
Belle journée à toi.
Jessica
Bonjour Jessica, il faut utiliser la propriété CSS « position:fixed » en définissant une marge nulle en haut de page avec « top:0 ». Il y a un tutoriel ici par exemple pour créer ce type de menu.
Bonjour Marlène,
Merci pour le tuto !
J’ai récemment changé de template pour notre site et opté pour une version un peu plus moderne. En revanche je suis embêté car je ne parviens pas à finaliser les choses comme je le souhaiterais…
Je m’explique: le site possède désormais un menu avec 4 rubriques (HOME, RADIO, LIVE SESSIONS et CONTACT) mais je ne sais pas comment « affecter » une page à chaque rubrique en bidouillant le code HTML du thème et notamment les lignes:
<a href=’#’ rel= »nofollow ugc »>Radio</a>
<a href=’#’ rel= »nofollow ugc »>Live Sessions</a>
<a href=’/p/contact-us.html’ rel= »nofollow ugc »>Contact</a>
Par exemple je souhaiterais qu’en cliquant sur RADIO le lecteur soit redirigé vers une page qui intègrerait le code embed de notre radio.
Je souhaiterais également qu’en cliquant sur LIVE SESSIONS le lecteur soit redirigé vers une page qui regrouperait tous les articles dont le libellé est « deux chansons en chaussons ». Si j’ai bien compris, il y aurait une manip à faire avec le lien https://www.gbhmusic.com/search/label/deux%20chansons%20en%20chaussons ?
Et enfin, je souhaiterais qu’en cliquant sur CONTACT le lecteur soit redirigé vers une page où il y aurait mon adresse mail.
Voilà, si jamais vous avez un instant pour m’éclairer, ce serait top !
Merci par avance.
Thomas
Bonjour Thomas, à la place du # du a href, il faut mettre l’URL de la page souhaitée. Et pourquoi mettre les liens en nofollow dans un menu ? Je vous conseille de lire l’article ;)
Bonjour Marlène,
Merci pour votre réponse.
J’ai récemment opté pour un nouveau template qui intégrait déjà ce système de menus, et je pense avoir trouvé la solution en créant une nouvelle page pour la Radio (et en y collant le code embed) ainsi qu’une page pour la rubrique Contact, puis en collant les URL de chacune d’entre elles à la place du #.
Et effectivement le template contenait la mention nofollow, que j’ai bien supprimée… :)
Deux questions complémentaires, si je peux me permettre:
– savez-vous s’il est possible de faire disparaitre le « Affichage des articles dont le libellé est XXXX » pour une page qui regroupe tous les articles portant un libellé défini ?
– comme indiqué j’ai récemment changé de template pour un peu moderniser le site et avec également l’espoir que les articles soient de nouveau indexés par Google. En effet, depuis plusieurs semaines la Google Search Console me renvoie à chaque nouvel article une « Erreur liée à des redirections », qui bloque son process d’indexation.
J’ai beau procéder à la validation des corrections des problèmes concernant la Couverture du site, pour le moment rien n’y fait.
A titre d’exemple, lorsque j’inspecte l’URL https://www.gbhmusic.com/2022/03/agenda-concerts-avril-2022-paris.html, voici le résultat:
Couverture Erreur liée à des redirections
Un utilisateur m’a signalé que mes « URL font une redirection 302 », ce qui ne me parle pas vraiment.
Avez-vous déjà été confrontée à ce genre de problème et avez-vous une idée de ce qui a pu se produire pour en arriver là ?
Jusqu’à présent les articles finissaient toujours par être indexés en quelques jours, mais depuis octobre 2021 déjà neuf articles sont concernés par ce problème.
Merci par avance !
Thomas
Hello Thomas :
– Voici un tuto dédié sur un autre site sur la suppression du message « Affichage des articles dont le libellé est… »
– Concernant les URL, sur le domaine actuel, je ne vois que 19 redirections mais qui concernent toutes des liens sortants (des liens que le site fait vers d’autres sites). L’URL mentionnée est bien en code 200 de mon côté, Google me dit qu’elle est ok pour l’exploration et l’indexation. Tous les libellés ont l’air en revanche d’être bloqués par le robots.txt du site mais ça peut être un choix.
Ça sort du sujet de l’article et je ne peux pas faire une analyse de l’indexation d’un site dans un commentaire, il faudrait creuser les détails de l’erreur avec Search Console et utiliser des techniques d’indexation car il y a pas mal de soucis et lenteurs d’indexation à l’heure actuelle (cf cet article qui en parle).
Bonjour Marlène,
Merci pour les infos.
Je vous ai envoyé un message via le formulaire de contact afin d’échanger si possible plus en détail sur les soucis rencontrés concernant l’indexation de nos articles.
Si jamais vous disposez d’un peu de temps, ça nous serait bien utile !
Merci.
Thomas
Bonjour Marlène,
Il y a longtemps qqn s’occupait de mon blog, et j’avais un menu et des sous-menus, mais je trouvais pas cela joli, donc j’ai viré les sous-rubriques.
J’ai donc voulu réinstaller le menu comme tu l’expliques mais rien ne fonctionne, c’est bizarre.
Bonjour Magali, malheureusement le « rien ne fonctionne » ne m’aide pas vraiment à savoir ce qui ne fonctionne pas ;)
Bonjour Marlène,
Merci pour vos tutos très instructifs. J’ai suivi celui-ci avec attention car cela faisait un moment que je voulais une barre sous mon titre, avec les catégories de mes articles. Je pensais d’ailleurs que mon thème le ferais tout seul car sur la photo de la galerie, on voit que cette barre de menu existe.
Bref, la première partie s’est très bien passée et j’ai obtenu la même chose que ce que vous indiquez dans votre tuto, une liste verticale de toutes mes rubriques.
J’ai donc poursuivi mon aventure codesque pour avoir tout cela à l’horizontale, mais j’ai maintenant des rectangles empilés dans lesquels mes rubriques apparaissent.
Et puis j’ai eu un doute en relisant le tuto. Dans votre avant/après en fin de tuto, les rubriques apparaissent, titre en majuscule dans des rectangles empilés. Me serais-je fourvoyée en pensant que « menu horizontal » signifiait que mes titres allaient être écrits l’un à côté de l’autre dans une barre horizontale comme c’est le cas pour votre blog ? Ou aurais-je fait une fausse manip en copiant-collant mes liens préalablement préparés dans Libre Office au format html ?
Pour trouver ]]> j’ai dû faire dérouler les lignes de code car la recherche ne voulait pas me le trouver, avec ou sans les crochets. Il n’était qu’à la 925 ème ligne (heureusement qu’elles sont numérotées).
Merci d’avance pour votre aide précieuse.
Alors, je viens de me rendre compte que je n’avais pas suivi tout le tuto. En fait j’étais sur celui des libellés, mais comme la première partie concernant le widget est la même, cela m’a induite en erreur. Je viens de copier-coller le code pour mettre tout ça à l’horizontale sur une seule bande mais cela n’a rien changé au problème. J’ai mis juste en-dessous de l’autre (.categories-blog a { …)
Bonjour Marlène, comme je n’arrivais pas à remédier au problème je me suis attaquée au menu déroulant, vous ne trouverez donc plus ce dont je vous parle ci-dessus, inutile d’aller y perdre votre temps. Par contre, je vous ai laissé un message sous l’autre tuto car, si mon menu est bien à l’horizontale, il y a un autre problème à résoudre.
Merci encore pour vos tutos qui aident beaucoup de monde au vu de tous les commentaires.
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.
Bonjour Eglantine, pour créer des rubriques sur Blogger, j’ai écrit tout un article explicatif ici.
Bonjour Marlène, merci beaucoup pour votre réponse.
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
Hello, merci pour le message :)
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
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.
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 !
Merci à toi, j’essaie de continuer à trouver des idées après toutes ces années de blogging ;)
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
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.
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. :)
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.
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
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.
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 ?
Bonjour, l’erreur est souvent provoquée par un espace en trop ajouté au tout début du code !
Çà fonctionne !! Merci pour ta réponse !
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
Hello Vanessa, c’est au niveau de la ligne
nav#menu.menu > ul > li > a {que tu dois ajouter la ligne « font-size » :)ça marche ! merci beaucoup !!
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
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.
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 :)
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.
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.
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.
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.
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 !
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).
Bonjour,
Oui mais ça ne fonctionne pas si je fais plus de rubriques
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 ?
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.
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.
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>lidu 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.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
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
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 » ?
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?
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.
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!
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?
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.
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
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 ?
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.
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.
Hello Stéphanie, je te conseille cet article qui explique comment créer des catégories sur Blogger, il faut utiliser les libellés :)
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.
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.
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
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 :-/
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
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.
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
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 deul.menuliste li aD accord ! Je vais essayer ! Merci beaucoup :)
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 !
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.
Ca marche merci beaucoup pour ta réponse je vais aller regarder tout cela !
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 !
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 :
Les styles qui définissent la mise en forme du menu peuvent être copiés juste après.
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 …
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 ;)
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
Bonjour,
je n’ai pas la rubrique Cross-Column, est ce que cela empeche de faire le menu deroulant ?
Non, du tout ! Les zones peuvent porter des noms différents d’un thème à l’autre.
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.
Mais de rien, merci pour ton commentaire !
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 !
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 ») ?
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 !
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.
Hello, je vois bien un menu horizontal sur ton blog et il ne semble pas renvoyer d’erreur :)
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 !
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 !
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.
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.
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 :-(
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).
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
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 ?
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 ?
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 !
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.
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 :)
Hello, je vois bien un menu entre les deux barres horizontales donc je suppose que tu as réussi…
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
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.
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
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 !
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.
Merci à toi pour ton commentaire, contente que ça fonctionne comme tu l’espérais !
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.
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é.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
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>).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 !
Hello, on dirait que tu as deux menus en fait. Tu en as un qui commence par ce code :
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.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
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.
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 ! ;)
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 !
Bonjour Antoine, pour la répartition des articles en catégories, je te conseille de jeter un oeil à cet article où j’explique comment créer des rubriques sur Blogspot. Pour la bannière, tout dépend de la façon dont le modèle est codé donc je ne peux pas répondre en l’état. Il faut utiliser du code CSS et plus spécifiquement la propriété « margin » comme expliqué sur cette page.
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 !
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.
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…
Le principal, c’est que le problème soit résolu :)
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
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.
Merci beaucoup, j’ai enfin réussi !:) Par contre j’aimerai centrer mon menu. Comment faire ?
Ajouter « text-align: center; » au niveau de ce bout de code :)
Oh super, merci beaucoup pour tes réponses :)
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
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 :)
Bonjour,
Autant pour moi, j’ai changé le nom… Je vous ai mis la bonne adresse ^^
Dans le code je vois cette partie là :
Les personnalisations de design du menu peuvent être copiées juste après l’accolade à la fin de ce bout de code :)
Super merci beaucoup pour votre aide ! :)
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
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.
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.
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 :)
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
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.
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
En fait j’avais mal fermé ma balise, tout va bien!
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 :)
N’hésite pas à regarder la réponse que j’ai donnée à Elsa en enlevant la partie « .beauteenfleursmenu » du code qui est propre à son blog et en la remplaçant par .notuxmenu ou autre nom que tu as donné à cette zone.
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!
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.
Merci beaucoup d’avoir pris le temps de me répondre, Marlène! Je vais de ce pas lire ça !
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 :)
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 ?
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 ..
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 :)
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 :)
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
J’espère que tu vas y arriver !
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
Bonjour, le code a peut-être été mal recopié (mauvais endroit, effacement accidentel d’un petit bout de texte) ?
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
Hello, je ne vois pas de rubrique Escapades en allant sur ton blog… et du coup je ne comprends pas trop la question ;)
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
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 !
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.
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.
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.
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?
Hello Joana, je te conseille la lecture de cet article qui explique comment créer des catégories sur Blogger.
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 :)
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 ulet.tabs-inner .widget li aqui définissent des bordures (« border ») de 1 pixel. Ce même code.tabs-inner .widget li adéfinit aussi un espacement (« padding: .6em 1em; » dans le code).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 !!
Hello, pour créer des « rubriques » il faut utiliser les libellés sur Blogger, j’ai écrit un tutoriel sur le sujet ici : créer des catégories sur Blogger.
Merci beaucoup Marlène !
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 ?
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.
Merci beaucoup !!
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 ?
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 !ç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
C’est bon j’ai trouvé. Ne tiens pas en compte ma question. Encore un grand merci pour ton aide
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 !!!
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 :)
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
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.
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
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
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 ?
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
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.
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 ? :)
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 »).
Dites-moi comment mettre la couleur du fond du menu horizontal en noir et les listes en blanc? Comment selectionner le background-color ? Merci !
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.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.
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
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 ;)
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 !
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 :)
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 :
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 :)
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 !
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.
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…
Oui, c’est bien ça ! Pour créer des rubriques, il faut se servir des libellés, j’avais fait un article sur le sujet : Comment créer des catégories sur Blogger ?. Bonne fin d’après-midi !
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.
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 ».merci, je suis passée en mode « plus facile » avec juste de lettre et ca fonctionne. Merci pour ton aide
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.
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 :)
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
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.
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
Ç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…
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
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 !
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 :)
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.
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
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.
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
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 :)
Merci, bonne année!!!
J’ai hâte de continuer!
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
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 » :)Donc je dois mettre ce code HTML avec le design dans quel partie de mon html? (enfin a quelle ligne/avant quelle ligne ?)
C’est expliqué dans le tutoriel (étape 1), ça se place dans un widget ;)
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 »
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… :)
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 :)
De rien ! Au moins tu auras un tuto sous le coude si tu en as besoin :)
Merci beaucoup pour ce tuto je cherchais justement comment faire depuis quelques jours :-) tes explications sont toujours très claires, merci !
De rien, ça me fait plaisir de pouvoir aider :)
Merci pour cette article!!! Je me penche dessus dès ce week end!! :)
J’espère que tu vas y arriver !
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
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 ».
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 …
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 !