Ce que je veux :

Une barre horizontale, placée immédiatement sous le top et présentant des liens vers diverses parties de mon blog qu'il me semble utile de rendre directement accessibles.

Plutôt que de faire un tuto général, je préfère vous en livrer un exemple commenté. On trouve sur le web plusieurs sites offrant des modèles, j'en retiendrais deux :

  • Alsacréations, dont la fréquentation est en tout état de cause recommandée pour ses nombreux tutoriels et son forum.
  • listamatic, chez css.maxdesign, également à placer dans vos signets.

Pour ma part, j'ai retenu Centred list navbar updated, un menu de Chris Hester pour Listamatic, que j'ai ensuite arrangé à ma sauce.

La source

Ordonques, puisqu'on veut le placer sur toutes les pages du blog sous le titre et qu'on connaît par cœur les radiographies, on sait qu'on doit édier le fichier _top.html n'est-ce pas ? Editons-le donc ajoutons à la fin du fichier ces liens sous forme de liste :

À noter : tpl:BlogURL est une fonction template qui affiche ce que vous avez indiqué dans les Paramètres du blog, champ URL vers le blog.

<ul id="nav-box">
  <li><a href="{{tpl:BlogURL}}">Accueil</a></li>
  <li><a href="{{tpl:BlogURL}}archive" title="Liste des mois de publication">Archives</a></li>
  <li><a href="{{tpl:BlogURL}}contact" title="Formulaire de contact">Me contacter</a></li>
</ul>

Quelques précisions :

  • Si vous êtes grand débutant, je vous recommande cette lecture pour comprendre les balises html employées ici.
  • Par souci de clarté, j'ai présenté la liste en retournant à la ligne pour chaque item, mais en fait il faut tout enchaîner pour faire face à un bug d'Internet Explorer lorsqu'il doit aligner des liens sur la même ligne.

Et maintenant la feuille de style :

/* ------------------------------------------------------------------- 
    NAVIGATION HORIZONTALE
------------------------------------------------------------------- */

/* Paramètres généraux de la liste (ul). Toujours mes marges à zéro,
 * le padding (marge intérieure) servira à dégager le texte en haut et en
 * bas de 5 pixels tout en le décollant également de 1em du bord droit
 * ce dernier point est indispensable pour Internet Explorer, comme on
 * le verra pour ul#nav-box li a { }. 
 * list-style-type : none; déclare que je ne place pas de puces devant 
 * chaque item.
*/
 ul#nav-box {
        margin : 0 0 1.5em 0;
        padding : 5px 1em 5px 0;
        list-style-type : none;
        background-color: #cc0;
        color: #4b4b69;
        font-weight : bold;
        font-size : 0.9em;
        text-align: right;
 }

/* Paramètres des items. display : inline; donne comme instruction de ne
 * pas faire de saut de ligne pour chaque item. Je redonne également une
 * marge intérieure haute et basse de 5 pixels pour que les items occupent
 * toute la place verticale créée pour la liste
*/
 ul#nav-box li {
        display: inline;
        padding : 5px 0;
 }

/* On retrouve le padding haut et bas de 5 pixels (car sinon Internet Explorer
 * va n'en faire qu'à sa tête) et j'ajoute un espace latéral de 1em de chaque
 * côté des liens. J'indique également la couleur des caractères des liens et je
 * place un bord gauche continu et blanc de 1 pixel de large. text-decoration :
 * none; indique que je ne veux pas que les liens soient soulignés (ce qui serait
 * le cas par défaut.
*/
 ul#nav-box li a {
        padding : 5px 1em 5px 1em;
        color: #4b4b69;
        text-decoration: none;
        border-left: 1px solid #fff;
 }

/* Ici, ce qui se passe au survol des liens : changement de la couleur du fond,
 * de la couleur des caractères, je n'oublie pas de remettre à ce lien survolé le
 * bord gauche que j'ai défini pour les liens « au repos ».
*/
ul#nav-box li a:hover {
        background-color: #4b4b69;
        color: #d9d940;
        border-left: 1px solid #fff;
 }

Voilà, vous savez tout sur la réalisation de cette petite barrette logée sous le top à voir sur le Petit Dotclear illustré. Attention : il ne faut pas oublier de donner au top une marge inférieure égale à 0 pour que cette barre soit collée juste en dessous.