Personnaliser son blog - Personnaliser.canalblog.com

Astuces et tutoriels pour personnaliser et rentabiliser votre blog ou votre site web ! Découvrez tous nos conseils sur Personnaliser.canalblog.com !

 

04 mars 2008

Insérez une barre de menu horizontale sur votre blog !

Pour installer un menu horizontal "moderne" comme celui figurant sur mon blog sur les biocarburants, il vous suffit de suivre à la lettre les étapes suivantes (il s'agit d'un menu de type CSS, pour les connaisseurs) :

1. Rendez-vous sous l'onglet "Apparence"

2. Cliquez sur "Editer les fichiers de ce modèle"

3. Choisissez dans le menu déroulant la première page sur laquelle vous souhaitez installer le menu en question (par exemple, la page d'accueil)

4. Pour que le menu s'affiche juste au-dessous de votre header (la bannière de titre de votre blog), copiez-collez l'ensemble du code suivant après la balise <div id="topbar"> (vous la trouverez 7 ou 8 lignes après </head>) :

<!-- DEBUT Bloc BARRE DE MENU -->

<div id="nav" align="center">
    <ul>
        <li><a href="http://VOTRESITE.canalblog.com">Accueil</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html">CATEGORIE1</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE2/index.html">CATEGORIE2</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE3/index.html">CATEGORIE3</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE4/index.html">CATEGORIE4</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE5/index.html">CATEGORIE5</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE6/index.html">CATEGORIE6</a></li>
        <li><a href="http://VOTRESITE.canalblog.com/archives/CATEGORIE7/index.html">CATEGORIE7</a></li>
</ul>
</div>

<style type="text/css">

#nav li, #nav ul {
    margin: 0;
    padding: 0;
    display: inline;
}

#nav li a:link, #nav li a:visited {
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    font-family: verdana;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    background: #fff url(
http://p2.storage.canalblog.com/28/17/198194/17825892.gif) repeat-x;
    padding: 0 23px;
}

#nav li a:hover, #nav li a:active {
    background: #000 url(
http://p2.storage.canalblog.com/28/17/198194/17825892.gif) 0 -32px;
    padding: 0 23px;
}

#nav  {
  width: 1000px;
  margin: 0 auto;
}

</style>

<!-- FIN Bloc BARRE DE MENU -->

5. Pour personnaliser ce menu :

5.1. Les titres / liens de votre menu :

a- Remplacez "http://VOTRESITE.canalblog.com" par l'adresse de votre blog
b- Remplacez "http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html" par l'adresse complète de la page menant aux articles postés dans votre 1ère catégorie. Pour obtenir cette adresse, cliquez sur le lien menant vers votre 1ère catégorie sous la rubrique "catégories" figurant dans l'une de vos colonnes. Ensuite, il vous suffit de copier l'adresse affichée dans la barre de navigation et de la copier directement à la place de "http://VOTRESITE.canalblog.com/archives/CATEGORIE1/index.html"
c- Remplacez l'expression CATEGORIE1 située sur à la fin de la ligne
.../index.html">CATEGORIE1</a></li> par le nom que vous souhaitez donner à votre 1ère catégorie
d- Il vous reste à effectuer la même démarche pour les catégories suivantes.

5.2. Le design de votre menu :

a- Choisissez le design de votre barre de menu parmi les images suivantes (la couleur du dessus sera celle de votre barre de menu, celle du dessous sera celle qui apparaitra lorsque vous survolerez ou cliquerez sur une rubrique du menu) :

menu type 1

menu type 2

menu type 3

menu type 4

b- Faîtes un clic droit sur le design de votre choix puis sélectionnez "Enregistrer la photo sous..." > choisissez "Bureau" pour que cette image soit enregistrée sur votre bureau, donc facilement accessible.
c- Rendez-vous ensuite sous l'onglet "Nouveau message". Dans un message vierge, cliquez sur l'icône "Insertion d'un fichier" située à droite de la barre d'édition. Une fenêtre s'ouvre : cliquez sur "Parcourir" et sélectionnez sur votre bureau l'image enregistrée précédemment.
d- Allez sous l'onglet "Outils" puis cliquez sur la rubrique "Gestion des fichiers". Cliquez ensuite sur le dossier "docs" et repérez le nom du design que vous venez d'ajouter.
e- Sur le nom du design en question, faîtes un clic droit et sélectionnez "Propriétés". Sur la page qui s'ouvre, vous trouverez la ligne "Adresse (URL)" commençant par http://storage.canalblog.com/. Vous allez sélectionner l'ensemble de cette adresse et la copier.
f- Dans les deux expressions suivantes, remplacez les deux adresses situées entre parenthèses par l'adresse URL que vous venez de copier :

#nav li a:link, #nav li a:visited {
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    font-family: verdana;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    background: #fff url(http://storage.canalblog.com/XX/XX/XXXXX/XXXXXXX.gif
) repeat-x;
    padding: 0 23px;
}

#nav li a:hover, #nav li a:active {
    background: #000 url(
http://storage.canalblog.com/XX/XX/XXXXX/XXXXXXX.gif) 0 -32px;
    padding: 0 23px;
}

5.3. Réglez la largeur de votre barre de menu en remplaçant la variable située après "width" par la largeur de votre bannière de titre :

#nav  {
  width: 1000px;
  margin: 0 auto;
}

5.4. Remarque : il est conseillé de ne faire apparaître dans la barre de menu que les principales catégories de votre blog (5 ou 6), pour éviter les bugs d'affichage (le plus courant étant l'affichage de votre barre de menu sur 2 lignes).



Commentaires

    Super ce blog, j'ai customisé le mien grâce à toi !
    Par contre j'ai deux questions :
    1. Est-il possible de changer les couleurs du menu horizontal ? (mon blog est dans les tons rose-violet, ce serait plus joli)
    2. Comment créer des titres de catégories comme les tiens, des rectangles de couleur ?
    Merci beaucoup et encore bravo (le blog sur ls biocarburants est magnifique !!)

    Posté par eluise, 08 mars 2008 à 16:13
  • Je viens d'essayer cette barre de menu, ça ne marche pas !

    Posté par eluise, 09 mars 2008 à 21:21
  • j ai essayé et j ai réussi ....je m exerce sur un brouillon

    j ai un peu peur de basculer mon blog en mode avancé
    j ai pas compris pour la banniere

    Posté par zazou, 13 mars 2008 à 08:03
  • Hello bravo pour ton blog! J'ai ajouté ton lien sur le site de tutofaf.canalblog.com, ça pourra aider du monde.
    Amicalement blog

    Posté par Lavande, 24 mars 2008 à 08:20
  • bouton pour les catégories

    Bonjour et bravo,
    Voilà j'aimerais avoir des boutons à la place de mes catégories exemple : un bouton pour voiture un autre pour moto etc ... je n'arrive pas à l'insérer avez vous une idée, je parle du bloc categoryname$

    Posté par dom, 25 mars 2008 à 18:27
  • bravo

    Salut, j'ai essayé plusieurs fois et toujours le même résultat : cela ne fonctionne pas , je me demande si il n'y a pas d'erreur dans ton code...

    Posté par Laurent, 12 mai 2008 à 13:00
  • Bravo et encore merci

    Bravo et encore merci, j'ai pu trouver ce qui n'allait pas et j'en étais la cause bien sur...encore un grand merci pour ton aide précieuse et bonne continuation....

    Posté par Laurent, 12 mai 2008 à 13:03
  • merci pour ce fabuleux coup de pouce !

    Posté par lenka, 03 juin 2008 à 20:41
  • Merci!

    Bonjour,

    Je vous remercie sincerement pour votre blog qui est une mine d'informations tres pedagogique pour les "nuls" comme moi...

    J'ai reussi grace a vous a installer la barre de menu. Je ne me suis pas encore attachee a essayer d'en changer les couleurs de font, les polices, etc...

    Cependant, j'aurais deux questions auxquelles j'espere que vous aurez la gentillesse de bien vouloir repondre:

    - la barre de menu est bien installee mais bien que je lui ai donne la meme longueur que l'espace entier (colonnes+zone texte+bordures), lorsque je clique sur voir le blog, elle ne s'affiche pas du tout sur toute la largeur de la banniere?

    - J'ai bien compris qu'il fallait recopier le meme code sur toutes les pages. Je viens de commencer par page des archives et pages des index des archives. Seulement, le menu est toujours present comme sur la page d'accueil mais toute ma colonne de texte (j'ai mis les deux colonnes a droite) se deplace completement sur la gauche en eliminant la marge. La zone de texte et les deux colonnes n'ont tout a coup plus les memes longueurs!

    J'espere que j'ai reussi a vous expliquer la situation correctement et que vous voudrez bien m'aider. Merci beaucoup d'avance en tous cas.

    Bon dimanche.

    Posté par Lolotte, 29 juin 2008 à 17:11
  • hummm

    Merci pour tout vos conseils.

    J'ai crée un second blog de "test" pour m'entrainer au mode avancé, mais malheureusement, je n'arrive pas installer la barre horizontale. J'ai beau chercher dans tout les sens, elle refuse systématiquement de s'afficher. Alors est-ce qu'il y aurait une subtilité implicite que je n'aurait pas saisie ?

    Il faut bien insérer le code après ( et pas "topbar-logo") ?
    Sur la longue ligne des ?

    SI vous pouviez me renseigner, ce serait super.
    Merci

    leia-chan

    Posté par Leia-chan, 19 juillet 2008 à 14:16
  • Ah oui, j'avais oublié que les balises n'apparaissaient pas...
    alors je disais :

    Il faut bien insérer le code après ( et pas "topbar-logo") ?
    Sur la longue ligne des ?

    (en espérant que comme ça, ça passe...)

    Posté par Leia-chan, 19 juillet 2008 à 14:19
  • Bon désolée, encore moi.
    En farfouillant, j'ai réussi à avoir ma barre là où je le voulais, mais maintenant, j'ai une catégorie par ligne... ( et donc 4 lignes de liens puisque j'ai 4 catégories).
    ET j'ai pas trouvé où est-ce que ça buggait.

    SI tu as une idée...

    Posté par Leia-chan, 19 juillet 2008 à 16:01
  • je tente, j'ose et ça fonctionne, pour moi, il faut que je le mette avant sinon ça ne va pas, j'ai changé la couleur, plus de bisolor mais les couleurs de mon blog en changeant les couleurs de fond...ça parait idylique mais j'ai beau le mettre sur toutes les pages et bien ça n'apparait que sur la page d'accueil!!! Ca fait un bon moment que j'y suis mais, je ne désespère pas de trouver.
    merci pour ce super tuto!

    Posté par diane, 19 août 2008 à 15:38
  • non en fait, quand je l'utilise vraiment et pas seulement en visualisation ça marche super!!!

    Posté par diane, 19 août 2008 à 17:01
  • merci beaucoup pour ce tuto !!! ça marche !!

    Posté par mona (sabrina), 01 septembre 2008 à 11:46
  • Bonjour

    Il y a un moment que j'ai installé ce menu qui fonctionne très bien mais je voudrais le mettre beaucoup plus à gauche avec une petite marge coté gauche; je souhaiterai qu'il soit aligné avec ma bannière juste en dessous
    Merci de me donnerla solution
    Bonne journée
    Alain

    Posté par Alain, 25 septembre 2008 à 08:21
  • Merci et bravo!

    Blog super riche, articles clairs, bravo pour le travail fourni et merci de le partager!

    J'aimerais donc mettre votre blog dans mes liens, mais le mien est à caractère "adulte"... cela vous gênerait-il d'y figurer?

    Cordialement,

    Elle.

    Posté par Elle, 04 décembre 2008 à 12:13
  • bonjour, je débute et dans mon mode apparence, je 'nai pas d'onglet "éditer les fichiers de ce modèle".
    qu'ai-je donc fait de mauvais ?

    Posté par idemm, 11 février 2009 à 08:20
  • EXCELLENT

    JE viens de me lancer en mode avancé et votre tuto sur le menu est genial!! il marche parfaitement!

    J aurai aimé savoir si il etait possible de mettre des sous menus sur cette barre? si oui quelle est la procédure?

    Merci beaucoup

    Posté par Arciesis, 03 novembre 2009 à 13:25

Poster un commentaire







 

© Personnaliser.canalblog.com | 2007 - 2010 | Tous droits réservés | Plan du site
La reproduction des informations présentes sur ce site sous toute forme et sans autorisation est strictement interdite.
Personnaliser.canalblog.com se réserve le droit d'éditer ou de modifier ces informations à tout moment.