Installer un menu "image" en 5 minutes sur blogger

installer-menu-image-blogger

Installer un menu "image" en 5 minutes sur blogger

Aujoud’hui je reviens avec un petit tutoriel exclusivement pour Blogger, vous apprendrez aujourd’hui comment installer un menu de type « image » sur votre blog blogger en 5 minutes.

Vous voudriez avoir un menu de navigation original ? une banderole retro, ou simplement pouvoir utiliser une typographie et des caractères originaux pour votre menu? vous êtes tombez au bon endroit! 

Dans un premier temps, inscrivez vous sur Photobucket (ou un autre hébergeur de votre choix, celui ci est gratuit) et hébergez l’image que vous désirez utiliser pour votre menu. 

hebergement-gratuit-photobucket

Dans mon cas, ce sera une banderole style rétro :

menu-banderole

Une fois votre image hébergée, récupérez le lien « direct » de votre image puis rendez vous sur LE site magique

HTML-MAP

(non ne prenez pas peur, je vous assure qu’il deviendra votre best friend forever)

Vous collerez l’url direct de votre image dans Step 1 comme ci dessous et cliquez sur « start« 

installer-menu-image-blogger

Votre image apparait, maintenant il faudra sélectionner une par une les zones qui seront cliquables sur votre menu, par exemple pour accueil, je crée un rectangle autour de l’écriture.

Une fois votre zone crée entrez l’url de direction, pour accueil, saisissez l’adresse de votre blog par exemple, pour le reste de vos catégories utilisez les libellés, puis dans « enter link alt » renseignez le nom de la zone cliquable.

installer-menu-image-blogger

SURTOUT, choisissez dans « Enter link target« , l’option « same window » afin que le lien s’ouvre bien dans la même fenêtre.

Répétez l’opération en créant les différentes zones pour les différents boutons du menu.

Quand vous aurez fini toutes vos zones, cliquez sur « Click here to finish« 

blogger-menu-image-blogspot

Le site vous affichera le code à intégrer dans votre blog.

A présent rendez vous dans votre administration blogger puis « Mise en page« 

Ajoutez un gadget « HTML/JAVASCRIPT » en dessous de l’en tête de votre blog et collez y le code généré par le site HTML map.

gadget-blogger-menu-image

Pour centrer votre menu vous pouvez ajoutez

Enregistrez le gadget, puis enregistrez la disposition de votre mise en page!

Appréciez le rendu 😉

J’espère que vous avez pu installer votre menu facilement et que vous avez fait une jolie découverte avec le site HTML map, car c’est vraiment un super outil ! vous en pensez quoi ? 

25 Commentaires
  • Delphine

    15 août 2014 at 9 h 56 min Répondre

    Thanks again pour ce nouveau tuto !
    Cela fait un moment que je voulais changer mon menu, mais je ne savais vraiment pas comment lier chaque catégorie à un libellé différent.
    Y a plus qu’à appliquer maintenant 😉

    • graphicart

      15 août 2014 at 12 h 34 min Répondre

      de rien je suis contente que ça puisse te servir :-) maintenant plus qu’à faire un joli menu et à mettre en pratique ^^

  • Marie

    20 août 2014 at 19 h 34 min Répondre

    Merci ! C’est top et super utile !

  • Milla

    27 août 2014 at 9 h 20 min Répondre

    Tout simplement génial! je n’ai pas encore essayé, mais sa ne saurait tarder!

  • Milla

    27 août 2014 at 9 h 20 min Répondre

    Tout simplement génial! je n’ai pas encore essayé, mais sa ne saurait tarder!

  • Bigoudenblues

    2 septembre 2014 at 11 h 45 min Répondre

    Whoa super merci beaucoup! Mais par contre, j’aimerais savoir… Est-ce possible également avec un menu déroullant?

    • graphicart

      2 septembre 2014 at 11 h 48 min Répondre

      Hey! Merci pour ton petit
      Passage, malheureusement ce n’est pas possible pour un
      Menu déroulant, il devra être codé de préférence :-)

  • Cook-with-love

    2 septembre 2014 at 12 h 36 min Répondre

    Merci pour le partage !!
    Ca marche avec WordPress ??
    Bise

    • graphicart

      2 septembre 2014 at 20 h 20 min Répondre

      Hello, non ça ne fonctionnera pas avec wordpress puisque ce n’est pas pareil que blogger au niveau des gadgets de mise en page, enfin ça se fait bien sur mais pas de cette manière là ^^

  • Alba

    12 septembre 2014 at 23 h 55 min Répondre

    Pfouh à chaque fois j’ai envie de passer ma soirée à faire tes tips pour les blogs… Ça dépote tout merci encore ma belle ! Est ce qu’on peut également utiliser cet outil pour mettre dans les colonnes latérales des blogs ? Avec d’autres images etc… ? :)

    Alba

    • graphicart

      13 septembre 2014 at 9 h 10 min Répondre

      Hello! oui ça fonctionne aussi avec des étiquettes pour sidebar, avec tout ce que tu veux en fait ^^

  • La Beauté en Blog

    11 octobre 2014 at 14 h 37 min Répondre

    Merci pour cette petite astuce que je cherche depuis un moment … Cependant, peux-tu me donner des conseils de sites où je pourrais trouver des banderoles pour mon blog qui est blanc et noir ?

  • […] Installer un bouton pin it sur ses images  Modifier la navigation articles anciens / récents Installer un menu « image » en 5 minutes Supprimer la navbar sur blogger Créer une likebox Facebook pour son blog Installation d’un […]

    • La Beauté en Blog

      12 octobre 2014 at 14 h 53 min Répondre

      Merci tout de même pour ton aide :-)
      En tout cas ton blog est au top ! Je le suis avec plaisir =)

  • […] blogger Installer Google Analytics sur son blog blogger Installer un bouton pin it sur ses images  Installer un menu « image » en 5 minutes Supprimer la navbar sur blogger Créer une likebox Facebook pour son blog Installation d’un […]

  • Manon D.

    7 février 2015 at 17 h 13 min Répondre

    Ton tuto est super mais je rencontre un problème quant à la disposition du menu. J’aimerais qu’il soit plus éloigné du corps de mes articles, je le trouve trop proche et je n’aime pas du tout le rendu… Aurais-tu la solution ? :/

  • Cécile

    21 mars 2015 at 23 h 58 min Répondre

    Mais quel tuto! Mais quel tuto!! C’est ce dont toutes les bloggeuses rêve d’avoir de un tel menu personnalisé!
    Pour ma part je l’ai installé sur le blog d’une camarade bloggeuse mais je rencontre un problème, les articles contenant les bons libellés ne s’affichent pas dans les catégories (pages) correspondantes. En essayant de faire plus simple: Il n’y a rien qui s’affiche sur chaque page sauf dans « accueil » puisqu’il y a tous les articles en vrac.
    C’est un peu compliqué tout cela et nous avons vraiment besoin de ton aide!!!
    Gros bisous ♥
    Cécile.

  • a l'image de soi

    27 mars 2015 at 17 h 44 min Répondre

    Coucou, je tenais à te remercier de tout tes bon tutos qui m’aide énormément pour mon blog, je plancher 3 jour dessus et sur une mauvaise manip HTML j’ai dû tout recommencer donc me revoilà ^^

  • kaylacos

    5 avril 2015 at 22 h 31 min Répondre

    Bonjour,

    Merci pour ton tuto. Je cherchais à le modifier mais j’aimerais savoir si c’est faisable avec des articles déjà créé sans que ça crée un disfonctionnement. Le contenu des pages je compte les modifier et y mettre les libellés, grâce à ton merci 😉

  • Solène

    13 septembre 2015 at 0 h 01 min Répondre

    Waw, je viens de le faire et ça rend super bien ! Merci beaucoup !

  • Queina

    5 octobre 2015 at 16 h 06 min Répondre

    Merci ! Tes tutos sont géniaux, et quel bonheur de faire soi-même le menu de son blog :)

  • Victoria Ruthven

    8 octobre 2015 at 12 h 09 min Répondre

    Bonjour,
    déjà, merci pour tes tutos, j’en ai suivi certains qui m’ont réellement été utiles : )
    j’ai un petit conseil à te demander : j’ai réussi à décaler ma barre de navigation en haut, mais je ne parviens pas à centrer le texte quand je l’agrandis : le texte reste fixé en haut. Est-ce que tu aurais une petite idée pur y remédier?
    Merci d’avance : )

  • Agnès

    4 décembre 2015 at 16 h 03 min Répondre

    Bonjour,

    Un grand gros MERCI pour tous les tutos c’est génial moi qui suis complètemetn novice cela m’est d’une très grande aide !
    J’ai une question sur le tuto pour centrer le menu une fois celui-ci créé.
    Le mien ne se centre pas et je pense que c’est dans ton dernier code que je ne dois pas faire ce qu’il faut ! :-( Mais je vois pas quoi ? Par quoi faut-il remplacer « le code de votre menu » ?
    merci pour ton aide
    Et continue !

  • Jade

    27 février 2016 at 23 h 18 min Répondre

    Tellement cool ! Ca fait plaisir de pouvoir donner sa propre touche à son blog. Merci beaucoup !

Poster un commentaire