Insérer sa propre bannière

Vous êtes très nombreux à nous demander la procédure à suivre pour insérer votre propre bannière sur votre blog.

Ci-dessous un tutorial qui vous expliquera pas à pas comment procéder pour mettre votre bannière à la place de celle qui existait déjà.

 

A noter : Si vous venez de créer votre blog, ou que vous n'avez apporté aucune modification au design d'origine, ne tenez pas en compte la procédure indiquée ci-dessous, car c'est encore plus simple !

Il vous suffira en effet de vous rendre sur l'onglet Présentation, puis de cliquer sur le lien Présentation correspondant à votre design :

 

 

  1. Etape préliminaire

 

Dans un premier temps, il vous faut ajouter votre bannière à vos fichiers.
Récupérez ensuite le lien de votre image en cliquant sur le nom.

Arrive maintenant la partie la plus difficile mais si vous suivez bien les étapes, tout devrait aller.

 

  2. Modification de la feuille de style :

 

Allez dans les configurations avancées de l'onglet "PRESENTATION" pour accéder à votre feuille de style, puis sauvegarder son contenu dans un éditeur de texte de votre choix avant toute modification (le bloc notes par exemple).

Vous pouvez maintenant de modifier les lignes de code concernant votre bannière. Pour cela, il vous faudra repérer la ligne #banner.

Vous devriez avoir les lignes suivantes:

Les valeurs qui suivent les ":" peuvent différer suivant les modèles.

Dans #banner, ajouter une ligne : display:none;. Si cette ligne existe déjà, modifiez sa valeur par none. Ceci permet de faire disparaître la bannière préexistante sans pour autant les enlever ce qui permet de rester référencé.

A présent, repérez le bloc avec #banner-img et remplacez display:none; par display:block;

Vous pouvez maintenant ajouter votre image en remplaçant la ligne background:#...... par background:#XXXXXX url("url_de_votre_bannière") no-repeat 0% 0%;

(Remplacez XXXXXX par le code hexadecimal de la couleur dominante de votre bannière).
- Ajoutez height: hauteur_de_votre_bannière; dans le bloc précédent et dans le bloc div.img-link a {.

 

  3. Vérification

 

Votre feuille de style doit maintenant ressemblez à ce qui suit:

Remarques concernant les utilisateurs des design 4 et 5 uniquement :

 

Pour les modifications portées sur le design 4 (en comptant à partir du haut de la gauche vers la droite):

 

 

 

 

 

Au niveau des styles "#container .container-decorator1" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 90px; par la somme suivante : hauteur de votre image + marge de 9px..

Par exemple, si votre image fait 120px en hauteur, le code à insérer est : "129px"


Enfin, pour les modifications portées sur le design 5 (en comptant à partir du haut de la gauche vers la droite) :

Au niveau des styles "#container .container-decorator1" et ".album-container .container-decorator3" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 100px; par la somme suivante : hauteur de votre image + marge de 8px..

Par exemple, si votre image fait 120px en hauteur, le code à insérer est : "128px".

 

Et maintenant, c'est à vous de jouer ;)