Tutoriel : ajout d'une section dans un entête, mise en oeuvre.

Au fur et à mesure de la construction de ce blog, je me propose, à l'aide de quelques didacticiels, de vous faire partager la façon dont j'ai procédé pour le concevoir.

  

Aujourd'hui je vous propose la mise en pratique de mon tutoriel sur le partage de l'entête. Ça tombe bien car vous avez du remarquer qu'il était légèrement ardu... Je vais donc essayer de simplifier les choses en créant, pas à pas avec vous, une nouvelle section dans mon entête. En effet, rappelez-vous. Après avoir crée ma bannière, je me suis rendu compte qu'il me restait de la place en hauteur pour une section supplémentaire dans mon entête. Comme j'ai supprimé ma navbar (si vous voulez savoir comment, direction commentaire), les visiteurs de mon blog n'ont plus la possibilité de faire de recherche. La boucle est bouclée! Je vais mettre un lien de recherche dans ma nouvelle section. (Merci à Rodney et Amanda pour la partie sur le widget Lien de recherche).

Etape 1) Entrez dans l'administration de votre site (identifiant, mot de passe), puis cliquer sur l'onglet "Modifier le code HMTL" pour entrer dans le code du modèle de votre blog. Encore une fois, avant toute modification, il vaut mieux sauver votre modèle initial comme je vous l'ai déjà indiqué ici. Une fois la sauvegarde effectuée, chercher le code suivant :   

 <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Génération 68 et Jeux Vidéo (en-tête)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right-top' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>
<div id='header-right-bottom'>
<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Choose your language / Traduction.' type='HTML'/>
</b:section>
</div>
</div>

Comme nous l'avons déjà vu, il s'agit du code qui créé effectivement nos sections. J'ai isolé en orange le code qui fabrique la section où se trouve mon widget Google traduction (regardez mon entête pour le visualiser). Comme le lien de recherche est aussi un widget, je vais simplement copier cette partie de code et la coller juste avant la dernière balise </div> avant de la modifier comme suit:

<div id='header-right-down'>
<b:section class='header' id='header-right-down-section'showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Chercher / Search this Blog.' type='HTML'/>
</b:section>
</div>    

J'ai tout d'abord modifié le nom de la section bien sûr de 'header-right-bottom' à 'header-right-down'. Dans un deuxième temps, j'ai changé son identifiant de 'header-right-bottom-section' à 'header-right-down-section'. Il faut ensuite changer l'identifiant du widget que l'on y mettra de HTML1 (identifiant du widget traducteur) à HTML2 (identifiant du widget recherche que nous allons créer ultérieurement). Enfin, on laisse bien entendu le type à HTML, puisque nous allons y mettre aussi du code HTML  pour définir le widget Lien de recherche.

Etape 2) Maintenant que nous avons créé notre nouvelle section (nom: header-right-down, identifiant: header-right-down-section), il faut coder son aspect. En ce qui me concerne, je veux que ma section Lien de recherche apparaisse exactement de la même façon que mes deux autres sections. C'est à dire sur fond orange avec un liseré orange clair. Là encore, je vais faire un simple "copier" d'un code précédent et le coller avec quelques modifications:

cherchez le code:

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right-bottom {
width: 40%;
height: 116px%;
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;
}

... copier / coller le juste en dessous puis remplacez-y tous les bottom par down (ou ce que vous aurez choisi bien sûr):

#header-right-down-section {
padding: 0 5px 10px;
}

#header-right-down {
width: 40%;
height: 116px%;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-down ul {
margin: 0;
padding: 5px;
}

#header-right-down ul li {
display: inline;
padding: 5px;
}

Enregistrez votre modèle et le tour est joué. La troisième section figure bien avec le même formatage que les précédentes. Par soucis d'uniformité, j'ai disposé mes trois sections, qui sont l'une sur l'autre à droite de ma bannière, de manière à ce qu'elles recouvrent verticalement l'intégralité de la hauteur de ma bannière. Celle-ci fait 350 pixels de haut. J'ai donc paramétré chaque section à 116 pixels de hauteur (350/3). Blogger se débrouille tout seul pour ajuster le tout et je suis assez satisfait du résultat. Dorénavant, il ne me reste plus qu'à travailler les couleurs de cet entête et j'en aurais fini au moins partiellement.

Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.