Accueil > Habillage, mise en page de mon blog et personnalisation

Insérer une bannière sur mon blog

Question

• Comment insérer une bannière sur mon blog ?

Réponse

Pour insérer une bannière sur votre blog, vous devez être identifié au service.

L'insertion d'une bannière se déroule en 2 étapes :

1. ajout de votre bannière dans votre gestionnaire de fichiers.
2. mise en place de votre bannière via la rubrique Configuration avancée de l'onglet 'Présentation.

Insertion de votre bannière dans le gestionnaire de fichiers

1. Cliquez sur l'onglet Tableau de bord puis sur Fichiers.
2. Chargez votre bannière sur nos serveurs :
   1. Cliquez sur le répertoire images.
   2. Ajoutez votre bannière grâce au formulaire Ajouter un fichier.
   3. Une fois le chargement terminé, notez l'adresse (l'URL) de votre bannière. L'adresse est du type : http://mon-blog.blogspirit.com/images/mabanniere.jpg. Notez que si votre bannière se trouve sur un autre serveur vous n'avez pas besoin de la charger sur nos serveurs, en revanche il vous faut connaître son URL pour atteindre cette image.

Mise en place de votre bannière sur votre blog

1. Cliquez sur l'onglet Présentation puis sur Configuration avancée.
2. Cliquez le lien Modifier le template du modèle Feuille de styles.
3. Une fenêtre de modification du modèle de feuille de style s'ouvre.

Avant de modifier votre feuille de styles, vous pouvez en effectuer une sauvegarde en copiant l'intégralité de son contenu et en le collant sur un éditeur de texte de votre choix.

1. Repérez le style "#banner".
   • Supprimez les lignes "height: auto;" et "color: #xxxxxx;" .
   • Insérez la ligne "display:none; ".
2. Repérez le style "#banner-img".
   • Supprimez la ligne "display: none;"
   • Insérez la ligne : "background: #xxxxxx url(http://mon-blog.blogspirit.com/images/mabanniere.ext) no-repeat 0% 0%;" (où xxxxxx est le code hexadecimal de la couleur de fond de votre bannière et http://mon-blog.blogspirit.com/images/mabanniere.ext l'URL de votre image que vous avez chargée dans votre gestionnaire de fichiers ci-avant).
   • Donnez à l'attribut "height:" la hauteur de votre bannière (en pixels). Exemple : si votre bannière fait 90px, écrivez : "height: 90px;"
3. Repérez le style "div.img-link a" :
   • Donnez à l'attribut "height:" la hauteur de votre bannière (la même taille que celle indiquée ci-avant).
4. Cliquez sur le bouton Enregistrer pour appliquer les changements : votre bannière est insérée dans votre blog ! Vous pouvez le vérifier en cliquant sur le lien Voir mon blog présent en haut de la page.

Si tel n'était pas le cas, vérifiez bien chacune des étapes. Vérifiez également que l'URL donnée pour votre bannière est bien valide : pour le vérifier simplement, copiez-collez l'URL de votre bannière dans un navigateur : si votre image n'apparaît pas, votre adresse n'est pas la bonne.

Il est également probable que votre bannière ne soit pas suffisamment large pour l'espace disponible (771px), dans ce cas insérez un code couleur pour remplir l'espace restant : background: #xxxxxx url([URL_de_votre_bannière].jpg) no-repeat 0% 0%; (où #xxxxxx est le code couleur).

Cas particuliers des design 4 et 5

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

• 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.. Ex : votre image fait 120px en hauteur, le code à insérer est : "129px"

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

• 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.. Ex : votre image fait 120px en hauteur, le code à insérer est : "128px"

Vous avez fait une erreur et voulez revenir à la feuille de styles initiale ?

Pour revenir à un affichage de base, allez dans la rubrique Modèles de l'onglet Présentation, puis choisissez un modèle.

Attention ! En choisissant un habillage dans la rubrique Modèle, toutes vos modifications apportées à votre feuille de styles seront perdues.

Note importante : après avoir effectué cette opération, lorsque vous visualisez votre blog, pensez à rafraîchir la page (ctrl + F5) pour vider le cache et faire apparaître les modifications apportées.