Une très simple méthode pour créer une Barre Horizontale de Navigation dans Blogger

coucou ,

je souhaiterais que ma barre horizontale de navigation prenne toute la largeur de la page tout comme toi (la mienne ne fait que la largeur de la colonne des articles) comment dois je procéder ? merci encore ! lol

@ Alexandrah
Quand tu déplaces le widget, il faut juste faire attention à le déplacer en dessous de l'entête du blog

et non en dessus du corps des messages.

J'ai testé sur un Modèle/Template Minima comme le tiens donc ça devrai marcher.
Dit moi ce que ça donne. :)

ah oui en effet, ca fonctionne, je n'avais pas vu que l'on pouvait la placer juste en dessous de l'entete, bon bin vraiment c top ton blog !!! ;-))

comment puis je changer la taille de toute ma barre (il me semble que tu expliques comment changer la taille du lien mais pas de la largeur de la barre... enfin c'est ce que j'ai compris non ? :-)

@ Alexandrah
si tu ajoutes par exemple <font size="4"> au tout début du code ça va agrandir la taille de tout les liens au même temps, je crois que c'est ce que tu veux.

Ce n'est pas vraiment une barre de menu, c'est juste des lien bien placés.
Demain je vais publier un tutoriel pour créer une vrai Barre de menu bien sophistiquée.

ok j'ai compris !! c super ! merci ! ....y'a t il des choses sur blogspot que tu ne saches pas faire lol ?
biz

Merci pour cet excellent tutoriel Soufiane ;;)

Je vais attendre le tutoriel suivant avant de me lancer dans les travaux... vu que je souhaite y mettre des liens exterieur etc...

Merci mille fois pour tout ce boulot

@mitiés

Kheops

@ Kheops
Merci
je vais publier une 2ème méthode pour créer une barre horizontale demain :)

merci soufiane pour tout tu es un pot

@ TelechargementAZ
de rien la famille :)
ce n'est que la version1 :)) :))

J'utilise un Minima également mais je ne peux pas déplacer ma barre juste sous l'en-tête.

@ Jenn
Mais si jenn,il faut juste essayer de faire comme sur l'image.
Regard le commentaire @ Alexadrah en haut.
Essai et dit moi si ça marche :? sinon tu peux la déplacer sous l'en-tête d'une autre manière.

je te remercie soufiane,je suis un fidéle lecteur de votre blog et merci pour cette astuce. :))

@ Lampe magique
Merci à toi fidèle lecteur :)) :)) :))

hey
merci encore, ca fait longtemps que je cherchais un tuto pour mettre des onglets.
J'ai une question. j'aimerai que la barre horizontale ait un back ground sur tout le long. Tu peux m'aider ?

bonjour Soufiane,

comment tu fais pour mettre ta photo dans la barre url?

merci pour tes astuces

Pour créer une Favicon dans Blogger.

Bonjour,

j'ai un gros soucis, ma page d'accueil ne s'affiche plus ???!!! je ne comprends pas pourquoi, suite à une mauvaise manip je crois (j'ai effectué une modif et j'ai par erreur enregistré le message d'accueil en mode brouillon et depuis ce message qui est daté à une date future pour qu'elle apparaisse toujours à l'ouverture de mon blog, est en "mode" planifié, et ne peut donc apparaitre sur mon blog!!!! aurais tu une solution stp ?

y'a til un rapport ? la modif consistait à intégrer un diapo créé sur un autre site ?

merci

@ alexandrah
je viens de voir ton blog et la page d'accueil s'affiche bien.
normalement il faut juste re-publier le message.

oui oui j'ai réparé ... en fait suite à quelques recherches, on ne peut publier qu'une fois un message à une date future, donc j'ai écrit une nouvelle page d'accueil

OUHAAA ça marche super bien :D
merci !!!
ce site est vraiment super

Voilà, je cherchais comment integrer un menu à mon blog et je tombe encore sur toi ! :)
Vraiment, tu as un max de compétences !
Je trouve ce menu très joli et le changement de couleur c'est vraiment bien. Mais j'aurai une autre question : Je tiens donc un blog culinaire et pour le moment, toutes mes recettes se suivent, tout est mélangé et j'aurai voulu utiliser ton menu pour faire par exemple Entrées, plats et desserts par exemple.

Mais penses-tu qu'il soit possible de rediriger intelligement le menu vers les entrées uniquement et les plats uniquement?.... Ca doit être fastidieux non ? Vaut-il mieux que je migre vers un site ? Je pense à mes lecteur et là c'est un peu fouilli.... Merci Soufiane ! :)

@ Les Délices de Baïa
merci,voici un autre menu blogger avec effet glossy!

pour les liens:
c'est soit tu crées un message et tu y listes les Articles en relation avec Entrées ..... et tu utilise l'adresse de ce message dans le menu.
(comme mes liens widget ou astuces...


Soit tu donnes le libellés Entrées à tous les articles qui s'y apporte et tu l'utilises l'adresse de ce libellés dans le Menu

Ahhhhh oui d'accord ! ;;)

Je vais tester ça dès ce soir et je te tiens au courant !

ok

C'est fait ! J'ai même réussi toute seule à le faire sur le côté. Cool ! :D

Par contre, je n'ai pas trouvé ce que je voulais pour FeedBurner (désolée de poster ici)
Il me demande "feed adress" et je me rend compte que je suis paumée. Je suis sur blogger, mais redirigée sur mon nom de domaine....
Que dois-je faire?
Je ne recois pas le mail de confirmation de newsletter, donc ça ne fonctionne pas....

Désolée Soufiane, je viens de recevoir le mail de confirmation. Donc en fait les éléments étaient correctement entrés. Tu peux supprimez ces deux posts si tu veux. Merci encore :)

@ Les Délices de Baïa
Bravo même si je n'ai pas compris de quoi tu parles ...

Ravi de la possibilité d'afficher un menu horizontal grâce au Dr Soufiane,
je regrette toutefois que ce menu ne puisse se caler sur toute la largeur de l'entête du blog lorsque celui-ci contient deux menus latéraux ... (
voir www.paris-expos.com)
C'est à priori uniquement possible sur les modèle de blogger avec un seul menu latéral (voir : http://eiffelstar.blogspot.com/ )

Ces menus horizontaux pourraient-t-ils par ailleurs s'enrichir de sous-menus déroulants ?

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

@ Toxic
Merci Antoine, Alors comme ça je suis un Dr.

C'est vrai j'ai testé ce menu que sur des Templates Blogger classiques (Les autres ont en déjà un) et le menu est bien centré et il prend toute la largeur de la page.
Je ne sais pas comment tu as fait pour ajouter une barre latérale ?? donc je ne peux pas trop t'aider.

Pour les sous-menus, comme c'est une version simple (un peu bébête quand même) ce n'est n'est pas envisageable.

Je vais publier bientôt, un tutoriel pour ajouter une barre de menu stylé et avec des sous-menus déroulants et peut être ça te plaira....

OK Doc Soufiane, merci pour le retour :o)

Pour avoir 2 menus qui se positionnent de chaque côté du "main wrapper", je peux t'envoyer une copie du code pour que tu vois comment tes menus horizontaux pourraient se coller juste dessous l'entête du blog sur toute la largeur...

J'ai essayé de placer ton nuage de tags mais ça marche pas avec les 2 menus...

Si tu arrives à faire un tuto avec des sous-menus déroulant, ce serait extra parce que le menu horizontal actuel ne permet pas d'avoir suffisamment de liens vers un contenu plus riche...

TBWE à toi,

Toxic/antoine

Bonjour Soufiane,

Petite question est-ce que il y aurait moyen d'installer des répertoire en flash.

Merci @+ Totank

@ Totank
comment ça des répertoire en flash ???
un truc du genre .....flv ou .....swf !!!!

@soufiane oui un peux style comme ceci

http://www.flashvortex.com/

Cette barre horizontale manquait vraiment dans Blogger- Chouette astuce

Bonjour Soufiane,
J'ai installé cette barre horizontale mais depuis j'ai perdu ma barre de navigation Blogger c'est gênant car je n'ai plus le même référencement google.En effet avant tous mes messages apparaissaient sur la première page de recherche google maintenant ce n'est plus le cas.Comment la remettre.Voici mon blog http://destination-corse-thierrylahir.blogspot.com/
Merci d'avance.
Thierry.

@ thierrylahir
remettre quoi ??? La NavBar par défaut de blogger ?? Pourquoi la barre à disparu ?? sûrement pas parce que tu as ajouté ce widget tout bête !!!
Pour google....

Coucou !
Voilà, en fait j'ai un widjet avec du texte et j'aimerais que son arrière plan soit une image et aussi mettre un cadre autour. Pourrais-tu m'aider stp ?

Merci d'avance.

Hélène
Un widjet avec du texte ;) est ce que ça a un rapport avec la barre de menu ;)
Pour mettre un cadre il suffit d'ajouter par exemple un border:2px solid #000;

Merci infiniment pour tout ça...
C'est passionnant et ça donne vie à notre blog !
D'ailleurs, longue vie à toi !

@Benj
Merci :-*

Encore un super poste ! Merciiiiiiiiiii (j'ai finalement trouver template à mon pied au passe XD).
N'empêche, j'ai un petit souci(comme d'habitude -_-', je dois vraiment pas être douée...) : dans libellés j'ai mis la catégorie dans laquelle je voulais qu'apparaisse mes articles mais quand je clique dessus ça me renvoie à la page pricincipale ! Qu'est ce que j'ai fait de travers ?

Comment espacer les liens les uns des autres ?

Un gadget comme un message ne place qu'un espace entre les mots, même si on en encode plusieurs.

Connaissez-vous une astuce ?

C'est incroyable comme votre blog a pu m'aider! Je n'y connaissais rien en langage html... Merci! J'ai un problème avec mes liens dans le haut: je voudrais qu'ils s'inscrivent SUR l'image de la barre horizontale que j'ai insérer et je ne trouve pas comment... J'ai que réussis à les mettre complètement en haut (comme présentement) ou en bas... Merci! http://chezpasko.blogspot.com

Encore moi ... :-)
Euh j'ai stp une petite question mais qui nécessite que tu jettes un coup d'oeil sur le template de mon blog avant: http://donnacarpediem.blogspot.com/
En haut du cadre central des posts, il y a comme un ourlet/rideau à petites fentes. Ce n'est pas que de la déco. Dans la démo de mon template, ce ruban était la barre de navigation.
Je voulais donc stp savoir s'il y avait moyen de situer les pages de ma barre de navigation à cet endroit même ...
Voilà !

Merci encore pour tout le reste, presque tout mes widgets viennent d'ici :-)

@CallMeNaomi ©
J'ai pas compris de quoi il s'agit !!!

@Anonyme
ça devrait marcher en ajoutant ça :
 

sniff ... pas de réponse ...

@Donna
C'est compliqué, j'ai pas le temps dsl

Bonjour,
Petit problème pour cette barre de menu!
Voilà mon blog: http://roliesa.blogspot.com/
Je souhaiterais que le menu soit à l'horizontale et sans boutons.
Merci d'avance

bonjour, je suis attentif a ton site que je trouve très bien. Je poste pour la première fois et je te remercie.
Ma question est tout simple: tu expliques ici comment réaliser une barre de nav. Je voudrais obtenir le même effet que la tienne, c'est a dire, cette surbrillance de couleur moutarde que tu as sur ton site lorsque l'on passe la souris sur les onglets du menu de navigation (accueil, astuces,widget...)
merci d'avance.

Il faut ajouté quelques code CSS ce qui complique la tache un tout petit peu !!!

huhu ok ok ) bon je vais me contenter de la version moins compliquée )

Soufiane j'ai un templates 3 colonnes. Une centrale réservées aux messages et 1 de chaque côté pour les menus,etc. Je voudrais avant de commencer les travaux savoir si c'est possible de placer la barre juste en dessous de l'entête du blog sur toute la largeur. Tout en sachant qu'en regardant de plus prêt mon templates... je m'aperçois qu'il ne prévoit pas cette possibilité de déplacement... Merci par avance pour ton aide et ta disponibilité. (http://grandescauses@blogspot.com)

bonjout soufiane ! merci beaucoup pour tout ses tutos !!!!

moi j'ai un petit soucis, j'aimerais que tu m'aides... j'ai fais tout comme tu as dis, mais j'ai le widget page qui est en dessous du html que j'ai mis en dessous de ma bannière ... j'ai mal fais un truc ??

http://blogaaly.blogspot.com

Bonjour! Super ce tuto!! J'ai crée la barre horizontale, mes onglets sont des images, comment est ce que je fais pour relier l'image à des pages?
Merci beaucoup!

Bonjour, ayant trouvé se blog par hasard je me réjouit d'en apprendre un peu plus sur Blogger, merci pour ton blog.

Ma question est comment arriver à réduire et repositionner un peu comme sur ton blog ma barre ou se trouve les liens Accueil | Contact et A propos.
Si tu as 2mn pour voir sur mon blog encore en construction http://lienswebdebutant.blogspot.com/ j'aimerais voir cette barre sur la droite du nom de mon blog.

Merci

Bonjour, merci beaucoup pour tous tes conseils, j'essaie peu à peu d'améliorer mon blog grâce à ça ! (mais c'est laborieux, je suis un peu lent)

Bonsoir
je suis degouté je peu pas mettre la barre de menu sous mon entete...grrrr:(
tu aurais une idée Soufiane?
merci d'avance
Cordialement,

Moi ma barre es toute chelou XD

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

bonsoir ou bonjour comme tu veux, je découvre ton blog, et je trouve que ce que tu fais ici est super!
grace à toi j'ai viré ma navbar, je m'essaie maintenant aux onglets, comment fait tu pour une autre couleur que le bleu ? ton exemple avec blue fonctionne mais je ne sais pas comment faire pour une autre couleur!...
et puis c'est bien j'ai mis 3 onglets, pour l'instant cela me suffit, c'est un blog de scrapbooking, et je veux un onglets pour aller sur mes messages ayant trait aux freebies, et un pour mes messages sur mes pages, mais comment faire pour que l'onglet envoie sur ces messages ????
Désolée, je suis novice et le peu que je sais est ce que j'ai compris en lisant ce que des gens comme toi veulent bien nous offrir!
bon en attendant ta réponse, je vire mes onglets, je les remettrais quand j'aurai compris cce que je dois faire ....

bon pas utile de me répondre ici, j'ai migré sur le post barre horizontale de navigation !!!

je suis revenue par ici car la barre ne voulait pas s'afficher correctement, et YESSS j'ai tout compris j'ai mis les search/label et les couleurs tout fonctionne !!!!

Bonjour,

Une question peut -être bteau mais chaque onglet ne peut correspondre qu'a des pages déjà créée oubien à certains widget?

Merci super !! c est tt simple et ca fonctionne tres bien. Exactement ce que je voulais. merci encore !!

bonjour!
merci pour cette astuce super!!
du coup j'ai quand meme une petite question : est qu'il y aurait moyen d'enlever les barres entre les mots de la barre?
En fait je souhaiterais avoir une barre comme celle ci: http://www.roostblog.com/ mais en laissant mon titre tout en haut et pas au milieu.. enfin quelque chose de simple sans trait et avec assez d'espace entre les mots pour que ça prenne réellement toute la largeur (j'ai bien mis mon gadget en dessous du titre mais comme je n'ai pour l'instant que 3 sections ça ne prends vraiment pas assez de place!!)

Je ne sais pas si ce que j'ai dit est très clair mais voila c'est ce que je recherche!
En tout cas merci deja pour les conseils!!
mon blog: http://eggsflour.blogspot.com/

Bonjour, en effet merveilleux ton blog Soufiane! Je n'y connais mais rien du tout en HTML, et j'arrive grâce à toi petit à petit à personnaliser mon blog à ma convenance! Pour cette barre de lien en haut, comment peut on mettre un peu plus d'espacement entre les mots (les liens plutôt) et les barres verticales qui séparent chaques liens?

Merci.

Hello Soufiane peut ont faire un sous menu ?
Ex: Accueil/présentation/contact/ ...
Merci pour d'avance bonne journée

http://leqilibre.blogspot.com

Bonjour, depuis que ce post a été écrit, il y a surement eu des modif sur blogger car aujourd'hui en juillet 2012, quand je clique sur "Mise en page" puis sur "Ajouter un gadget" IL N'Y A PAS DE FONCTION "HTML/JavaScript" c'est a dire AUCUN endroit où copier/coller le code suivant :(
Il y a juste une fenêtre qui s'ouvre et le choix entre les gadgets déjà tout fait. J'ai aussi essayé d'aller dans modèles puis "code HTML" afin de le modifier mais je ne m'y retrouve pas: à quel endroit dois-je copier coller le code?
merci d'avance :)

Bonjour ! Je viens de découvrir ton blog qui est vraiment génial! C'est super de nous aider comme ça :)
Alors, je voudrais faire une barre horizontale mais DEBILE DE L'INFORMATIQUE que je suis, je ne sais pas comment créer les liens d'abord (du genre comme cette barre-ci : http://www.kayture.com/ ) J'aimerai avoir les même liens je sais comment installer ceux de facebook etc mais pas les liens "contact" et "presse" .
Merci beaucoup :) !!!

Bonjour,
Est-il possible d' établir un menu permettant d' atteindre un paragraphe particulier dans une page? vous comprendrez mieux ma question, en consultant mon blog.
marseille-sud.blogspot.fr

Merci pour votre patience

Excuses, l' adresse complète de mon blog est:
http://marseille-sud.blogspot.fr/

En 2 clics la barre et installée ! merci pour ce tuto

vraiment super t es infos pour moi qui debute
ton blog est une reference

oui tout a fais d accord avec Laurent

Vraiment super comme blog!
J'ai réussi à mettre en place pas mal de chose comme la barre de menu, les widgets facebook et twitter sur mon blog!
Je te laisse te faire ton opinion, si jamais tu as des suggestions :

lesplusbeauxbuts.net

Je vois que le post date de longtemps mais j'ai bien créé mon onglet "contact" mais je ne sais pas comment le remplir, pour que lorsque l'on clique dessus il y ait un texte avec l'adresse email... ??

je ne peut mettre que un article dans mon onglet.... comment faire ?

Bonjour, j'ai une barre de lien faite avec blogger et un template qui lui met un fond en dégradé (je sais pas si c'est clair alors je mets le lien de mon site pour que vous puissiez voir de quoi je parle : http:/www.dessinsfantastiques.blogspot.com)

Le problème c'est que ce fond part tout à droite de l'écran et va jusqu'à l'autre bout, et moi je voudrais qu'il s'arrête à peu près aux limites de la bannière de mon site.

Voici le code du background :

.tabs-outer {
overflow: hidden;
position: relative;
background: #ffffff url(//fc04.deviantart.net/fs70/f/2013/240/b/3/tabs_gradient_light6_by_dessins_fantastiques-d6k31a8.png) repeat scroll 0 0;
}

Je voudrais donc savoir comment modifier le code pour qu'il puisse être délimité des deux côtés !

Merci d'avance !

Bonjour j'ai du mal à trouver "modifier code HTML" dans "mise en page".

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

Bonjour Soufiane,
petit souci sur mon blog www.viktoire.com:
la barre horizontale du gadget pages située sous ma bannière ne s'affiche correctement que sur certains appareils, comme pc 17 pouces mais pas sous ipad ou 15 pouces. dans ces deux cas un petit bout noir vient se mettre au bout de la barre.
J'ai tout essayé dans le CSS : text-align:center, width: 96%, margin-left:14px... Rien ne reste identique sous les 3 format de médias.
Que faire ???

Merci beaucoup de m'aider.
Viktoire

Bonjour Soufiane ,

je souhaiterai savoir comment intégrer mes articles à mes onglets.
Je viens d'utiliser ta méthode pour creer les onglets , c'est magique merci ;-) .
Par exemple : je souhaiterai quand mes lecteurs cliques sur " Code Promo" et bien qui qu'il soit diriger sur les articles "Codes Promos" . Peux etre qu'un tuto existe déjà??
Merci de me venir en aide s'il te plait , je pense qu'il faut organiser mes articles et les rattacher aux bons onglets?????


Merci de nous faire profiter de votre savoir faire
Julien

Bonjour,
Et comment tu as fait pour insérer un favicon juste derrière "accueil"?

Bonjour,
Et comment tu as fait pour insérer un favicon juste derrière "accueil"?

Bonjour, je cherchais à intégrer une barre de menu dans mon blog "blogger", débutante, j'ai suivi tes indications et le résultat est impeccable, sauf.. que lorsque je clique sur un lien, par exemple "I love it", il me dit que la page n'existe pas.. Et je ne sais pas comment mettre mes articles dans ses catégories par exemple. Merci pour ta réponse et merci pour ton tuto!