Blog pour les nuls : la bannière en question

Faire une petite leçon sur la bannière ne va pas être évidente. D'abord parce qu'il faut utiliser certains logiciels que tout le monde n'a pas ou ne maîtrise pas forcément. Ensuite parce que gérer de l'image et du texte pour faire un truc sympa demande un peu de créativité et de savoir faire (ben vi, j'ai pas fait 5 ans d'études d'arts appliqués pour rien quand même). Je vais donc donner quelques conseils sur canalblog (dimensions, insertion, code) et un peu sur comment faire un truc sympa sur photoshop.

1. Dimensions de la bannière : C'est toujours plus sympa quand la bannière est bien alignée avec les blocs qui sont en dessous. Pour connaître la taille de la banière à faire, il faut donc aller voir les dimensions de ses blocs. Dans canalblog, en mode normal aller dans "apparences" > "style" > "style général" et regarder les dimensions (largeur de la zone, en px) des Colonne du contenu (au centre), colonne de droite, colonne de gauche, et additionnez toutes ces dimensions, qui vous donnera en pixel la largeur de votre bannière.
En mode avancé, aller dans "apparences" > "éditer les fichiers de ce modèle" > "feuille de style général", les dimensions des blocs ressemblent à ça :

#content {
    float: left;
    width: 550px;

#rightbar {
    float: left;
    width: 150px;

#leftbar {
    float: left;
    width: 200px;

2. La bannière : Là je vais plutôt donner un conseil à partir d'images déjà prêtes. Vous pouvez en prendre sur gettyimages.fr. Choisir une image, et l'ouvrir dans photoshop, pour la redimensionner, aller dans images > taille de l'image et dans le champ largeur en haut, mettre la taille en largeur de la bannière.
La bannière ne doit pas être trop haute (maximum 200 pixels), privilégiez donc les images en format "paysage", qui sont plus larges que hautes.

3. Insertion de la bannière : en mode normal, c'est simple, dans "apparences" > "style" > "style général" cliquer sur parcourir et insérez votre image.

En mode avancé il faut d'abord enregistrer l'image dans canalblog. Créez un nouveau message, insérez y l'image, cliquez sur "brouillon" en bas à gauche, puis sur "poster & publier". Ensuite il faut copier l'adresse del'image : aller dans outils > gestion des fichiers > images et cliquez avec le bouton de droite de la souris sur le nom de votre image sur "paramètres" vous y trouverez l'adresse de votre image qu'il faudra ensuite insérer. Selectionnez et copiez. Allez ensuite dans "apparences" > "éditer les fichiers de ce modèle" > "feuille de style général", dans le paragraphe "topbar-logo" remplacer la ligne qui ressemble à ça :  background-color: #9C5E8A; par : background : url("adresse de l'image") no-repeat 0% 0%;

Voilou, c'était hyper long, pas très efficace, mais bon, le mieux reste tout de même que vous me posiez des questions c'est plus simple comme ça. Ce qui peut être bien aussi, c'est de faire comme Joëlle et Larcenette qui avaient lancé un concours de bannière pour leur gang des bricoleurs (les malines !!).

Comments

[nini]

j avais déjà vu ton site sur le nuage des filles
et là grace à une recherche sur google ..
en plus tu me fais découvrir Getty images ....
ton site va figurer sur mon blog ...
je le trouverai de suite comme ça !!
kiss
nini

[LOL Gadoune]

OUAIS! tu es la seule qui a réussi à me donner la bonne solution, je galère depuis 3 jours....

Comme tu est gentille!!!
(arggghhhhhh cela dois t'enrager que j'dise ça!!!lol)

[Mat]

Saloute :)

Je m'en réfère à toi pcq j'arrive pas à mettre ma bannière, malgré que j'aie respecté toutes les étapes indiquées par ton tuto et celui des autres sites(bonne taille bannière, upload sur canalblog, remplacement par URL...) et total ça change rien du tout, ma bannière refuse obstinément d'apparaître!ça fait 5h non stop que je stagne sur ça et ça me soule grave. Tu peux m'aider stp? Thanks a lot.

[la méchante]

va voir ici http://mechante.canalblog.com/archives/2006/06/20/2129216.html#comments

[camiko]

Au risque de passer pour une vilaine copieuse, j'aimerais savoir comment tu as fait pour inserer cet incroyable fond d'écran "tapisserie kitsch"?
Tu me pardonneras, j'espère, d'avoir la prétention de vouloir créer mon-blog-à-moi même après avoir vu celui de LA méchante. Merci de répondre au petit scarabé que je suis.