Tutoriel pour embellir votre blog sous blogger

On m'a souvent posé la question "Comment se fait-il que ton blog ait un look différent des autres blogs Blogger ?". Cela m'a demandé pas mal de travail. J'ai procédé par étapes, en fait. A partir du modèle "scribe" (un des modèles pré-définis) j'ai d'abord voulu élargir la taille de l'espace où s'affiche le texte. Puis j'ai voulu changer le fond car je commençais à le retrouver un peu trop partout. Enfin j'ai fait un nouvel en-tête. Voilà quelques pistes pour faire pareil, sachant que je ne me souviens plus forcément de toutes les modifications que j'ai dû faire. J'ai procédé par essais/erreur, en enregistrant mon travail quand ça marchait bien.

Sachez d'abord qu'il vous faudra intervenir dans le code html de votre blog. Si cela vous fait peur, il vaut mieux vous tourner vers des sites où on propose des modèles tout faits, vous en trouverez de nouveaux en tapant blogger templates sous google.

Si vous savez intaller un nouveau gadget, sur le site cutest blog vous trouverez de nouveaux fonds de page gratuits faciles à installer.

Si vous ne savez pas du tout comment faire et cherchez quelque chose de différent, alors le site de Heidi Swapp, Rhonna Farrer et Janet Hopkins est fait pour vous. Mais c'est payant. Mais c'est superbe !

Si vous voulez vraiment personnaliser l'en-tête, le fond, les colonnes, alors c'est parti ! Affichez "Mise en page" et cliquez sur "Modifier le code HTML". Une fenêtre s'affiche, dans laquelle se trouve le programme dit feuille de style (style sheet). Vous pouvez faire défiler les lignes (scroller) avec un ascenseur à droite (voir figure ci-dessous).
En cliquant sur aperçu (le bouton bleu du milieu en dessous de la fenêtre), vous pouvez voir le nouvel aspect de votre blog au fur et à mesure de vos modifications. Rien n'est définitif tant que n'enregistrez pas (bouton orange). Et même si vous enregistrez, vous pouvez revenir au modèle de base en cliquant plus bas sur revenir au modèle classique. Si l'aperçu ne vous plait pas, vous pouvez annuler les modifications (bouton bleu à gauche) ou mettre de nouvelles valeurs.

Elargir la zone de texte
A priori, la largeur actuelle de la zone de texte vaut 660 pixels (px). En fait, il doit y avoir 440 px pour le texte et 220 px pour la colonne de liens. Cherchez la partie du code qui concerne l'apparence :
/* Layout
----------------------------------------------- */
Vous allez trouver plusieurs endroits où vous devrez changer la largeur totale (width) de la zone utile de votre blog, celle où il y a le texte.
#outer-wrapper {...
#main-top {...
#main-bot {...
#wrap2 {...
Vous pouvez mettre la valeur que vous voulez, supérieure à celle par défaut mais inférieure à 1100px. Si vous mettez une valeur trop grande, vos visiteurs risquent de ne pas voir toute la page sur leur écran et de donc devoir "scroller" (déplacer la barre d'en bas avec la souris) de gauche à droite ce qui est pénible. J'ai choisi 1024 px.

A ce stade, il vous faut encore régler les largeurs respectives de votre texte principal (main) et de la colonne de lien. Cherchez plus bas les paramètres
#main {... j'ai mis width:600px;
#sidebar {... j'ai mis width:250px;

Si votre fond n'est pas blanc, alors l'image qui sert de fond est probablement devenue trop petite, ainsi que l'en-tête et le pied de page. Mais nous allons voir comment y remédier.

Modifier le fond de page (background)
Mon fond de page est bleu à pois marrons. Il s'agit d'un fond de digiscrap, une image libre de droit, que j'ai stocké sur servimg.com. Elle fait 320px de large × 213px de haut, ce qui est plus petit que la taille totale de ma page, mais cela n'a pas tellement d'importance car il sera répété (repeat) pour s'adapter à n'importe quelle taille. Vous pouvez mettre votre propre image en remplaçant l'url par défaut par l'url de votre image hébergée sur servimg. Cherchez
/* Defaults
----------------------------------------------- */
body {...
et tapez l'url de votre image entre guillemets à l'intérieur des parenthèses comme ceci :
... background:#483521 url("http://i72.servimg.com/u/f72/11/22/30/87/scrape13.jpg") repeat;

En-tête et pied de page (main-top/bot)
J'ai fabriqué un en-tête façon scrap digital sans aucun logiciel à télécharger sur mon ordinateur. Ce n'est pas l'objet de ce post et je vous dévoilerai mon truc dans un prochain message. Au final, j'ai fabriqué une image qui fait 1024 px de large. Il m'a suffit alors de l'héberger sur servimg et insérer l'url au bon endroit comme pour le fond :
#main-top {...
background:#FFF3DB url("http://i72.servimg.com/u/f72/11/22/30/87/entete12.jpg") no-repeat top $startSide;

Le pied de page me plaisait comme il était, je me suis contenté de changer la largeur pour l'adapter à mon nouveau look. Autrement dit, j'ai piqué l'image par défaut, je l'ai ouverte avec mon logiciel de traitement basique d'images préféré IrfanView et redimensionné pour qu'il fasse 1024 px de large, par chance la résolution était suffisante pour que ce ne soit pas laid. Je l'ai remis sur servimg et mis ma nouvelle url à la place de celle par défaut :
#main-bot {...
background:#FFF3DB url("http://i72.servimg.com/u/f72/11/22/30/87/bot10.jpg") no-repeat top $startSide;

Faites pareil pour le fond de votre texte :
#wrap2 {...
background:#FFF3DB url("http://i72.servimg.com/u/f72/11/22/30/87/bckgrd11.jpg") repeat;

Je sais que j'ai dû changer certains paramètres dans le bas du code pour que mon en-tête soit parfaitement affiché mais je ne me souviens plus où. J'ai cherché, essayé, recommencé et surtout bien enregistré une fois que j'ai trouvé, mais je n'ai pas gardé mes intermédiaires. De toutes façons, tout est réversible. J'espère que ce n'est pas trop compliqué et que cela vous sera utile.