SOS blog en détresse

Edit avril 2008 : la plateforme Haut et fFort ayant un peu changé, il est possible que les codes ne soient plus exactement les mêmes. En cas de problèmes insolubles, mailez moi [e-mail] mais bon, je ne suis pas une pro non plus, je ne sais pas si je peux résoudre tous les problèmes :) 

 

Aujourd'hui la note qui va, j'espère, aider toutes les blogueuses en péril à personnaliser leur blog. Vous n'êtes pas bilingue français/html ? Pas de panique, moi non plus, mais on se débrouille.

 

La bannière

Tout d'abord choisir une image. Facile. Cette image devra être plus large que haute de façon à rester bien proportionnée et à ne pas être toute écrasée. Il suffit de rogner l'image avec un logiciel photo. Ensuite cette bannière devra être de la même largeur que le blog. Pour connaître la largeur du blog, aller dans Présentation/ configuration avancée/ feuille de styles et cliquer sur modifier le template. Une fenêtre s'ouvre et vous voyez ça:

 

une suite de lettres, de chiffres et de signes, un truc encore plus obscur que le DaVinci code, le code html. La largeur du blog corespond à ceci :

#container {
 width: 771px;
 border: 1px solid #336699;
 line-height: 140%;
 margin-right: auto;
 margin-left: auto;
 text-align: left;
 background-color: #fff;

C'est ce qu'on appelle le container soit la colonne de gauche + le milieu + la colonne de droite. La largeur basique des blogs Haut et Fort est de 771 pixels (px). Mais on peut élargir ou rétrécir son blog comme on veut***. Il suffit juste de veiller à ce que la somme des largeurs des colonnes et du milieu soit légèrement inférieure de 2 ou 3 pixels à la largeur totale (sinon ça bug, ne me demandez pas pourquoi).

 

#left {
 overflow: hidden;
 float: left;
 width: 180px;     largeur de la colonne de gauche
 background-color: #fff;
}

#right {
 overflow: hidden;
 float: right;
 width: 180px;    largeur de la colonne de doite
 background-color: #fff;
}

#center {
 overflow: hidden;
 float: left;
 width: 409px;   largeur de milieu
 background-color: #fff;

 

Une fois que vous avez la bonne taille de bannière il faut enregistrer l'image sur la session ou sur un site hébergeur d'image type Photobucket ou imageShackUs. Ici on va enregistrer l'image de bannière sur la session H&F.

Aller dans Tableau de bord/ Fichiers, cliquer sur images puis tout en bas de la page, enregistrer l'image de la bannière. Une fois l'image enregistrée, cliquez sur le nom de la bannière pour ouvrir la fenêtre avec la photo de la bannière. Vous pourrez récupérer l'url de l'image (cette chose qui commence par http:// et qui finit par .jpg). Gardez cette fenêtre ouverte pour plus tard.

Ensuite c'est là que ça se complique. Il va falloir changer les codes html de la feuille de style. Mais on ne panique pas !

Retourner dans Présentation/ configuration avancée/ Feuille de styles/ modifier le template. A nouveau la fenêtre s'ouvre avec le code html. Repérez cette zone du code :

 

#banner {
 height: auto;
 color: #fff;
 }

#banner h1 {
 background-color: #336699;
 padding: 10px 15px 20px 15px;
 margin: 0px;
}

#banner h2 {
 font-size: 80%;
 background-color: #668cb2;
 width: auto;
 padding: 5px 10px 5px 15px;
 margin: 0px 0px 5px 0px;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #336699;
}

#banner a {
 color: #fff;
 font-weight: bold;
 font-size: 70%;
 text-decoration: none;
}

#banner-img {
      display: none;
 }

div.img-link a {
    display: block;
 text-decoration: none;
 width: 100%;
 }

 

vous supprimez tout ça. Et à la place vous mettez ça :

 

#banner {
 color: #fff;
 height: 90px;
 background-color: #000000;
 
     display : none;
 
}

#banner h1 {
 padding: 15px;
 font-weight: bold;
 padding-bottom: 10px;
}

#banner h2 {
 font-size: 80%;
 padding: 0px 0px 0px 15px;
}

#banner a {
 color: #fff;
 font-weight: bold;
 font-size: 70%;
 text-decoration: none;
}

#banner-img {
 display: none;
 background: #000000;
 
     display : block;
     background: #000000 url(adresse url de l'image de la bannière) no-repeat 0% 0%;
     height: hauteur de l'image de la bannière px;
 
}

div.img-link a {
    display: block;
 text-decoration: none;
 width: 100%;
 
     height: hauteur de l'image de la bannière px;
 
}

 

 

 les zones en rouge sont à modifier bien sûr.

Pour récupérer l'url de la bannière cliquez sur la fenêtre de l'image que vous avez ouverte avant et copiez collez l'url entre les parenthèses.

Cliquer sur enregistrer les modifications et normalement vous avez une belle bannière. Si ce n'est pas le cas et que tout le blog a disparu on ne jette pas son ordinateur par la fenêtre. On crie un bon coup et on remet la version de base de présentation de blog (dans présentation/ modèles). Si après 5 tentatives ça ne marche toujours pas laissez moi un commentaire, j'ai peut être mal recopié la code html.

 

Si tout a bien fonctionné (youpi !!) Etape 2, le fond d'écran.

Sur mon blog le fond d'écran ce sont les rayures. Vous pouvez mettre soit une image en fond d'écran qui se répètera sur la largeur et la hauteur du fond, soit juste changer la couleur du fond.

Pour changer la couleur, allez sur le site bgmaker. Ce site m'a sauvé la vie et la présentation de mon blog. Vous arrivez là:

 

Ce site permet de créer ses propres fonds d'écran et d'obtenir les codes html de toutes les couleurs. Quand vous cherchez une couleur, le code juste en dessous change (les petits chiffres et les petites lettres). C'est le code html de la couleur. Vous pouvez ainsi changer les couleurs des colonnes, du milieu et du fond du blog.

Pour changer la couleur du fond allez dans présentation (toujours pareil) modifier le template de la feuille de styles. La couleur de fond se change dans le "body"

body {
 margin: 0px 0px 20px 0px;
 padding: 0px;
 background-color: #ccd9e6;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 font-size: 100%;
 word-spacing: normal;
 text-align: center;

Tout ce qui est background color c'est pour changer les couleurs de fond. Quand vous avez la bonne couleur recopiez le code après le #. Il doit TOUJOURS y avoir un # devant le code couleur. Sinon ça plante.

Pour mettre une image vous enregistrez l'image dans la session H&F (voir plus haut) et vous mettez ce code juste après text-align: center;

 

background-image: url(adresse url de l'image de fond d'écran);background-repeat:repeat-y, repeat-x;

 

Vous enregistrez et normalement vous avez un joli fond d'écran.

Si ça ne marche pas laissez moi un commentaire (j'espère quand même que ça va marcher et que je ne vais pas me retrouver avce 10 commentaires de protestation !)

Ensuite vous pouvez mettre de la musique en allant sur le site MyFlashFetish. Vous vous inscrivez, vous choisissez votre lecteur de musique et on va vous demandez l'adresse url du fichier mp3. Même principe que l'adresse url de l'image. Il faut enregistrer le fichier mp3 dans la session H&F (attention les fichiers mp3 prennent beaucoup de place et je n'ai pas trouvé de site hébergeur de fichier mp3, si quelqu'un en connait un je suis preneuse). Vous récupérez l'adresse url en cliquant sur le nom du fichier (cette chose qui commence par http:// et qui finit par .mp3) et vous la recopiez à l'endroit indiqué. Ensuite vous récupérez le code html du lecteur. Il faut copier coller ce code en allant dans Présentation/ configuration avancée/ Colonne de gauche (ou de droite) modifier le template. Vous collez le code, vous enregistrez et normalement ça marche.

Pour mettre un Post it (ou un blog it je sais plus trop comment on dit depuis que ça a changé de nom) c'est pareil, il faut copier coller le code dans le template de la colonne de gauche ou de droite (en ce moment il ya quelques bugs sur le site donc si ça ne marche pas tout de suite c'est normal).

 

Voilà, normalement vous avez un blog qui ne ressemble à aucun autre et vous pourrez peut-être être nommé aux LittleFrench d'or dans la catégorie bannière la plus classe.

Pour tout suggestion, réclamation et addition de conseils, commentez ;)

Si malgré tout vous n'y arrivez pas, prenez une aide à domicile (un mec étudiant en informatique par exemple ;)

 

*** c'est beaucoup plus facile de personnaliser les deux premiers modèles de blogs parce que les autres modèles ont des coins arrondis et une présentation de base plus sophistiquée. C'est plus compliqué pour les agrandir (en fait je n'y arrive même pas du tout) et c'est moins harmonieux avec une bannière personnalisée.

 

Remerciements à la Méchante chez qui j'ai appris à mettre un fond d'écran et où j'ai découvert le site bgmaker.