Customiser son blog sur BLOGGER

Bon bon, difficile de savoir par quoi commencer... m'enfin...

Alors, Blogger, ça a un avantage et un inconvénient... L'avantage, c'est que le code HTML, est assez facile pour qu'on puisse le triturer sans forcément faire de bourdes, et l'inconvénient, c'est que les templates proposés sont pas aussi design et sympa que sur Wordpress...!

Certes, maintenant Blogger a sorti son Template Designer qui permet de faire facilement pas mal de truc stylé, et il existe pas mal de template de wordpress compatibles avec pour Blogger (vous trouverez la liste ICI), Mais bon. Si tu veux un max de personnalisation, c'est pas là que ça se passe !

Je vous avais déjà donné des liens pour customiser votre blog de manière à mettre un "background" derrière (c'est ICI), mais au final ce sont des modifs relativement faciles....

Dans ce tuto, on va un peu plus se plonger dans les profondeurs du code HTML de blogger...

Allez, on relève les manches et on commence !

CRÉER UN BLOG TEST

Tout d'abord, créez un blog test !! C'est vraiment super pratique pour tester un  template sans tout foirer sur le sien... et surtout sans gêner les lecteurs de votre blog !

Allez sur votre Tableau de bord, et cliquer sur Créer un Blog en haut à droite. 

 

Il vous suffit de trouver un nom, et une URL pour votre Blog Test. Une fois créé, assurez-vous qu'il ne soit pas visible dans les moteurs de recherche, et que vous êtes le seul à pouvoir visiter ce blog.

Sur votre tableau de bord, cliquez sur les PARAMÈTRES / GÉNÉRAL de votre blog test et répondez-y comme ci-dessous

Puis dans PARAMÈTRES, cliquez sur AUTORISATIONS et à la question "Qui peut visualiser ce blog?" Cochez "uniquement les auteurs de ce blog"

Maintenant que le blog test est créé vous pouvez vous attaquez à son code HTML pour le modifier.

CUSTOMISER LE TEMPLATE MINIMA

Pour le code HTML soit facile à modifier, préférez les anciens modèles à ceux proposés par le Template designer, et choisissez le template MINIMA. Il est tout simple, et blanc ! Pour modifier le code html, allez dans PRÉSENTATION / MODIFIER LE CODE HTML

1ère étape : Changer le fond (Background) du blog

Le Template MINIMA ne dispose qu'une seule propriété de fond... Si on change la couleur, ou met une image, ça le fera sur tout le template (post et sidebar unclus). C'est ce qu'on va faire. On ajoutera une autre couleur à ce moment là.

Voici la partie correspondant au "Background". En rouge celle qui définit la couleur.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Pour changer la couleur du fond, il suffit de changer $bgcolor en #ffffff (remplir avec la couleur de votre choix, vous pourrez la trouver sur le Web Color Calculator)

Pour un fond noir, voici le code html :

body {
  background:#ffffff;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

2ème étape: changer le fond des posts et de la sidebar

Maintenant le template est rempli d'une couleur unie. A vous maintenant de changer la couleur des posts et de la sidebar.

La partie principale contenant les posts, et la sidebar dans le Template MINIMA sont dasn la section du code appelée #outer-wrapper.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Si on veut que toute la section ait un fon différent des côtés du blog, on peut changer en ajoutant une simple ligne de code :

#outer-wrapper {
background: #ffffcc;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Cette valeur #ffffcc donnera une couleur crème aux deux sections de votre blog. 

Si vous ne voulez pas que la couleur soit adaptée aux deux parties de votre blog posts + Sidebar (outer-wrapper), mais préférez que les colonnes soient séparées par la couleur du fond, ajoutez la ligne de code sous #main-wrapper { (colonne des posts) et/ou sous #sidebar-wrapper { (colonne de la sidebar)

En faisant ces quelques manip' sur le blog test on peut ainsi mieux comprendre le fonctionnement du code html et tout et tout... !

Pour ajouter une image en fond sur votre blog, allez ICI !

3ème étape: Mettre des bords ronds, comme ça :

Les côtés ronds, c'est stylé, mais pas très facile à mettre en place. ça necessiste de connaitre son code Blogger assez bien... Voici un lien sur Blogger Buster super bien fait pour tout expliquer (Attention c'est en anglais) ICI !

4ème étape: changer la taille de ses colonnes

C'est très facile une fois qu'on a compris comment fonctionnait le code html Blogger. Rappelez-vous...

#outer-wrapper = ça correspond à la section posts + sidebar
#main-wrapper = c'est la section principale, soit la section des posts
#sidebar-wrapper = c'est la section de votre colonne de droite (que vous pouvez placer à gauche dasn Présentation / éléments de la page)

Vous pouvez remarquer que dans toutes ces sections apparait la mention "width" C'est elle qui permet de déterminer la largeur de vos colonnes... En changeant, la valeur et en cliquant sur "aperçu", vous verrez les différents changements s'opérer.

ATTENTION : la logique veut que la valeur "width" de l'outer-wrapper soit supérieure STRICTEMENT aux valeurs main-wrapper + sidebar-wrapper.

De toutes façons, testez! vous ne craignez rien si vous êtes sur votre blog test !

5ème étape: mettre des bordures à vos encars

ça c'est assez classe... Les bordures... ça fait très style "Wordpress" ! Ici aussi, comme c'est assez long, vous trouverez un lien ICI de blogger Buster !

6ème étape: mettre une barre de navigation

Les barres de navigation Blogger laissent à désirer... Voici un lien qui permet de faire quelque chose d'un peu mieux, mais c'est pas encore top ! ICI

7ème étape: le header

Avant de commencer à vous acharner sur photoshop pour faire un header, il faut connaitre les dimensions de celui-ci.

Si vous avez changé les dimensions de vos colonnes, vérifier que la "width" de votre #outer-wrapper soit la même que la "width" du #header-wrapper !

#header-wrapper {
  width:900px;

#outer-wrapper {
  width: 900px;

Maintenant, c'est bon... Vous savez que la taille de votre header doit faire la "width" précisée dans le #header-wrapper" dans cet exemple, il est de 900px. C'est parti pour la créa sur Photoshop, Gimp ou autre !

Pour insérer le header, allez dans PRÉSENTATION/éléments de la page, et sur le titre cliquez sur "modifier". Cocher 'ajouter une image à partir de mon ordinateur", et cocher "ajuster à la page".

Et c'est bon !!!

je ne rentre pas trop en profondeur dans les détails, mais ce petit tuto va vous permettre de comprendre un peu mieux le code html de Blogger... !

Enjoy !