3 sections à l'entête de votre blog

By
Advertisement


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.


3 commentaires:

  1. Encore une astuce sympa, clairement expliqué!

    Une adresse intéressante où on peut sommairement bidouiller le look de blogger, rajouter des colonnes, etc.:
    http://psyc.horm.org/

    RépondreSupprimer
  2. Bonjour Rodney !
    peut-on faire quelque chose de similaire pour le pied de page ?
    Merci encore pour tout ce que j'apprends ici

    RépondreSupprimer
  3. @ Vek : C'est possible d'avoir 3 colonnes au pied de page (click sur le lien, tu lira l'article).

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT