Tous les articles seront prochainement mis à jour.

Comment réaliser soi-même un joli menu sous Blogger ?

Salut les filles ! Aujourd’hui, je vous retrouve pour un nouveau tuto ! Vous allez apprendre à réaliser et installer un joli menu sous blogger ! 😀
Voici le menu que j’ai réalisé et que je vais installé aujourd’hui sur blogger : menu1 Pour réaliser le même type de menu, je vous invite à aller voir l’article suivant : Comment faire des jolis boutons ? C’est fait de la même façon, sauf que c’est plus long et qu’il y a plus de textes. Pour la réalisation, c’est simple, il vous suffit de réaliser ce que vous souhaitez avec Paint et/ou Gimp. Mais, en revanche, ce qui est plus compliqué, c’est d’installer ce joli design et de le mettre sur Blogger tout en ayant à chaque texte un lien vers la page du même nom. Pour cela, j’ai décidé de prendre tout mon temps et mes précautions afin de bien vous l’expliquer pour que vous puissiez réussir à le faire. La première étape, c’est de dessiner les traits de découpe. Parce que, par la suite, nous allons découper le menu en plusieurs morceaux, afin de pouvoir associer les titres des pages aux liens correspondants. Donc, pour cela, j’utilise Paint. 001 Ensuite, on dessine les traits. Pour cela vous cliquez sur « Ligne », et cliquez sur « Taille », je vous conseille de prendre la plus petite épaisseur, car cela se voit moins. 001a Et ensuite, on dessine les traits à des endroits bien stratégiques. Le premier trait pour définir la première partie du menu où il n’y aura pas de lien. Ensuite, on dessine les traits suivant pour séparer les différents titres de pages. Pour les traits qui sont entre les titres, essayez de les faire au milieu entre les deux. Et pour le dernier trait, cela permet de définir la dernière partie du menu, qui n’aura pas de lien non plus. 002 Voilà, les traits sont faits. Maintenant, on passe à la deuxième étape : la découpe. Pour cela, il faut faire très attention au niveau des enregistrements, et des dimensions, car cela peut être mal coupé à la fin. Donc, pour être sûr que ça soit bien aligné, voici ma méthode : Pour la première partie du menu, il suffit de ramener le curseur qui se trouve à droite du rectangle blanc, et le ramener au premier trait. Mais faîtes attention de bien faire en sorte, qu’on ne voit plus le trait noir. 😉 003 Voici, ce qu’on obtient : 004 On l’enregistre sous le nom 001, dans un dossier créé pour l’occasion afin de se faciliter la tâche. Ensuite, pour la deuxième partie, on retourne au menu entier. 002 Mais cette fois-ci, on va décaler le menu vers la gauche. Pour cela, on clique sur « Sélectionner », puis « Sélectionner tout ». 005 Une fois qu’on a cliqué sur « Sélectionner tout ». On ne touche plus à la souris, et on utilise le clavier. On clique sur la flèche gauche, jusqu’à ne plus voir le premier trait. clavier-azerty-sans-pad-numérique11 Edit 19/05/2014 : Désolée, j’ai mis flèche droite au lieu de flèche gauche, lol ! J’étais fatiguée, ça arrive ! :p  Voici, ce qu’on obtient : 007 Une fois qu’on a fait ça, on prend le curseur et on le déplace jusqu’au deuxième trait. Bien sûr, il faut faire en sorte qu’on ne voit pas le deuxième trait noir. 😉 009 Voilà, on a la deuxième partie de notre menu ! Nous allons enregistrer ce fichier sous le nom de 002. 010 Maintenant, il faut faire exactement pareil avec les parties restants du menu, que vous nommerez respectivement 003, 004 et 005. 011 012 013 Voilà, maintenant qu’on a notre menu entièrement découpé. On va s’attaquer à la troisième partie du tuto, à savoir, l’installation sous Blogger. La première chose à faire est d’ouvrir un brouillon, et d’y mettre toutes les images (que vous avez précédemment nommé 001, 002, 003, 004 et 005). 014 Une fois que c’est fait, vous allez « désAssocier » chaque image (je ne sais pas même si ça se dit, même j’aime le dire :p). Parce que, en fait, à chaque fois que vous ajoutez une image sous Blogger, la petite case « Associer » est sélectionnée à chaque fois, j’ignore pourquoi. Mais, tout ce que je sais, c’est que si on laisse comme ça, on a du mal à aligner les images après. 015a 016 Voilà, vous faîtes ça pour toutes les images, et une fois que c’est fait, on colle les images les unes avec les autres en supprimant l’espace entre les images. 017 018 Maintenant, que toutes les images sont collées et que le menu est enfin entièrement constitué. Vous pouvez maintenant lier vos images « Accueil », « A propos de moi » et « Contact » avec les pages correspondantes; Pour cela, vous cliquez sur Associer. Voilà, une fois que c’est fait, vous cliquez sur Html en haut à gauche, et vous copiez le code html du brouillon. 019 Voilà, maintenant, on va dans l’administration de Blogger, on clique sur « Mise en Page » : 020 On clique sur « Ajouter un gadget », en-dessous de l’en-tête : 021 On clique sur le gadget « HTML/Javascript » et ensuite, on copie notre code html. 022 Une fois que c’est fait, on enregistre notre code html, ensuite on enregistre la disposition de la Mise en Page, et pour finir, voici un aperçu du blog que j’ai créé pour l’occasion sous Blogger : 023 Voilà, dîtes-moi ce que vous pensez de ce tuto, si vous avez réussi à réaliser et installer votre design. J’espère, en tout cas, que cela vous a plus. 😀 A bientôt pour de nouveaux tutos ! MinaSignature        

45 Comments on Comment réaliser soi-même un joli menu sous Blogger ?

  1. Juliette
    14 mai 2014 at 18:51 (4 années ago)

    Merci beaucoup pour ce tutoriel , c’est super bien expliqué ! 🙂

    Répondre
  2. Le blog de Vaneta
    14 mai 2014 at 19:46 (4 années ago)

    Il est vraiment bien ce tuto ! Il est très détaillé et on comprend vraiment bien les étapes ! Je pense que cela pourra aider pas mal de monde !

    Répondre
    • Mina
      19 mai 2014 at 19:51 (4 années ago)

      Merci ! J’espère bien ! 😀

      Répondre
  3. Bérengère in Wonderland
    17 mai 2014 at 10:33 (4 années ago)

    J’avais très envie de créer une belle barre de menu mais je ne savais pas du tout comment procéder pour l’installer, maintenant j’ai tout compris !
    Merci pour ce tuto hyper bien expliqué qui rends toutes les étapes les plus simples possibles !
    Je vais pouvoir m’y essayer !

    Tendresse et baisers sucrés
    Bérengère in Wonderland

    Répondre
    • Mina
      19 mai 2014 at 19:48 (4 années ago)

      De rien ! 😀 Tu m’en donneras des nouvelles ! 😉

      Répondre
  4. Mina
    19 mai 2014 at 19:49 (4 années ago)

    Oh la honte ! Je viens de remarquer que j’ai mis flèche droite au lieu de flèche gauche ! lol ! :p
    Mais c’est pas grave, j’espère que personne l’a remarqué ! :p

    Répondre
    • Mina
      21 mai 2014 at 22:02 (4 années ago)

      Pas de quoi ! C’est sympa, ça correspond à l’image de ton blog ! 😀

      Répondre
  5. Camille
    28 mai 2014 at 06:39 (3 années ago)

    Merci pour tes tutos, tout est super bien expliqué ! Grâce à toi j’ai pu améliorer certaines choses que je n’arrivais pas à trouver et pourtant je n’arrêtais pas de chercher !!
    Merci beaucoup !!!!

    Répondre
  6. audrey
    31 mai 2014 at 10:00 (3 années ago)

    J’adore tous tes tutos, il m’aide beaucoup ! Gros bisous a toi :-p

    Répondre
    • Mina
      31 mai 2014 at 15:20 (3 années ago)

      Merci ! Bises ! 😀

      Répondre
  7. SweetforHappiness
    3 juin 2014 at 09:59 (3 années ago)

    Hello Mina, je suis nouvelle sur blogspot et comme toi j’ai appris sur le tas 🙂
    J’ai découvert ton joli blog grâce à Hellocoton il est vraiment génial !
    Merci pour tes conseils et n’hésitent pas à aller visiter le mien :
    http://sweetforhappiness.blogspot.fr/
    Bonne journée à bientôt j’espère.
    Love, Charlotte de Sweet for Happiness.

    Répondre
  8. Fashion what else
    4 juin 2014 at 17:03 (3 années ago)

    Je voulais savoir comment tu insères les liens de pages derrière l’image ? Bisous =)

    Répondre
  9. LeBlogDuneRousse
    11 juin 2014 at 21:43 (3 années ago)

    Impossible pour moi de relier les parties entre elles, blogger refuse toujours 🙁

    Répondre
    • Mina
      11 juin 2014 at 22:04 (3 années ago)

      Salut ! Est-ce que tu as bien décocher le bouton « Associer » pour chaque image ? Car si ce n’est pas le cas, c’est normal que tu n’arrives jamais à lier les images ! J’espère t’avoir aidé ! Bises ! 😀

      Répondre
  10. Poudres et Paillettes
    16 juin 2014 at 21:54 (3 années ago)

    A quel moment associe tu les liens pour chaque partie de texte ? Parce que là, si j’ai bien suivi, une fois toutes les étapes réalisées, le menu n’est pas « cliquable » …

    Répondre
    • Mina
      16 juin 2014 at 23:24 (3 années ago)

      J’associe les liens à chaque partie de texte, à la dernière étape, quand les différentes parties du menu sont collées les unes aux autres.

      Répondre
  11. fanacosmetiques
    22 juin 2014 at 14:29 (3 années ago)

    Encore un super article, je viens de modifier mon menu grâce a ton aide pour y ajouter des rubriques ! Très bonnes explications ! bravo a toi, et merci pour toute l’aide que tu nous apportes !

    Répondre
  12. Ledouxcarnetnantais
    24 juin 2014 at 01:25 (3 années ago)

    Bonjour Mina, ton article est très bien expliquer, en revanche, je n’arrive pas à coller mon lien HTML, comment faire ?

    Répondre
    • Mina
      24 juin 2014 at 01:38 (3 années ago)

      Salut ! Merci ! Bah en fait, il suffit de faire clique droit dans le contenu du gadget « Html/Javascript » et de cliquer sur Coller. Voilà ! 😀

      Répondre
  13. Theftmarin
    25 juin 2014 at 00:33 (3 années ago)

    Bonjour =) Super tuto. Mais je n’arrive jamais à relier tout mon menu (en 3 parties). La dernière partie ne s’insère pas collée aux autres mais en dessous des autres alors que les deux premières sont bien collées. Help ? Bisous

    Répondre
  14. Theftmarin
    25 juin 2014 at 00:35 (3 années ago)

    Problème résolu finalement !! merci du tuto !! Bisous

    Répondre
  15. Audrey
    27 juin 2014 at 09:27 (3 années ago)

    Merci pour ce tuto, ça marche comment pour WordPress :$

    Répondre
    • Mina
      27 juin 2014 at 09:49 (3 années ago)

      Sur WordPress, on ne peut pas. Seul Blogger offre cette liberté au niveau du menu.
      Si tu veux un joli menu, il faut modifier le code dans l’éditeur de style, mais c’est très risqué et limité, surtout si on y connaît rien. Tu ne peux que chercher et choisir un thème qui a un menu qui te plaît. 🙂

      Répondre
  16. Marie
    29 octobre 2014 at 11:37 (3 années ago)

    C’est décalé chez moi 🙁

    Répondre
  17. Marie
    1 novembre 2014 at 17:09 (3 années ago)

    Super!! J’ai réussi!!
    Merci beaucoup 🙂

    Répondre
  18. Bouille d'Amour
    11 novembre 2014 at 11:13 (3 années ago)

    Bonjour Mina,

    Tu m’imagines pas à quel point ton blog m’a aidée ! =)

    J’ai créé un blog il y a quelques semaines et tes articles m’ont vraiment accompagnée durant de longues heures de codages et de « choix déco » !

    Maintenant, je vais essayer de le fournir encore un peu avant de lancer la com.

    Ça me flatterait beaucoup si tu pouvais me donner ton avis sur mon blog, des conseils pour l’améliorer ou autres. Si tu as un peu de temps pour cela biensur..
    Je suis encore une novice =)

    Merci encore !

    Répondre
  19. pasquedesmamans
    21 novembre 2014 at 23:29 (3 années ago)

    Coucou!
    D’abord, merci pour tous tes conseils.
    J’ai juste un petit souci : mon menu est tout décalé je n’arrive pas à tout avoir sur une seule ligne. As tu un conseil?
    Merci beaucoup 🙂

    Répondre
  20. Cindy
    2 décembre 2014 at 22:46 (3 années ago)

    Salut ! Ton article est top et ma très bien aidé, j’ai bien placé mon design crée là où il faut mais est ce que c’est normal qu’il n’y a pas de lien vers justement ces rubriques ?

    Répondre
  21. Lili
    5 janvier 2015 at 00:17 (3 années ago)

    Coucou, en cherchant sur le net un problème que je n’arrive pas à résoudre depuis des semaines, je suis donc tombé sur ton blog… Et je dois dire que c’est une véritable mine d’or!!!! Il est génial!
    Cependant mon problème reste non résolu et je me permet de mettre ce commentaire si tu peux m’aider. Comme il est dit dans ce tuto il suffit de lier chaque image avec les pages correspondante (ex: a propos, contact et j’en passe). Mon problème s’arrête là, je n’arrive pas à lier les images, je ne sais pas comment placer mes codes html, bref c’est pour moi un vrai casse-tête si tu pouvais m’aider ou réaliser un tuto pour aider d’autres personnes dans le même cas que moi 🙂 Je te remercie et continue ainsi c’est un super boulot que tu fais!

    Répondre
  22. Nina
    10 février 2015 at 12:42 (3 années ago)

    Bonjour Mina =).
    Je me suis lancée dans un blog il y a peu et je m’occupe petit à petit de la présentation. Ton blog est vraiment sympa et j’ai déjà utilisé pas mal de tes conseils alors je te dis un grand merci !!
    Maintenant j’ai un souci avec ma barre des menus. je l’ai créée sous photoshop et j’ai découpé bien comme tu expliques. Ensuite quand je mets sous Blogger tout se passe bien sauf pour la dernière image de ma barre de menu. sans que je ne comprenne pourquoi, elle est décalée par rapport à toutes les autres alors que je l’ai faite de la même manière et importé de la même manière…. J’ai bien tout désassocié donc je ne comprend pas bien ce décalage… Du coup je voulais savoir si tu avais déjà eu ce problème et si tu savais comment le résoudre?
    Je te remercie et j’espère que tu continueras avec tes petits conseils qui sont toujours très bien expliqués et très utiles !
    A bientôt !

    Répondre
  23. Mélany
    18 février 2015 at 15:50 (3 années ago)

    Coucou! Je n’arrive pas a associé les images entre elle même après les avoir des associé.(ma phrase est bisare….)

    Répondre
  24. Axelle
    28 juillet 2015 at 15:11 (2 années ago)

    Coucou, ton article est génial. Le soucis c’est que je suis exactement ce que tu fais, mais mes images arrivent de taille complètement différente dans mon brouillon et je ne peux pas éliminer les espaces …
    J’espère que tu pourras m’aider.
    Bisous

    Répondre
  25. Siramachin
    6 février 2016 at 20:39 (2 années ago)

    Merci pour ce tuto vraiment génial ! Il m’a était vraiment grandement utile !

    Répondre
  26. Laurianne Beauté
    26 février 2016 at 17:45 (2 années ago)

    Je viens de découvrir ton blog et OH MON DIEU, il est super ! Je cherche à améliorer mon blog (sous blogger) mais je me galère vraiment ! Tes tutos sont si bien expliqués ! Merci pour toutes ces infos !

    Répondre
  27. Elodie HERMES
    29 mars 2016 at 13:02 (2 années ago)

    Bonjour !
    Merci pour ton tuto ultra bien expliqué !
    Ca fait des années que j’ai laissé mon blog a l’abandon, j’ai décider de relever les manches et de me remettre au boulot, et ca m’a bien aidé !

    Quelqu’un aurait une solution pour utiliser ce manu maison, tout en faisant un onglet déroulant ? Je m’emmêle les pinceaux avec le HTML, ca me prend la tête depuis 5h !
    J’ai un onglet que j’ai appelé « catégories » et je voudrais que quand on passe la souris, il puisse y avoir 3 options : mode, créations, lifestyle.

    Quelqu’un peut m’aider svp ? ♥

    Merci

    Répondre
  28. xlovelybeauty
    11 mai 2016 at 15:56 (2 années ago)

    Hello , jai reussi a créé les image et tout mais seul probleme , j’ai peut être louper un episode lol mais je ne trouve pas comment faire pour quand on clique sur une case il y a des categorie qui s’affiche …… Merci de m’aider 🙁

    Répondre
  29. Safranne
    19 juin 2016 at 14:01 (1 année ago)

    Franchement je ne comprends pas… j’ai beau effectuer tout ce que tu fais dès que j’ajoute a la suite les images, quand je supprime les espaces bah ca me supprime l’image ! ca me rends folle ca fait déjà 2h que j’essaye, je vois pas pourquoi ca ne marche pas, au secours 🙁

    Répondre
  30. Safranne
    19 juin 2016 at 14:13 (1 année ago)

    De plus, malgré avoir coupé toutes les images à la meme taille, elles sont toutes de tailles différentes (meme en dissociant)… je désespère haha, j’ai à peine commencer mon blog que ca me décourage énormément puisque rien ne marche pour cette bannière

    Répondre

Laisser un commentaire

© Copyright GirlyBlog 2017 - Tous droits réservés.