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 !!)..

Tu veux moins procrastiner dans ta vie quotidienne pour réaliser tes projets persos ?

* Les éléments marqués d'une ou plusieurs astérisques sont particuliers - en savoir plus