Créer une barre de menu avec des images (Blogger)



Voici pour ceux qui serai intéressé, une astuce toute simple pour ajouter une barre de menu avec image ( ou la barre de menu METRO ) à l’entête comme sur mon blog...

 barre de menu avec des  images (blogger)


1. Héberger les images à afficher sur un site hébergement. Pour récupérer par la suite les URL des Images...

2.Aller sur Mise en page / Modifier le code HTML et retrouve le paragraphe suivant :




]] >< /b:skin >


Et ajouter avant le code suivant :





/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}


Et enregistrer le modèle.

3.Allez sur Mise en page / Éléments de la page/Ajouter un gadget.
Et sélectionnez « HTML/JAVASCRIPT » dans la pop-up qui s’ouvrira copier ce code :


<div id='newnavbar'>
<ul>
<li><a href="URL de la page d’accueil "><img src="URL de l’image correspondante"></a></li>
<li><a href="URL du menu n° 1 "><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 2"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 3"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 4"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL pour le contact"><img src=" URL de l’image correspondante "></a></li>
</ul></div>




Et puis avant d'ENREGISTRER remplaçer les zone en Rouge par les URL des images hébergées et mettre les URLS des menus en bleu par URL des pages destinataires des images)

38 Commentaires

Laisser un commentaire

  1. SLT J'aimerais bien mettre une bare de menue mais pares avoir essayer sa fonctionne pas si tu pouvait m'aider sa serait genial je serai tres reconnaisant

    voila mon msn:turn59220@hotmail.fr
    voila mon blogpsot: http://zik-news.blogspot.com

    AIDE MOI STP

    RépondreSupprimer
  2. SLT EN FAITE J'AI INSERER TOUT SE KE TU DIT LA ET JE C PAS SA FONCTIONNE PAS

    PREND MON MSN SA IRA MIEU POUR SE PARLER STP turn59220@hotmail.fr

    RépondreSupprimer
  3. ken je copie le deuxieme code la avec tout les lien dans le gagdet et ke jenregistre quand je vé sur mon blog sa me met rien sa recopi se ke jai copier dans le gagdet jsute des frase rien ne saffiche

    RépondreSupprimer
  4. @turn59220 : Il faut dans le deuxiéme code remplacer les morceaux de code en bleu par les URL des pages dédiées et les urls rouge par des url de tes images hébergés sur un site (http://tinypic.com/index.php)

    En bref avant de mettre le deuxiéme code il faut héberger les images et prendre l'Url de l'image.

    RépondreSupprimer
  5. hello !!
    merci pr cet article tt dabord ... ms pr moi non plus ça ne fonctionne pas ! et j'ai bien remplacé les url !

    =(

    RépondreSupprimer
  6. ah et en particulier aucune nouvelle navbar ne s'affiche ds les éléments de la page !

    RépondreSupprimer
  7. @advertis et turn59220: le code ne marche mais je viens de mettre un nouveau code en dessous. je pense que ca marche
    a+

    RépondreSupprimer
  8. merciiii beaucoup pr ta réponse hyper rapide !!
    c génial !

    =)

    RépondreSupprimer
  9. j'aurai une kestion c comment tu a fait pour ke se soit marker les frase sur les images du menu
    (image utile , ajouter un gadget, personnaliser son blog ect..)
    tu les a mi direct sur limage ou dans le code on peut le rajouter sa

    RépondreSupprimer
  10. super ton astuce

    http://boko-people.blogspot.com/

    RépondreSupprimer
  11. @Turn5959220 : c'est trés simple pour marquer un titre sur une image j'utilise "paint" un logiciel d'image : j'ajoute du texte sur image et voila ...
    @Boko : merci beaucoup

    RépondreSupprimer
  12. J'ai juste un probleme je voudrait faire un menu (sons,video,ect..) mais comme mon blog est deja comencer jai tout mi a la suite les sons les videos ect .Donc comment reclasser tout sa les sons dans le menu sons les videos dans le menu video ect merci de me rep

    RépondreSupprimer
  13. @turn59220 : alors pour reclasser tous tes article , il faut rajouter des libellées à tes articles comme par exemple "sons" à tous les articles "sons" ainsi de suite pour tous les articles videos.
    Et puis pour l'image du "sons" dans ton menu tu rajoute l'URL de ton libellée ( url libellées est de la forme http://MONBLOG.blogspot.com/search/label/[libellées] )

    ah au faite, tu as vu le nouveau article "un generateur" qui te permet de rajouter les derniers commentaires à ton blog....

    a+

    RépondreSupprimer
  14. MERCI T TROP FORT XD MAIS J'AI DU BOULOT LOL OUI J'AI VU LE GENERATEUR PAS MAL .

    ET SI TU POUVAIT ME DIRE COMMENT METTRE UNE COLONNE A GAUCHE PARCE QUE JE COMPTE METTE DES PUBS POUR LE RENTABILISER MAIS JAI PLUS DE PLACE JE PREFERER LES METTRES DANS UNE COLONNE DE GAUCHE ET SI TU POUVAIT ME DIRE QUEL EST LE MEILLEUR MOYEN DE SE FAIRE DE L'ARGENT VU QUE J'AI TOUT LES JOURS ENTRE 1000 ET 1200 VISITES MERCI

    RépondreSupprimer
  15. @turn59220:salut tu peut mettre de la pub haut dessus de l'article si tu veut mais pour ajouter une troisiéme colonne s'est compliqué à faire et à expliquer mais tu peut regarder cette page :
    http://lebloggers.blogspot.com/2008/02/modles-blogger-3-colonnes-gogo.html

    et pour rentabiliser ton site je te conseille cette page :

    http://lebloggers.blogspot.com/2008/04/rentabliser-son-blog-blogger-ou.html

    Moi j'utilise blogbang et google adsense et oxado (il y a les lien sur la page au-dessus

    RépondreSupprimer
  16. DSL C ENCORE MOI LOL MAIS TU VOI JAVAI LAISSER TOMBER LE CODE POUR LE MENUE LE TEMP KE JE PREPARE MAIS IMAGE LA J'AI TOUT FINIT MES IMAGES.DONC J'AI COMMENCER A COPIER LE PREMIER CODE PARFAIT ENSUITE LE 2 EME DANS GADGET ET LA MEME SANS AVOIR MI LES URL JUSTE COMME SA RIEN SAFFICHE ET ENSUITE AVEC TOUT LES URL PAREIL BIZARRE AVANT JAVAI TESTER SA MARCHER.TU L'AURAI PAS MODIFIER PAR HASARD ?

    RépondreSupprimer
  17. @turn59220 : il faut mettre le deuxiéme code :
    Ajouter un gadget /HTML/JavaScript

    RépondreSupprimer
  18. @turn59220 :

    écoute envoie moi ton deuxiéme code avec les url des image et url des page et je regarde ce qui ne va pas :

    Vaneoo[a]laposte.net

    RépondreSupprimer
  19. J'AI MI SUR MON BLOG TEST SA MARCHE!!!

    MAIS JUSTE SI TU PEUT ALLER VOIR SUR MON BLOG TESTE PARCE QUE LE PROB C KI SE METTE 4 AU DESSUS ET 2 EN DESSOUS

    SI C POSSIBLE DE LES AVOIR TOUS ALIGNER MERCI

    BLOG TEST : http://turn59220.blogspot.com

    RépondreSupprimer
  20. encore dsl mais jai trouver jai mi padding : 0

    merci de tout t conseil meme si je t souler lol

    a + bonne continuation

    RépondreSupprimer
  21. @turn59220: Non tu ne m'a pas soulé , j'ai vu sur ton blog test c'est pas mal ....

    a+ bonne continuation et au faite tu peut me faire un lien vers mon blog avec comme titre astuce blogger...

    RépondreSupprimer
  22. mdr t un malin toi tu gagne de la thune et moi rien et t uveut encore de la pub lol bon pour te remercier je te met en site partenaire. et moi un petit lien sur ton blog lol

    RépondreSupprimer
  23. @turn59220 : lol tu peut mettre de la pub sut ton blog et rentabiliser les visites comme tous les bloggeur le font et au faite si je me rappelle bien tu fais plus de visite que moi je suis seulement à 50 visites...

    c'est toi le gros blinder lol

    RépondreSupprimer
  24. slt j'ai regarder l'article pour enlever la nevbar du dessus sa marche nickel mais pk les visiteur voi aussi le gadget html/javascript (ajoute ou enlever barre) moi je voudrai ke i a ke moi ki voi sa met pas les visiteurs

    RépondreSupprimer
  25. Intéressant... mais pb de compatibilité navigateur : firefox 2.
    J'ai pas testé pour les autres...
    Merci qd meme pour l'info ;)

    RépondreSupprimer
  26. Elles sortent d'où les URLs ?

    RépondreSupprimer
  27. salut! ça marche aussi pour les forums? comme je viens d'en créer un gratuit chez forumactif et que j'ai la possibilité d'éditer les templates et css en une seconde...

    RépondreSupprimer
  28. Bonjour à toi admin de ce blog...

    Ton travail est excellent. J'ai d'ailleurs utilisé ton astuce...

    J'ai malgré tout un petit pb... Pourrais tu m'expliquer comment centrer la barre de menu obtenue stp ?

    je te laisse le site en question.

    www.lesvoixsupremes.com

    Je te remercie pour ton aide...

    RépondreSupprimer
  29. @Mike : pour centrer ton menu tu dois utiliser les balise de "center" tu met avant le code :
    < center >

    et aprés le code :

    < / center >

    voila super facile a+

    RépondreSupprimer
  30. bonjour

    J'ai crée une barre de navigation sur mon blog, et je souhaiterais qu'en cliquant sur chaque mot le lecteur retrouve chronologiquement les articles associés. ... comment faire?

    pour voir voici l'adresse du blog (en construction...)
    http://ladyjanetheshop.blogspot.com/

    RépondreSupprimer
  31. @Boutique Ladyjane : la meilleur facon de retrouver les article similaire à un article ouvert et cette methode qui utilise les libellée ou label >>> regarde cette article Articles similaires avec images sur blogger

    RépondreSupprimer
  32. bonjour , je viens de créer
    la barre menu - image et sa fonctionne chez moi aller voir mon blog !

    merci d'avoir créer cette article

    RépondreSupprimer
  33. Bonjour

    Question technique sur laquelle je bloque et qui semble pourtant simple (avec image ou en menu de navigation normal d'ailleurs).

    Lorsque je clique sur le bouton concerné de la barre de navigation, j'arrive sur une page vierge.

    Je ne sais pas comment y mettre un article sur cette page, ni comment en mettre d'autres à la suite.

    L'exemple concrêt de ma demande se trouve sur ce blog http://relooking-conseil-en-image-formation.blogspot.com/ où en cliquant sur l'onglet annonces, s'affiche tous les messages dédiés date par date.

    Je connais la technique du libellé mais c'est moins joli qu'une barre de navigation.

    Merci d'avance pour votre aide !

    A noter que j'ai tournée sur différents blog d'aide blogger et personne ne me répond. Ce problème ne semble toucher que moi car spécifiquement, aucun post n'aborde ce thème de problème.

    Donc merci pour votre aide précieuse qui pour l'instant me bloque dans mon projet de restructuration de mon blog principal

    RépondreSupprimer
  34. Bonjour,
    Un grand merci pour ce tuto, après en avoir suivi quelques uns c'est le premier qui fonctionne ça fait plaisir.

    Après quelques heures d'efforts, le menu est en place seulement il est disposé sur deux lignes.
    Est ce dû à la trop grande taille des images ? Si c'est le cas quelle doit être le format des images ?
    Merci encore,

    Vincens http://macabaneaukanata.blogspot.com/

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne