Une barre horizontale pour vos catégories

PelOmar m’a demandé de lui montrer comment j’ai affiché mes catégories au-dessus de ma bannière. Comme promis, et pour qu’il n’ait pas l’exclusivité, voici comment j’en suis arriver là.

Après avoir reçu un commentaire de Anne et fais un tour sur son Blog culinaire, que je vous conseille, j’ai été émerveillé par la beauté de sa bannière et de sa barre de menu. Pour ne pas la déranger, je suis allé voir le code html de son blog (ctrl+ u) et me suis mis à l’étudier.

Voici ce que j’ai découvert pour mettre une barre de navigation (catégorie, menu, etc.) à l’entête de son blog :

1.Ajouter les variables suivantes juste à la fin de la liste des variables

<Variable name="mainLinkbarBgColor" description="Main Linkbar Background Color"
type="color" default="#000000">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#7f7f7f">
<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#6131BD">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#7f7f7f">

2. Ajouter les codes Css en bleu juste avant la balise en rouge

/* ----- LINKBAR ----- */
#linkbar {
margin: 0px 0px 0px 0px;
padding: 0px 40px 0px 40px;
background: #113355;
border-bottom: 1px solid #113355;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
margin: 0px -10px 0px 0px;
padding: 2px 10px 2px 10px;
width:100%px;
text-decoration:none;
font: normal normal 75% Trebuchet, Trebuchet MS, Arial, sans-serif;
color: #FFFFFF;
background: #6131BD; (note à effacer ainsi que la parenthèse : les chiffres est le code de la couleur d’arrière plan)
border: 1px solid #FFFFFF; (note à effacer ainsi que la parenthèse : les 4 F sont le code de la couleur des titres qui s’afficheront)
border-top: 0;
}
#linkbar a:hover, #linkbar a:active {
color: #6131BD; (note à effacer ainsi que la parenthèse : les chiffres après # sont le code de la couleur des titres qui s’afficheront au passage du curseur)
background: #ffffff; (note à effacer ainsi que la parenthèse : les 4 F sont le code de la couleur d’arrière plan quand le curseur est sur le titre)
}
]]></b:skin>
</head>


3. Mettre les codes en bleu dans votre outer-wrapper (ou outer wrap)

<!-- start outer wrap -->
<div id='wrap'>
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no'>

<b:widget id='LinkList12' locked='false' title=' ' type='LinkList'/>

</b:section>

</div>

</div>
<!-- start header -->
<div id='header_wrap'>

4.Enregistrer son modèle

5. Se rendre sur "éléments de la page" et voir le nouveau widget Liste des liens juste au-dessus de l'en-tête. Cliquer sur modifier pour y ajouter les liens qui vont apparaître dans votre barre horizontale.

Si vous voulez afficher la barre de navigation juste après l'entête, mettez les codes en bleu ci-dessous après ceux en rouge (pour l'en-tête)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>

<b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList12' locked='false' title=' ' type='LinkList'/>
</b:section>

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.

Sentez-vous libre de laisser un commentaire.

Merci d'être passé.