Ajouter une bannière sur son blog.

La semaine dernière, je vous expliquais comment redimensionner les colonnes de votre blog.

Cette semaine, nous allons nous atteler à quelque chose de bien plus facile: changer ou ajouter une bannière à son blog. 

C'est un des premier éléments que vous souhaitez tous personnaliser lorsque vous créez votre blog, arrêtons nous donc sur cette personnalisation

Un des premiers éléments que l'on voit lorsqu'on accède à votre blog, c'est votre bannière. 

Et vous êtes nombreux à déjà avoir votre propre bannière. Grâce à la personnalisation possible des modèles de présentation, vous n'avez qu'à charger votre bannière, et on s'occupe de tout !

 

 

Mais rien ne dit qu'à l'avenir, vous ne souhaiterez pas modifier cette bannière, ou simplement en ajouter une, si vous n'en possédez pas encore. 

Pour cela, nous allons travailler avec la feuille de style. 

(Vous remarquerez que la feuille de style va vite devenir votre meilleur amie quand il s'agira de modifier l'aspect de votre blog).

 

PETIT RAPPEL SUR LA FEUILLE DE STYLE :

La feuille de style, c'est le plan de l'architecte. Sur votre plan d'architecte, vous indiquez les dimensions de vos pièces. Et bien sur la feuille de style, vous indiquez la dimension de vos éléments. 

Mais la feuille de style ne sert pas qu'à cela ! Grâce à elle, vous pouvez personnaliser: 

• La taille des éléments de votre blog
• La couleur de tous les textes de votre blog
• La couleur de tous les liens de votre blog
• La police utilisée pour tous les textes de votre blog
• La bannière de votre blog

Concentrons nous aujourd'hui sur le premier point, et pour voir cette mystérieuse feuille de style, rendez vous dans votre interface d'administration, dans la section 'Configuration avancée' de l'onglet 'Présentation' et cliquez sur 'Modifier le Template', face à la ligne 'Feuille de Styles'.

Votre feuille de style se présente sur deux colonnes: 

La colonne de gauche contient la feuille de style originale, c'est à dire celle qui est utilisée pour présenter votre blog tel qu'il est lorsque vous sélectionnez votre modèle. Vous ne pouvez pas modifier ces lignes. 

La colonne de droite est cependant peut être éditée, c'est ici que nous allons déclarer les dimensions que nous souhaitons pour les différentes sections du blog. 

Si vous souhaitez modifier les informations de la feuille de style initiale, déclarez dans votre espace de droite la fonction à modifier. Lorsque votre blog sera affiché, vos modifications 'écraseront' la feuille de style initiale, et seront donc pris en compte.

 

Dans cette capture, vous voyez déjà une déclaration pour l'élément 'Body'

body{

font-family:'Lucida Grande','Lucida Sans Unicode',Verdana,Arial,sans-serif;

font-size:105%;

word-spacing:normal;

background-color: transparent !important;

}

Pour info, le body renferme tous les éléments visibles sur votre blog, il enferme le container 

Voici la syntaxe à respecter (et je vous donne même le nom standard des éléments qui composent ce qu'on appelle une règle): 

selecteur {

propriete: valeur;

}

 

Au préalable

 

Avant de changer la bannière, il vous faut faire deux petites choses:

• Connaitre la taille de votre bannière: la largeur de votre bannière doit être la même que celle du sélecteur qui se nomme #container. 

regardez dans la feuille de style par défaut (celle de gauche) la largeur de ce sélecteur. La largeur s'exprime en pixel, avec la propriété width. Par exemple: width: 554px

Votre bannière devra avoir la même largeur. Il vous faut également connaître la hauteur de votre bannière (toujours en pixels). Vous devrez renseigner cette information plus tard. Vous pouvez connaitre ces valeurs en faisant (sur votre ordinateur) un clic droit sur votre bannière, puis en sélectionnant 'propriétés'. Les dimensions vont alors apparaitre sous la forme width x height (par exemple: 800 x 600)

• il vous faut également enregistrer votre future bannière quelque part sur votre blog. Pour cela, rendez vous dans la section 'Fichier' de l'onglet 'Tableau de Bord'.

Choisissez dans la liste des dossier celui dans lequel vous souhaitez enregistrer votre bannière. 

Je vous recommande de créer un dossier dans lequel toutes les images liées à votre design seront enregistrées. Ce sera bien plus simple pour les retrouver si un jour vous souhaitez changer la présentation de votre blog. 

Rendez vous donc dans le dossier 'Images', puis créez-y le dossier 'Design'. 

Vous pouvez à présent y charger votre bannière

 

 

Votre bannière est à présent en ligne sur votre compte. En faisant un clic droit sur le titre de l'image, vous pourrez sélectionner 'Copier l'adresse du lien'. Cela vous sera nécessaire pour la suite...

 

Allez hop, on change la bannière !

Pour ce faire, rendez vous dans la section 'Configuration avancée' de l'onglet 'Présentation', et cliquez sur 'Modifier le Template' face à 'Feuille de style'

 

Si vous ne possédez pas encore de bannière, voici ce qui apparaît face à vous: 

 

Si vous possédez déjà une bannière, le code ci dessous sera déjà présent dans la colonne de droite. Effacez le, et suivez la procédure ci dessous.

Voici le code à entrer dans la section de droite, afin d'y faire apparaitre votre bannière: 

 

 

#banner{

display:none;

}

#banner-img{

background-image:url("http://url-de-votre-banniere.com/image.jpg");

height: la hauteur de votre bannière;

display:block

}

div.img-link a{

height: la hauteur de votre bannière;

 

}

 

 

J'ai rien compris ??

Attendez, je vous explique: 

 

#banner

Le sélecteur 'Banner' est utilisé par défaut, il renseigne le titre de votre blog, et sa description. Or, nous, nous voulons notre bannière, donc nous précisons que nous ne voulons pas le voir affiché.

 

#banner-img

Voici ne sélecteur qui renseigne l'adresse de notre bannière. Il vous faut donc préciser à quelle adresse elle se trouve. Cela tombe bien, vous l'avez mise en ligne quelques instants plus tôt. Collez ici l'adresse de cette bannière.

La propriété 'width' précise la hauteur de votre bannière. Ainsi, le sélecteur sera exactement à la taille de votre bannière, et ne dépassera pas.

Enfin, la propriété 'display' donne des informations sur la disposition et l'affichage de votre bannière. Cette valeur reste la même pour tous les blogs. 

 

div.img-link a

Cette règle permet de transformer votre bannière en un lien vers la page d'accueil de votre blog. Si vous n'ajoutez pas cette règle, vos visiteurs risquent de ne plus pouvoir retourner sur votre page d'accueil.

 

Validez vos modification. Il ne vous reste plus qu'à vous rendre sur votre blog pour voir le résultat final !