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(https://storage.canalblog.com/28/17/198194/17825892.gif) repeat-x;
padding: 0 23px;
}
#nav li a:hover, #nav li a:active {
background: #000 url(https://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 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 https://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(https://storage.canalblog.com/XX/XX/XXXXX/XXXXXXX.gif) repeat-x;
padding: 0 23px;
}
#nav li a:hover, #nav li a:active {
background: #000 url(https://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).
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
