Créer son modèle Blog 2

CREER UN MODÈLE BLOGGER - PARTIE 2

Premièrement exerçons-nous à des choses simples pour mieux comprendre le fonctionnement d'un fichier CSS et, plus tard, arriver à gérer entièrement son design propre. Dans cet article nous verrons donc :

• Comment changer l'image de fond de mon blog ? difficulté *
  

1) Mettre une image en guise de fond : Ce n'est pas bien difficile. Il suffit premièrement de connaître un site hébergeur d'images sans publicité. Je recommande alors Imageshack ou Picturish. Mais commençons par Imageshack, le plus fiable et le plus connu :) On se rend donc sur le site, et on arrive à cet écran :

Une fois l'image choisie, cliquer sur "Start Upload !" et attendre le chargement. Dès que celle-ci est chargée, on arrive à cet écran :

Ensuite nous revenons à ce que l'on a vu l'article précédent. Pour modifier son CSS ou le Code HTML on clique sur l'onglet "Mise en Page" de notre blog et ensuite sur "Modifier le code HTML", On arrive au code CSS. On descend un peu dans le code pour arriver ici :

C'est ici que l'on passe aux choses sérieuses : On va modifier le code. Soi-même, oui oui :) Histoire de mettre main à la patte.

On remplace la ligne :

background:$bgcolor;

Par :

background:url(http://code de votre image copié sur Imageshack.us) ;

Si l'on a recopié ceci correctement, on coche en haut à droite du code "Développer des modèles de Gadgets". Il faut le faire dès que l'on modifie son blog car c'est cette petite case qui définit si oui ou non notre design s'adaptera aux Widgets (calendriers, Post-its, horloge, photos défilantes, bref tout ce qui attrait à la personnalisation). Une fois que c'est fait, on clique en bas sur "Enregistrer le modèle".

2) Mettre une couleur en guise de fond :
C'est encore plus facile ! Il suffit de chercher sur Google un site qui propose les Hex Color Codes, c'est le nom donné pour les hexagones virtuels des spectres de couleur. Ils proposent des couleurs avec leur code à côté. Je conseille celui-ci : December.com

Si par exemple je veux mettre la première couleur (ici un gris) proposé par la page, je copie son code à partir de l'astérisque #.

On remplace alors la ligne :

background:$bgcolor;

Par :

background:#8B8989;

On coche ensuite la case en haut à droite du Code html "Développer des modèles de gadgets" et pour finir sur "Enregistrer le modèle" en bas à droite du code (bouton orange).

Ouvrez votre blog, vous avez votre image de fond ! :)