barre horizontale de liens (2)

Trouvé dans parcdusavoir.blogspot.com
Voici un autre tutoriel qui va vous permettre de créer une barre horizontale de navigation (barre de menu avec liens) dans votre blog Blogger/Blogspot.
Deux simples copier/coller suffisent pour appliquer cette astuce et vous avez le choix entre cinqs magnifiques barres horizontales comme celles-ci: (Démonstration ici)

 

Installation

Etape 1

Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML" et recherchez (Ctrl + F) le code suivant: </head>et juste avant ajoutez cette ligne:

<link href='http://blogspot.leblogger.com/css/glossyMenu.css' rel='stylesheet' type='text/css'/>

Etape 2

Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier / coller le code suivant :

<ul class="glossymenu">
    <li class="current"><a href="http://www.exemple.com/"><b>Accueil</b></a></li>
    <li><a href="http://www.exemple.com/2009/06/astuce-blogger-astuces.html"><b>Astuces</b></a></li>
    <li><a href="http://www.exemple.com/2009/06/widget-gadget-blogger.html"><b>Widgets</b></a></li>   
    <li><a href="http://exemple.com"><b>Souhaits</b></a></li>   
    <li><a href="http://www.exemple.com/"><b>Contact</b></a></li>
</ul>

-Ensuite déplacez ce widget en dessous de votre entête comme sur l’image:

Personnalisation

(Modifiez uniquement le code de l'étape 2)

• Choisissez parmi les 5 barres celle que vous voulez, puis remplacez glossymenu avec:
1. glossymenu
2. glossymenu bleu
3. glossymenu vert
4. glossymenu orange
5. glossymenu violet

• Remplacez les liens en rouge avec vos propres liens.

Forme générale d’un lien:

<li><a href="http://www.exemple.com/2009/06/widget-gadget-blogger.html"><b>Widgets</b></a></li>

Voilà votre blog a une barre horizontale des liens ce qui va considérablement améliorer la navigation.
Version simple de la barre de navigation.