8 septembre 2018

Tuto : Un menu déroulant pour Blog / Blogger

Le fameux menu déroulant pour votre Blog !


Tuto : Un menu déroulant pour Blog/Blogger

Aujourd'hui je m'attaque à un gros morceau : vous expliquer le plus clairement possible la mise en place d'un menu déroulant en remplacement (ou pas comme dans mon cas) de votre barre de menu fixe fournie par blogger.


Ce tuto est valable pour les blogs sous Blogger. Je n'ai pas la possibilité de tester pour les autres, mais on peut partir du principe que si c'est un blog mode CSS HTML la mise en oeuvre doit être identique ou proche.

Voici ma barre de menu fixe fournie par blogger :

Tuto : Un menu déroulant pour Blog/Blogger


Avec comme vous pouvez le compter 8 rubriques.

Mais avec le temps et l'expansion de mes articles, je ne trouvais plus cette barre suffisante et fonctionnelle pour 3 raisons :

- elle ramène à l'ensemble des articles par libellés d'une façon beaucoup trop générale,
- elle donne une navigation moins fine pour les visiteurs,
- et enfin parce que les gadgets j'adore !

Je me suis donc décidée pour installer un menu déroulant.

J'ai parcouru le net de long en large, fait x essais avec des tutos trouvés, certains ne fonctionnaient pas sur mon blog, d'autres ne me plaisaient pas ou étaient vraiment compliqués.
Après plusieurs jours, plusieurs essais et surtout un arrachage de cheveux réguliers, j'ai réussi à mettre enfin en place mon menu déroulant.

Le modèle que j'ai choisi est basique mais fonctionnel et pour le moment c'est tout ce que je lui demande, le coté esthétique je verrais plus tard pour le coup !

Vous pouvez modifier quelques éléments tout de même pour le personnaliser, les couleurs et la police par exemple.
Tuto : Un menu déroulant pour Blog/Blogger

La première chose à mettre en place ce sont les rubriques et les sous rubriques et le nom que vous souhaitez leur attribuer. Il sera toujours possible d'en rajouter, supprimer, modifier, par la suite selon vos besoins.

Je prends pour plus de clarté pour la suite mon exemple personnel qui se décompose ainsi, rouge les rubriques et mauve les sous rubriques :

- Accueil
- Nos lectures :
           - Index des livres
           - Chroniques
- Articles livresques :
           - Index des articles
           - Articles
- Astuce blogging
           - Index 
           - Astuces blog
- Concours
- Contacts
           - Contacts
           - A propos
           - Partenariats

Je vous conseille d'ouvrir une feuille Word, de noter vos rubriques et sous rubriques, puis de copier les codes que je vais vous donner pour pouvoir les modifier avec vos liens personnels tranquillement et ensuite les coller aux emplacements prévus.

Il vous sera plus facile de travailler ainsi, de revoir votre copie si cela ne fonctionne pas car il n'est pas rare que l'on fasse des erreurs de frappe et lorsque c'est copié dans le bloc HTML c'est beaucoup moins visible et beaucoup plus galère à reprendre donc autant effacer et repartir à zéro parfois.
Vous pourrez ainsi également étaler "votre travail" sur plusieurs jours, tout en gardant un blog fonctionnel.

C'est parti !!!

Après avoir listé toutes vos rubriques, il faut lister tous les liens qui amèneront à ses rubriques.

Je vais utiliser un code en fonction de mes propres rubriques, à vous de le modifier selon vos besoins, supprimer des rubriques, en ajouter, en fonction des codes couleurs, et les associer aux liens qu'elles renvoient (soit des pages, soit des libellés).

C'est une étape où il faudra utiliser votre cerveau à pleine puissance, car au départ le code ainsi donné ressemble à du chinois et le personnaliser parait mission impossible, un peu de gymnastique cérébrale et rien de bien méchant au final.

Attention avant toute manipulation dans le codage HTML penser à sauvegarder votre thème blogger.

Rappel :

rouge : rubrique
mauve : sous rubrique
bleu : lien associé

Quand le code commence par <li class="parent" cela signifie qu'il n'y a qu'une seule rubrique
Quand il commence par <li class="parent sousmenu" c'est qu'il aura des sous rubriques

Toutes les lignes de code sont faites sur le même modèle ouverture et fermeture <li  et </li> et entre chaque s'il y a des sous rubriques encore des ouvertures et des fermetures <ul et </ul> ; Si vous oubliez un seul signe votre code ne fonctionnera pas.

Voici le code dans son intégralité :

<a href="#menu" class="menubtn">MENU</a>
<nav id="menu" class="menu" role="navigation">

<ul>

<li class="parent"><a href="https://lien de la rubrique/">Accueil</a></li>
<li class="parent sousmenu"><a href="#">Nos lectures</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Index livres</a></li>
<li><a href="https://lien de la sous rubrique">Chroniques</a></li>
</ul>
</li>

<li class="parent sousmenu"><a href="#">Articles livresques</a>
<ul class="sousrubrique">
<li><a href="https://https://lien de la rubrique">Index articles</a></li>
<li><a href="https://lien de la rubrique">Articles</a></li>
</ul>
</li>

<li class="parent sousmenu"><a href="#">Astuces blogging</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Index</a></li>
<li><a href="https://lien de la sous rubrique">Astuces blog</a></li>
</ul>
</li>

<li class="parent"><a href="https://lien de la rubrique">Bicolage/deco</a></li>

<li class="parent"><a href="https://lien de la rubrique">Concours</a></li>

<li class="parent sousmenu"><a href="#">Contacts</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Contacts</a></li>
<li><a href="https://lien de la sous rubrique">A propos</a></li>
<li><a href="https://lien de la sous rubrique">Partenariats</a></li>
</ul>
</nav>


Vous copiez collez ce code sur votre page Word et vous le modifiez avec vos propres rubriques et sous rubriques, vous remplacer les liens par vos liens qui renvoient à la bonne page (pages ou libéllés selon, par exemple dans mon cas la rubrique Chroniques renvoie au libellé Livres, c'est à dire que dans cette catégorie vous aurez tous les articles ayant le libélé Livres. Par contre la sous rubrique Index articles renvoie à un lien page unique).

A la suite de ce code, vous ajoutez cette partie sans la modifier, c'est le code JavaScript qui permet la fonctionnalité du menu sur mobile.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menubtn'),
    $menuTrigger = $('.sousmenu > a');

$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('select');
$menu.toggleClass('select');
});

$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('select').next('ul').toggleClass('select');
});

});
</script>

Où coller ce code ? Tout simplement dans un gadget HTML.

Vous allez sur votre tableau de bord, MISE EN PAGE - choisir votre zone de gadget normalement en haut - AJOUTER UN GADGET - choisir le gadget HTML - coller votre code et ENREGISTRER


Tuto : Un menu déroulant pour Blog/Blogger
Voilà vous venez de faire la partie la plus fastidieuse. Soufflez faites une pause !

Maintenant direction la modification du code HTML.

Donc comme d'habitude, pensez à sauvegarder votre thème avant toute modification de celui ci.

Puis vous vous rendez dans le tableau de bord THEME  - MODIFIER
Clic à l'intérieur du cadre CTRL F rechercher la balise : ]]></b:skin> et coller le code juste avant ces deux crochets ]]


Tuto : Un menu déroulant pour Blog/Blogger
Le code dans son intégralité :


/* MENU DEROULANT */
nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;font-size:18px}
nav#menu.menu a:hover {background:#ffffff;}
.menubtn {display:none;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;z-index:99;background:#a9bfd6;}
nav#menu.menu > ul > li > a {text-transform:lowercase;}
/* AFFICHAGE GRAND ECRAN > 501 PX DE LARGE */
@media screen and (min-width : 501px){
nav#menu.menu .parent {position:relative;}
nav#menu.menu > ul > li {display:inline-block;}
nav#menu.menu > ul {text-align:center;}
.sousrubrique{visibility:hidden;position:absolute;top:100%;min-width:160px;left:0;z-index:-1;background:##a9bfd6;opacity:0;text-align:left;transform:translateY(-2em);transition:all .3s ease-in-out 0s,visibility 0s linear .3s,z-index 0s linear 10ms;-moz-box-shadow:3px 3px 5px 0 #656565;-webkit-box-shadow:3px 3px 5px 0 #656565;-o-box-shadow:3px 3px 5px 0 #656565;box-shadow:3px 3px 5px 0 #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=5)}
nav#menu.menu > ul > li > ul > li {float:none;}
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu ul li:hover .sousrubrique{visibility:visible;opacity:1;z-index:1;transform:translateY(0);transition-delay:0s,0s,.3s}
}
/* AFFICHAGE PETIT ECRAN */
@media screen and (max-width : 500px){
a.menubtn {display: inline-block;position: relative;padding: 0.5em 1.9em;text-decoration:none;color:#000;margin-top: 1em;border-radius: 3px;border: 1px solid #CCC;background: #a9bfd6;}
.menubtn:before{content: "";position: absolute;left: 0.5em;top: 0.75em;width: 1em;height: 0.15em;background: white;box-shadow: 0 0.35em 0 0 black,0 0.7em 0 0 black;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;text-transform:uppercase;}
nav#menu.menu > ul {margin-top:10px;}
.js nav#menu.menu, .js nav#menu.menu > ul ul {overflow: hidden;max-height: 0;transition: all 0.3s ease-out;}
nav#menu.menu.select, .js nav#menu.menu > ul ul.select {max-height: 55em;}
nav#menu.menu li a {color: #000;display: block;padding: 0.8em;border-bottom: 1px solid #EEE;position: relative;}
nav#menu.menu li.sousmenu > a:after {content: '+';position: absolute;top: 0;right: 0;display: block;font-size: 1em;padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > a.select:after {content: "-";padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > ul li {padding-left:1em;text-transform:none;float:none;} 
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu > ul > li.parent {float:none;}
nav#menu.menu ul.sousrubrique,nav#menu.menu ul{border-bottom: 0;}
}


C'est sur ce code qu'il faut agir pour modifier l'apparence de votre menu déroulant quelques exemples en gras dans le code.
Le choix de la police : Font Family : Georgia (verdana, arial, times, courier il en existe tellement à vous de choisir)

Font-size est la taille de la police.

Couleur du texte : #000 c'est à dire noir dans cet exemple.

text-transform:lowercase signifie que toutes les lettres sont en minuscule. Si vous les souhaitez en majuscule il faut mettre le mot : uppercase.

Le fond :
-  background : #a9bfd6 qui correspond à un bleu gris et #ffffff au blanc de mes sous rubriques.

Là aussi choisissez les couleurs (format hexadécimal) qui s'adaptent au thème général de votre blog.

Terminé !! et pour moi aussi.

J'espère que vous y êtes arrivés, du premier coup j'en suis sure.

Pour info : Je ne suis pas une pro et je ne m'attribue en rien la création du code uniquement son explication dans cet article. L'élaboration de cette aide est le fruit de mes nombreuses recherches et essais. Evidemment, avec le temps, il m'est de plus en plus facile de décoder, de modifier et d'appliquer, donc si vous avez des questions je pourrais vous aider. De nombreux sites sont aussi à votre disposition proposant des menus déroulants sur des bases identiques dont les explications peuvent peut être mieux vous convenir ou peaufiner votre application de celui-ci, n'hésitez pas à faire vos propres recherches.

Personnaliser un blog prend du temps, mais vous en tirerez une grande fierté, un savoir et un aspect esthétique et fonctionnel qui vous comblera vous et vos visiteurs.

♥ L'article vous a plu ? Pensez à laisser un commentaire ! ♥



tuto menu deroulant blogger happy manda passions

tuto menu deroulant blogger happy manda passions







53 commentaires:

  1. Merci pour ce tuto, je m'y mets la semaine prochaine et te dirai combien de fois je me suis arrachée les cheveux lol

    RépondreSupprimer
    Réponses
    1. t'inquiète ils repoussent tous ! et nous nous sommes aux anges à la fin

      Supprimer
  2. Coucou,
    merci pour ce tuto qui a parfaitement fonctionné pour mon blog... sauf sur téléphone où je n'ai plus du tout de menu.Aurais-tu une explication? un conseil?
    Merci

    RépondreSupprimer
    Réponses
    1. si ton menu n'apparait pas sur ton telephone, c'est qu'il manque un code javascript - as tu bien mis cette partie du code ? donne moi le lien de ton blog que je regarde

      Supprimer
  3. je viens de trouver ton blog, le code semble bon - est ce que ton blog est responsive ? essaie de ne pas choisir thème mobile sur l'interface blogger et voir si ton menu apparait, si oui c'est que ton theme n'est pas responsive, donc soit tu le rends responsive soit tu appliques un menu pour ta version web et un menu pour ta version mobile

    RépondreSupprimer
  4. Coucou,
    moi ça a marché du premier coup! Mais petit problème, le menu n'est pas vraiment déroulant dans le sense que j'ai une sous-catégorie qui s'affiche en dessous de la catégorie... de plus j'ai un mot qui apparait sous le titre "PLUS..." Comment l'enlever?
    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. coucou - bon déjà il fonctionne quelques petits ajustements probablement pas grand chose tu as le lien de ton blog car je ne vois pas ce que tu sous entends dans "une sous catégorie qui s'affiche en dessous de la catégorie" - c'est à dire que c'est une catégorie qui ne devait pas avoir de sous catégorie ? si c'est le cas tu as du ajouter une rubrique sous catégorie vide dans ton code ou alors tu n'as pas fermé la balise catégorie par - le mot pareil à mon avis regarde ton code le mot doit y etre supprime le tout simplement

      Supprimer
  5. Salut, merci pour cet article mais je n'arrive pas à trouver la balise ']]>' sur blogger 2019...

    RépondreSupprimer
    Réponses
    1. bonsoir, avez vous tapez la balise entière : ]]> sinon essayez les deux crochets ou que skin pour tenter de le trouver car elle y est forcément

      Supprimer
    2. Merci! on fais somment pour recevoir les notifications de blogger sur sa boie Gmail? là c'est par hasard que je viens de le retrouver, et vue ta réponse ^^

      Supprimer
    3. bonsoir Hani Sariane, tu me poses une colles, l'option "recevoir une notification de réponse" n'est pas proposé lorsque vous postez un message ? sinon en version web sur la droite vous pouvez vous abonner par mail au blog et peut etre qu'ainsi les notifications vous parviendront. Vérifier également dans les spams si les notifications ne sont pas stockées à cet endroit là - Merci encore pour tes visites à très bientot

      Supprimer
    4. Si je viens de la trouver :p
      Merci en tout cas pour ton blog, et bon courage pour la suite .

      Supprimer
  6. J'ai bien essayé mais impossible de le faire marcher.

    Je ne sais pas où ajouter le gadget?
    Les tutos anglos parlent de "cross-column" mais moi, je n'ai absolument rien ici donc je ne peux rien faire.
    Je ne peux ajouter de gadget que à certaines parties du blog (sidebar-right, footer). Rien pour faire un menu.
    J'ai aussi ajouté le code au HTML au thème avant la balise ]]> mais ça ne fait rien de bon.
    En fait, il n'y a que le texte: https://foreverpeace123.blogspot.com/ c'est ce que ça me donne... J'utilise la dernière version, évidemment, puisque l'on est en 2019 et que je l'ai créé que aujourd'hui.

    RépondreSupprimer
    Réponses
    1. Il faut ajouter le gadget dans la zone ou tu veux que se situe ton menu. Sur ce blog je l'ai ajouté sous mon image de présentation comme tu peux le voir. La zone doit etre assez large pour pouvoir l'accueillir esthétiquement. Par contre, est ce que cela vient d'une version nouvelle de blogger, mes gadgets peuvent être ajoutés dans toutes les zones. Sur ce point je ne peux t'éclairer. Ton code HTML ne pourra s'activer si le gadget est en place. Effectivement sur ton blog je vois le codage du menu en bas de ta page ce code doit etre dans la partie HTML dans le gadget c'est l'autre code. Je te conseille de reprendre une version sauvegardée de ton blog et de reprendre à zéro l'encodage.

      Supprimer
  7. Salut impressionnant mais sa ne marche pas chez moi www.nemafi.ml

    Pour celui qui cherche ]]> tape dans la barre de recherche ceci b: regarde parmi eux tu trouvera ]]> qui est fermé avec ...

    RépondreSupprimer
    Réponses
    1. Je suis sur ton blog, je vois que tu as 2 menus dont un déroulant. Ou se situe ton problème ?

      Supprimer
  8. Bonjour, Désolée de vous déranger. Je viens de tomber sur votre tuto et j'essaye de faire centrer ma barre de menu depuis un moment sans succès... Auriez-vous une idée de ce qui pourrait bloquer ?
    Vous remerciant par avance de votre réponse.

    RépondreSupprimer
    Réponses
    1. bonjour il doit manquer le code de centrage je regarde ça d'ici ce week end sinon entre temps laissez le lien de votre blog que je visualise le problème merci de votre passage

      Supprimer
  9. Bonjour Laure,
    grâce a votre magnifique tuto j'ai la solution pour le menu déroulant de mon blog en construction (
    skispatrimoinecollectiondayot.blogspot.com ) . il fonctionne sans le menu déroulant avec les libellés en gadget latéral. il n'y a qu'une dizaine d'articles pour tester le fonctionnement.les libellés necessaires au code html son figés et selectionnés dans ces articles.

    le menu souhaité est : [Accueil] [skis] ski bois ,ski autre, [fixations]fix talon libre, fix talon fixable,
    fix talon fixe, [accessoires] Anti-recul, Chaussures, Divers, [actualités] [documents] [pépites]

    il me semble avoir suivit a la lettre votre exemple mais ma modification d'html est rejetée par une notification toute rouge de colère.
    je pensais ici vous joindre mon fichier word du html modifie avec tous les titres et libellés definis ,mais
    il est rejeté lors que je valide
    comme vous le transmettre?

    je suis scotché a votre réponse , comme vous le noté dans votre tuto (je pensait ) avoir fait le plus dur !
    j'espere ne pas vous donner trop de peine pour cette recherche ,vous ferrez trois heuheux collectionneur (senoirs) qui se presse a vulgariser ce qu'il on ramassés durant des dizaines d'année<.
    bien cordialement
    philippe dayot
    dephiea@hotmail.com
    0624668825
    38000 Grenoble

    RépondreSupprimer
  10. bonjour LAURE M,
    suite a mon commentaire d'hier, j'ai remis en gadget html/java script le code ou j'ai chargé les menus et sous menus , avec les libellés qui s'y attachent. seul les titre des pages Accueil, Skis, Fixations, apparaissent mais pas les autres ,ni les sous menu. ils n'appellent pas les articles des libellés pourtant couchés dans le code .
    nb : ces libellés par la recherche latérale fonctionnent.
    j'espere retenir votre attention , et prendre un peu de votre temps: vous semblez passionnée comme je le suis avec ma collection
    merci pour votre aide .

    RépondreSupprimer
  11. bonjour LAURE M,
    si vous voulez résoudre mon erreur de code html, je peux vous valider en temps qu'administrateur ( il me faudrait votre adresse pour l'invitation d'auteur) ou vous pouvez me renvoyer le code miracle sur dephiea@hotmail.com ou skispatrimoine@gmail.com
    bien cordialement
    dph

    RépondreSupprimer
    Réponses
    1. Bonjour Philippe Navrée je ne vois vos messages que maintenant (j'ai un peu le cerveau confiné en cette periode !!) je fais mon possible pour y jeter un oeil dimanche après midi ou lundi déjà voir grace à votre adresse si je détecte une erreur possible ensuite nous aviserons merci de votre retour à très vite

      Supprimer
  12. bonjour Laure ,
    En fin de semaine dernière je vous ai demandé de l'aide pour un menu déroulant. je vous confirme qu'il est naturel de gérer votre disponibilité pour dispenser de l'aide a vos lecteur de tuto-blog .Je voulais simplement
    savoir si vous n'attendez rien de moi et, que vous si vous me répondrez ,ce sera par mail direct ou sur les commentaires de votre blog. Bien cordialement
    philippe

    RépondreSupprimer
    Réponses
    1. bonjour j'ai pris le temps de relire votre code de vous le renvoyer et je n'ai jamais eu de reponse concernant sa fonctionnalité faite un petit retour cela peut aider les autres

      Supprimer
    2. Bonjour
      A qui est adressé ce message svp? Je n’avais pour ma part rien reçu avant.

      Supprimer
    3. Ne vous inquiétez pas cindy ce message était pour Philippe

      Supprimer
    4. Ne vous inquiétez pas cindy ce message était pour Philippe

      Supprimer
  13. Hello ! merci pour ce code ! tout est bon chez moi mais peux tu me dire comment trouver l'adresse du lien ?
    Je m'explique ; j'ai créer des sous catégories mais je ne sais pas quel lien mettre... du coup toutes mes catégories me ramènent à la page d'accueil... merci d'avance ! Nina

    RépondreSupprimer
    Réponses
    1. Coucou bravo à toi ! Alors j espère que ce sera l explication que tu recherches : tu affiches ton blog sur Google la page que tu veux mettre en lien dans la barre en haut tu as son adresse - personnellement j ai fonctionné par libellé - pour chaque création d articles sur la droite tu verras une case nommée libellé tu rentres un mot qui servira de reference selon le thème des articles par exemple LIVRES donc tous mes articles ayant ce libellé se mettront automatiquement dans l onglet que j ai nommé ainsi - Mais ça je ne le développe pas dans cette article - tente déjà avec les adresses qui renvoient aux pages que tu désirent

      Supprimer
  14. Coucou, merci pour ce tuto, je l'essayerai dans la semaine ;)
    Bonne fin de journée, à bientôt ! :)

    RépondreSupprimer
    Réponses
    1. Coucou si tu as des difficultés n'hésite pas - perso je vais revoir la presentation de mon blog dès que j'en ai le courage car comme tu le sais ça prend énoooooormément de temps

      Supprimer
    2. Coucou, merci j'ai réussi sauf que j'ai une barre en haut qui est plus longue que mes cases menu... ça m'embête je cherche comment faire et je ne trouve pas.

      Supprimer
    3. Coucou alors je suis allee sur ton blog et on dirait que tout va bien je ne vois pas la barre plus longue dont tu fais mention ou alors tu as résolu le problème - tu as changé aussi le modèle de tes dates d articles non ?

      Supprimer
    4. Coucou, du coup le problème que je vois n'en est peut-être pas un, peut-être juste moi qui le voit vu que l'on a les outils visibles pour apporter les modifications aux widgets etc... la barre du haut du menu que je vois plus longue doit-être lié à ça. Merci du coup d'avoir été voir.
      Sinon, non je n'ai pas fais de changement de modèle de mes dates ;)
      Encore merci pour tout, bonne soirée.

      Supprimer
  15. Bonjour Camille et félicitations pour la création de ton blog - tout le menu est composé de liens « externes » - dans ce type de menu ce n est pas la fonction « page » qui est utilisée - Si tu veux utiliser cette fonction il ne sera pas possibles de faire des sous menus ou en tous les cas je n ai pas la technique et blogger ne le propose pas dans sa fonction page - procède par etape, crée l’ensemble de tes rubriques et sous rubriques ensuite vient l’insertion dès liens dans ton code et colle le tout dans ton gadget - quand tu es parvenu à à le mettre en place dis moi le j irai faire un tour sur ton blog voir ce que cela donne et pour l améliorer bon blogging

    RépondreSupprimer
  16. Bonjour Camille et félicitations pour la création de ton blog - tout le menu est composé de liens « externes » - dans ce type de menu ce n est pas la fonction « page » qui est utilisée - Si tu veux utiliser cette fonction il ne sera pas possibles de faire des sous menus ou en tous les cas je n ai pas la technique et blogger ne le propose pas dans sa fonction page - procède par etape, crée l’ensemble de tes rubriques et sous rubriques ensuite vient l’insertion dès liens dans ton code et colle le tout dans ton gadget - quand tu es parvenu à à le mettre en place dis moi le j irai faire un tour sur ton blog voir ce que cela donne et pour l améliorer bon blogging

    RépondreSupprimer
  17. Bonsoir oui normalement tu peux ta page a un lien tu le copies et tu t en sers comme adresse que tu colles dans ton code menu à la bonne rubrique - prépares tout ton menu et quand il est prêt tu l ajoutés à ton blog tu le testes et de là tu verras ce qu y bug ou ce qui est mal redirigé - faire un menu prends un peu de temps - j essaie d être claire mais pas facile l application est parfois moins galère que les explications

    RépondreSupprimer
  18. Bonjour Camille - oui je viens de voir en effet le menu est decalé lol déjà je choisirais une écriture plus grosse car là je suis sur pc et c'est un peu petit - le lien "proche dans ma pal" n'est pas actif à cette heure - sinon envoie moi par mail happymandapassions@gmail.com le code de ton menu (celui ou tu as mis les liens dans un premier temps - et ensuite le code que tu as collé dans le HTML - je regarderai si je repère des erreurs (en mode inspecter c'est moins pratique mais à première vue tout semble bon pour le code liens) - par contre je ne te promets pas de le faire avant mercredi

    RépondreSupprimer
  19. Réponses
    1. hello j'espère que tu ne rencontreras aucun souci et que le résultat te plaira

      Supprimer
  20. Bonjour
    je pense que toutes ces infos c'était avec l'ancienne version, parce qu'avec la nouvelle ça ne fonctionne pas.
    J'aimerai bien envoyer les deux copies écran, est ce possible.

    RépondreSupprimer
    Réponses
    1. bonjour - je n'ai pas pu refaire le test avec la nouvelle version presentation de blogger mais pour avoir fait d'autres modifications sur mon code HTML je n'ai pas eu de souci - et mon menu fonctionne toujours sous la nouvelle version - les fenetres ont changé de design mais il suffit tjs d'aller dans le code html pour introduire son code - sinon vous pouvez me donner votre adresse blog ou m'envoyer un mail à happymandapassions@gmail.com merci à vous et bon courage pour sa mise en place

      Supprimer
  21. Bonjour votre tuto m'a bien aidé dans la conception d'un site avec menu déroulant; par contre le menu n'apparait pas sur la version mobile et pourtant j'ai bien recopié le lien....
    https://cpn-ptitscastors.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour bravo pour cette étape validée je viens d'aller voir votre site est dynamique aux jolies couleurs. Avez vous bien mis le code JavaScript à la suite du premier code qui permet la fonctionnalité du menu sur mobile ? Normalement cela marche automatiquement sinon je ne me souviens plus très bien mais dans la liste des widget du code html repérez le nom du widget de la barre et regardez si vous pouvez ajouter le code mobile='yes' (la ligne de code ressemble à cela <b:widget id='HTML3' locked='false' mobile='yes') - c'est forcément un problème de code ou son emplacement dans la "mise en page" qui ne permet pas l'affichage sur petit ecran donc c'est par là qu'il faut chercher. J'espère que vous trouverez rapidement.

      Supprimer
    2. Merci pour votre réponse, j'ai tenté tout les codes que vous m'avez fourni mais toujours pas...Je continue à chercher

      Supprimer
    3. parfois faire une pause à force de regarder des codes on ne voit plus rien, bon courage

      Supprimer
  22. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  23. Bonjour Laure, j'ai suivi votre tuto et ... tadam ! ça fonctionne. Plus qu'à changer les couleurs pour que ce soit raccord avec le thème du blog. J'en aurai bien bavé ! Avant le vôtre j'avais suivi 3 tutos sans succès. Pourtant, les commentaires disant que ça fonctionnait étaient nombreux. Deux étaient totalement différents, ils n'utilisaient que le widget. Le 3ème était, à première vue, le même que le vôtre, les mystères de l'informatique ...

    RépondreSupprimer
    Réponses
    1. Bonjour à toi oui je viens d'aller sur ton site et tout a l'air de bien fonctionner- félicitations car ce n'est tout de même pas une mince affaire de personnaliser son blog encore bravo - ton blog a été ajouté à mes favoris je pense que j'irai y faire des petits tours regulièrement belle journée

      Supprimer
    2. Merci, c'est sympa ! Les grands esprits se rencontrent, je viens de poster un article dans "Mes sites préférés" qui parle de toi.

      Supprimer
    3. ooooooh c'est super sympathique je vais voir ça de ce pas merci beaucoup

      Supprimer
  24. Ohlala, je pensais passer une semaine à coder et, finalement, ça m'a pris même pas une heure grâce à ton super code !!!! Merci beaucoup !

    Pour ceux qui veulent voir le résultat : https://zupimages.net/up/23/35/rwom.png

    Maintenant, il ne me manque plus qu'à trouver comment mettre les icons des réseaux sociaux haha

    RépondreSupprimer