3 sections à l'entête de votre blog

Sur Blogger Buster, l’entête est constitué de trois sections. La première comprend la bannière (pas plus de 500 pixels). Dans la deuxième section se trouve le widget des infos Twitter tandis que dans la troisième section se trouve une barre de recherche et un menu de navigation.

Voici un blog test qui montre clairement la séparation entre les trois sections de l'entête.

Pour créer arriver à cette fin, voila ce que vous devez faire tel que conseillé par Amanda :

1. Aller sur « Mise en page » > « Modifier le code html » et trouvez ceci dans le code HTML de votre modèle :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Le titre de votre blog apparaît ici(Header)' type='Header'/>

</b:section>

</div>

Sélectionnez l’entière section ci-haut et remplacez-la par celle-ci :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Nom de votre blog (Header)' type='Header'/>

</b:section>

<div id='header-right'>

<b:section class='header' id='header-right-top' showaddelement='yes'>

</b:section>

</div>

<div id='header-right-bottom'>

<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>

</b:section>

</div>

</div>

2. Il vous faut maintenant changer quelques styles css contenu dans la section <b:skin> :

Note : Il se pourrait que les éléments à changer ne soient pas exactement comme mis ici dans votre modèle. Les éléments repris ici sont ceux du modèle Minima. L'essentiel ici sera de changer les propriétés contenues dans : a) #header-wrapper b) #header-inner et c) #header.

De même, vous pouvez changer la largeur tel que mis ici afin de l'harmoniser avec votre modèle.

a. Trouvez :

#header-wrapper {

border: 1px solid #000000;

margin:0 auto 10px;

border:1px solid $bordercolor;

clear: both;

word-wrap: break-word;

overflow: hidden;

}

Remplacez-le par :

#header-wrapper {

width: 950px;

border: 1px solid #000000;

margin:0 auto 10px;

border:1px solid $bordercolor;

clear: both;

word-wrap: break-word;

overflow: hidden;

}

b. Trouvez :

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Remplacez-le par :

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

c. Trouvez :

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

Remplacez-le par :

#header {

width: 500px;

float: left;

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header-right {

width: 400px;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;

}

#header-right-top {

padding: 0 5px 10px;

}

#header-right-bottom-section {

padding: 0 5px 10px;

}

#header-right ul {

margin: 0;

padding: 5px;

}

#header-right ul li {

display: inline;

padding: 5px;

}

#header-right-bottom {

width: 400px;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;

}

#header-right-bottom ul {

margin: 0;

padding: 5px;

}

#header-right-bottom ul li {

display: inline;

padding: 5px;

}

Enregistrez votre modèle.

3. Ajouter des éléments à votre entête : Pour cela, aller sur « éléments de la page ». vous y verrez la possibilité d’ajouter un trois éléments à l’entête.

Veillez à ce que votre bannière ne dépasse pas 500 pixels.

Si vous ajoutez une liste des liens, elle apparaîtra d’une manière horizontale et non verticale.

Pour ajouter une barre de recherche, cliquer sur ajouter un élément à la page et mettez le code que vous trouverez ici ou ici (avec google recherche des blogs).

Il existe aussi un moyen de mettre 3 colonnes à votre bas de page.

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. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.