Barre de menu

By
Advertisement

Après la première méthode pour ajouter une barre de navigation sur son blog, en voici une qui vous permet de mettre de lien comme menu de navigation juste au dessus de l'entête de votre blog.

Le processus est très simple:

1. Se connecter sur son compte Blogger, aller sur modèle, puis sur modifier le code HTML, là NE PAS cocher la case pour « Développer des modèles de gadget ». Cherche le bloc de code ci-après :

<div id='header-wrapper'><b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'><b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/></b:section><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='false' title='Le nom de votre Blog (Header)' type='Header'/></b:section></div>

Ajouter les lignes en rouge à l’emplacement indiqué.

Changez maxwidgets='1' en maxwidgets='3' et pour le showaddelement='no' changez no en yes showaddelement='yes'


2. Juste avant la balise ]]></b:skin> collez le code ci-dessous :


#menubar h2 {display:none;

}

#menubar ul {
list-style: none;

}

#menubar li {
float: left;

}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;

}

#menubar a:hover {
background-color: $headerCornersColor;

}

3. Enregistrer le modèle et se rendre “éléments de la page”, vous y verrez une nouvelle barre juste AVANTcelle de l’entête.

4. Cliquez sur modifier (vers la fin de la nouvelle barre) et intégrez les liens ainsi que le titre que vous voulez.

5. Enregistrez le tout et allez voir le résultat.

Astuce trouvé chez Hans.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Et n'oubliez pas de donner un point de plus à cet article en cliquant sur le petit bouton rouge .


13 commentaires:

  1. Bonjour Rodney, sais tu s'il est possible de mettre une barre de menu comme tu l'indiques sur un modèle classique de blogger.

    Je tente de faire ça, et disons que je ne suis pas très doué.

    Ce qui m'interesse vraiment c'est le fait que les boutons permutent de couleurs lors du passage de la souris et je n'ai pas encore réussi à trouver le tutorial pour faire celà sous blogger...

    @ bientôt, en éspérant une solution :)

    PS: au fait, très très bien ton blog.
    Le mien est un blog test , je passe de 2 à 3 colonnes j'ai donc crée un blog pour tester le template et différentes fonctions.

    @++

    RépondreSupprimer
  2. je crois avoir vu ça quelque part, je te cherche ça et on verra. Sinon, je n'ai personnellement jamais utilisé le modèle classique et me concentre trop donc sur le Nouveau blogger.

    RépondreSupprimer
  3. merci de ta réponse, en mode classique tout de se fait dans la modification du modèle, et quand on essaye d'insérer la barre, celà ne correspons évidemment pas.

    @++

    RépondreSupprimer
  4. Salut Rodney, je suis nouveau sur ton blog et je peux dire que c'est une petite mine d'or pour moi !

    Je voulais juste te demander, a propos de ce sujet, je fais exatement ce que tu dit de faire pour placer la barre mais je n'y arrive pas, à la fin j'ai toujours droit à "Le modèle est incorrect. Vérifiez que sa structure est correcte et qu'il est conforme aux spécifications de langue des modèles de Blogger.
    "
    (Suuper), je voulais savoir comment il était possible d'insérer cette barre de menu ! Merci à toi et à bientot !

    RépondreSupprimer
  5. Salut Rodney,

    Même problème que le commentaire précédent, j'obtiens le même message d'erreur ("Le modèle est incorrect. Vérifiez que sa structure est correcte et qu'il est conforme aux spécifications de langue des modèles de Blogger.
    ").

    Comment faire ?

    Merci.

    RépondreSupprimer
  6. ça marche pô non plus
    Même message d'erreur :-(

    RépondreSupprimer
  7. Moi ça me dit que les 2 variables headerTectColor et headerCorners Color ne sont pas définis. Comment faire et quelles valeurs leurs donner?

    RépondreSupprimer
  8. @ cclem : efface les mots $headerTextColor et $headerCornersColor dans le code css de l'étape 2. Il se pourrait que ces variables ne sont pas défiies dans ton modèle.

    @ Tous les autres : J'ai mis à jour l'article. Je crois avoir reparé l'erreur qui s'y était glisée.

    RépondreSupprimer
  9. bonsoir Rodney,
    tout d'abord merci pour ces explications...

    j'ai suivi tes instructions, mais j'ai un message me disant qu'il ne peut y avoir deux 'LinkList2',
    et que chaque LinkList doit être unique

    j'ai apparemment un gadget avec le même LinkList2 !

    voilà l'adresse de mon blog :
    http://kaktusss56.blogspot.com/

    merci de ta réponse...

    RépondreSupprimer
  10. Slt a tous! Bon moi j ai bien reussi a mettre la barre, mais ss la barre en fait, que les liens au dessus du titre de mon blog http://worldwidesalsa.blogspot.com/search/label/Text%20in%20English

    sauriez vous comment la mettre juste en dessous du cadre bleu?

    Merci d avance!

    RépondreSupprimer
  11. cher blogger ,
    merci pour toutes les explication que vous fournissez sur votre blog..

    depuis un moment j'essaye d'inserer un barre de menu sur mon blog qui s'agit de :http://delawer-omar.blogspot.com/

    mais je ne arrive pas à le faire même si avoir suivis toutes les instruction que vous avez noté!!

    que je puisse faire ??

    merci d'avance

    delawer

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT