mercredi 28 juillet 2010

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 !

15 Bla Blas:

  1. Wow! Je ne savais pas que l'on pouvait faire tout ça à partir du Minima ... j'ai toujours utilisé des templates faites par les autres mais je crois que je vais essayer cela la prochaine fois!

    RépondreSupprimer
  2. @Cynthia: c'est vrai que les templates tout fait sont assez alléchant, notamment avec le nouveau Template designer, mais pour moi y'avait toujours quelque chose qui clochait...!

    au final, j'ai décidé de m'y mettre, et ça m'a passionné !

    un blog indispensable pour ça : www.bloggerbuster.com ! C'est ça qui m'a vraiment aidé sans jamais trouvé qlq chose de mieux sur les autres blogs !

    Lance-toi, mais avec un blog test avant...!

    RépondreSupprimer
  3. Tu as aussi des sites comme
    http://www.laltruiste.com/
    http://www.alsacreations.com

    Qui fourmillent de renseignements utiles ;)

    RépondreSupprimer
  4. @Laurent: merci de compléter ma geekitude...!!! je vais potasser tout ça.

    RépondreSupprimer
  5. article intéressant et toujours utile. Au passage bravo pour ce blog que je vient de découvrir et qui regorge de choses qui me seront ou a d'autres, fort utile
    merci et bonne continuation dans ma timeline de twitter et dans mes flux a lire tous les jours

    RépondreSupprimer
  6. @Thierry76: Je vais rougir !! merci à toi ! ^^

    RépondreSupprimer
  7. Très bon article et très Beau Blog, je vais peut être l'ajouter dans un future BeauBlogger et LeBlogger Community °__°

    RépondreSupprimer
  8. @Soufiane: Merci du compliment, et surtout, merci pour ce site !!!

    RépondreSupprimer
  9. @Soufiane: ouaw ! je suis impressionnée...! je savais pas qu'un jour je serai présente sur un blog de tutos !! ^^

    Pour ce qui est de paperblog, je m'en doutais un peu, mais je savais pas que c'était à ce point...!!! je regarde tout de suite pour me désinscrire. Merci !

    RépondreSupprimer
  10. Bon courage, ce n'est pas gagné d'avance et n'hésite pas à partager ton avis et ton expérience avec un petit commentaire °__°

    RépondreSupprimer
  11. @Soufiane: je viens d'envoyer un mail à contact@paperblog.fr à voir... J'ai déjà enlevé leur onglet sur mon blog.

    On va voir ça par la suite, j'hésiterai pas à te tenir au courant !

    RépondreSupprimer
  12. Super! Merci beaucoup pour cet article si facile à comprendre!
    Cependant une question: je vois que tu as des catégories... hors blogger ne permet pas cette fonctionnalité il me semble. Ce sont donc les fameux tags que tu as utilisé? Ou as tu fais ça avec html?
    ps: j'aime beaucoup les visuel de tes catégories ça rend très bien!
    Céline
    (http://comandgreenwashing.blogspot.com/)

    RépondreSupprimer
  13. @Anonyme: Je suis contente que cette article puisse te servir. Pour ce qui est des catégories, en fait il s'agit de "LIBELLES" sous Blogger. et ensuite une petite modif Html et c'est bon !
    Beaucoup de personnes me posent la même question. Quand j'aurai un peu de temps, je ferai un nouveau tutoriel là-dessus !! ^^

    RépondreSupprimer
  14. Super article qui va grandement m'aider !
    Le thème minima, dans l'outil "création de modèles", c'est dans les simples, le tout dernier blanc ? Merci d'avance!

    RépondreSupprimer