barre horizontale de liens (3)

blogger-au-bout-du-doigt.blogspot.com

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>