Tutoriel: partager un entête pour y insérer widgets et menu.

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.

Le pitch:

Maintenant que nous savons insérer du code HTML dans un message sans qu'il ne soit interprété inopportunément, nous allons pouvoir passer à quelque chose de beaucoup plus sérieux. Je pense que nous avons ou allons tous être confronté au problème suivant. A force de poser les uns sous les autres les widgets et autres éléments de page, on finit par être confronté à certains enjeux de visibilité. Que faut-il mettre en premier dans ce fameux "coin d'or" haut gauche, celui qui attire les yeux de nos si chers visiteurs? Les anciens articles? Les liens d'abonnement? Le widget de traduction si important pour étendre l'impact géographique du blog?... Question difficile n'est ce pas? Sans qu'elle ne représente la panacée, une première solution serait de profiter un peu plus de notre entête (ou header). En effet, plutôt que de le laisser sans autre rôle que celui d'afficher titre et description du blog, pourquoi ne pas le partitionner et y inclure les éléments de page qui nous volent une si précieuse place sur la page principale? Je tiens à souligner que je me suis très largement inspiré des articles de Blogger au bout du doigt et de Blogger Buster pour cet article. Je n'en revendique pas la paternité. Simplement, à l'usage je me suis confronté à un certain nombre de faits ou problèmes qui m'ont poussé à "entrer un peu plus dans le code" que les articles initiaux peut-être. Et je vous en propose donc ici un condensé / développé en quelque sorte.

La soluce:

Etape 1: lorsque l'on modifie le code du template dans la mesure où nous allons le faire (et même dans une moindre mesure...), il faut toujours songer à sauver le template initiale en cas de problème. Draft Blogger vous offre cette opportunité. Allez sur http://draft.blogger.com/ et dans le tableau de bord, cliquez sur "Paramètres". Dans l'onglet "Général", tout en haut une option d'exportation du blog sous format Atom vous est proposée:

Il suffit alors d'exporter votre blog (son flux RSS en fait) sur votre disque dur. On peut alors commencer à travailler plus sereinement...

Etape 2: accédez au code HTML de votre page en cliquant sur "Tableau de bord", Mise en page", et "Modifier le code HTML". Blogger ne propose pas d'éditeur de texte digne de ce nom pour cette fenêtre. On y trouve notamment pas d'option de recherche/remplacement. Je vous suggère donc de copier l'intégralité de votre code dans Bloc-note / Notepad pour le modifier plus aisément.

Chercher maintenant le code suivant qui sera légèrement différent dans votre cas, ne serait-ce qu'en raison du titre du blog:



<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>



Ce code est celui du "Header-Wrapper", c'est à dire le container de votre entête. En l'examinant quelque peu, on voit qu'il y a une balise <b:section></b:section> qui indique que, pour le moment, notre entête ne comporte qu'une seule place, une seule "section". Elle contient le titre et la description (la petite phrase juste en dessous du titre) de votre blog. Le but fondamental de notre manœuvre est de créer d'autres sections pour y insérer nos autres éléments de page.

Encore une fois et dans la mesure du possible, il faut conserver le code initial en cas de problème (on ne prend jamais trop de précaution). Mais il faut tout de même le désactiver pour ne pas qu'il entre en conflit avec le nouveau code que nous allons introduire. Le plus simple pour désactiver un code est de le transformer en commentaire. De cette manière, l'interpréteur saura qu'il ne doit pas traiter cette partie de code. En HTML, le commentaire est compris entre les "balises" <!-- et -->. Ajoutez ces balises juste devant et derrière le code précédent:

<!--

<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>

-->

Etape 3: on peut maintenant inclure le code de notre container à trois emplacements. Un pour le titre te la description, deux pour les widgets. Voici le code à coller "à la place" du code précédent, c'est à dire juste au -dessous ou au-dessus puisque nous l'avons conservé en commentaire:

<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>

A vous, bien entendu, de modifier le titre du blog. Comme convenu, on remarque que ce code crée deux sections en plus de la première. Une section "header-right" qui sera en haut à droite et une section "header-right-bottom" qui sera en bas à droite. Nous voila avec nos trois sections, juste ce qu'il nous fallait.

Etape 4: Une autre partie de code est à modifier. En ce qui me concerne, mon entête initial, très simple, ne contenait qu'un #header sans autre section. J'ai donc du chercher cette portion de code et la mettre en commentaire comme ci-dessous:

<!--

#header {

padding-top:0px;

padding-$endSide:0px;

padding-bottom:0px;

padding-$startSide:0px;

margin-top:0px;

margin-$endSide:0px;

margin-bottom:0px;

margin-$startSide:0px;

border-bottom:dotted 1px $bordercolor;

background:$descbgcolor;

}

-->

Mais en ce qui vous concerne, votre entête peut être plus élaboré. Par conséquent, vous devez faire la même manœuvre que celle du #header POUR VOS #header-wrapper et #header-inner éventuels: mettez tout en commentaire. Si on désactive une partie du code, il faut la remplacer par une autre. Voici le code à introduire que j'ai quelque peu personnalisé pour mon blog:

#header-wrapper {

width: 1200px;

border: 1px solid #000000;

margin:0 auto 10px;

border:1px solid $bordercolor;

clear: both;

word-wrap: break-word;

overflow: hidden;

background:$pagetitlebgcolor

}



#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}



#header {

width: 58%;

float: left;

margin: 5px;

border: 1px solid $pagetitlebgcolor;

text-align: center;

color:$pagetitlecolor;

}



#header-right {

width: 40%;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;



}

#header-right-top {

padding: 0 5px 10px;

}



#header-right a {
 color:#000000;
}
           
a:hover {
 color:$titlecolor;
}

a img {
  border-width: 0;
}



#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: 40%;

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;

}

Les modifications que j'ai apportées sont de plusieurs ordres. Attention, je n'ai pas vu le résultat sous plusieurs configurations. Par conséquent, je ne garantis rien quant-à la façon dont la chose apparaît sur l'écran de vos visiteurs. Le plus simple est d'essayer chez des amis avec différentes résolutions, différents navigateur... J'ai d'abord fixé la taille du container à 1200 pixel. Je dois dire que certains préconisent de ne pas dépasser 950 pixels. Je n'ai pas encore bien compris pourquoi... Pour ce qui est des tailles relatives des sections, j'ai adopté le système de pourcentage plus adapté à mon sens. Le header titre et description à 58 %. Les deux autres à 40%. Par ailleurs, j'ai fait en sorte que les cadres entourant le header titre et description ne soit plus apparent en leur appliquant la couleur du fond. Par contre j'ai laissé un liseré pour les sections widgets de droite. Enfin, j'ai ajouté le petit code suivant (déjà présent juste au-dessus, ne l'ajoutez pas) qui me permet de faire apparaître le menu de la section droite haute en noir:

#header-right a {
 color:#000000;
}
           
a:hover {
 color:$titlecolor;
}

a img {
  border-width: 0;
}

pour ce résultat non finalisé:

Bien. Jusque là je n'ai pas ajouté grand chose au tutoriel de base. Simplement à l'usage, vous remarquez peut-être que vos nouvelles sections ne se comporteront peut-être pas comme vous le souhaiteriez vraiment. En général ce que l'on vous propose c'est de mettre un lien de recherche dans l'une des sections et un menu dans l'autre. Le menu ne pose pas de problème, comme nous le verrons, et le lien de recherche est un widget "étroit". Mais dans mon cas, c'est le widget de traduction Goggle que je veux y mettre. Malheureusement ce widget est "épais" et pose un gros problème de décalage si on le met, tel qu'il est, en haut. Seule solution que j'ai trouvé jusqu'à aujourd'hui, mettre le menu en haut et le widget Google en bas. Alors tout va bien:

C'est bien gentil tout ça mais comment fait-on pour mettre tout ça dans nos toutes nouvelles section?

Etape 6: Allez depuis votre tableau de bord sur la mise en page de votre blog. Et là, surprise! Les trois sections de votre nouvel entête sont présents dans la mise en page (même si tout est un peu mélangé...). Ils sont donc modifiables interactivement:

A partir de là, rien de plus simple. Pour le menu, il suffit de placer une "Liste de liens" dans l'emplacement du haut (dans le cas d'un deuxième widget "épais"). Comme par magie, les liens se disposeront en ligne et non l'un sur l'autre. Pour le widget Google traduction, il suffit d'y mettre tout à fait conventionnellement un élément "HTML / Javascript" et d'y copier ce code. A autre widget, autre code bien sûr...



Et voila. pour voir mon résultat, il vous suffit de regarder l'entête de mon blog. A vous de personnaliser vos couleurs, vos widgets et même pourquoi pas le nombre de vos sections etc.etc.

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.