Ajouter une bannière en haut de l'écran

obtenir ces boutons

Créer une bannière

Ajouter une image horizontale
en haut de l'écran

On peut ajouter une image horizontale en haut de l'écran.

Elle se place derrière le titre et la description, ou les remplace.

Méthode : enregistrer d'abord une image aux bonnes dimensions sur le disque dur.

* * * * *
Depuis le "Tableau de bord" de Blogger, cliquer sur "Mise en page" et cliquer sur "Modifier" dans le rectangle représentant le titre.

L'image peut être redimensionnée automatiquement à la largeur du blog : cocher l'option "Ajuster à la page".

Parcourir le disque dur pour trouver l'image.

Enregistrer.

On peut aussi se contenter de compléter l'adresse (http://...) d'une image déjà disponible sur internet.

Sur le même écran, on peut :
- modifier le titre du blog ;
- ajouter une description du blog qui s'affichera en-dessous du titre.

* * * * *
On peut aussi ajouter une bannière directement dans le template.

Cette méthode, qui n'est pas expliquée ailleurs, permet d'AFFICHER L'IMAGE EN-DESSOUS DU TITRE. CE DERNIER RESTE DÈS LORS PLUS LISIBLE.

Pour ajouter la bannière directement dans le template,
- ajouter A LA FIN du paragraphe #header h1 {...} :
- le code suivant :

text-align:center;
background:#900 url(http://1.bp.blogspot.com/-3vMrVNk7dNU/TtdLG4SUILI/AAAAAAAABBI/YS43jQX9do8/s1600/template2%2Brouge.jpg) center bottom no-repeat;
padding-top: 20px;
padding-bottom: 215px;


Explications :
- "bottom" (sur la 2° ligne : background) place l'image contre le bord inférieur du cadre ;
- "padding-top" règle la distance entre le bord supérieur du cadre et le titre du blog ;
-"padding-bottom" règle la distance entre le bord supérieur du cadre et l'image.

* * * * *
On peut aussi ajouter une bannière en ajoutant le code ci-dessous dans un gadget HTML/JavaScript :

<center><div style="margin: 0; padding:0;"><img
src="http://1.bp.blogspot.com/-80N8TiUSjuY/Tux8eqzY7hI/AAAAAAAABDc/8p06Woigw6w/s1600/bois-neige.JPG" title="" alt="" /></div></center>


Comment ajouter un gadget HTML/JavaScript sur un blog

Un exemple figure ici.

Il suffit de changer l'adresse de l'image.

On peut modifier sa largeur ("width") et sa hauteur ("height") d'origine. Exemple : après <img ajouter :
style="width:905px; height:127px;"

Si le titre n'est pas affiché, on peut ajouter un lien vers la page d'accueil en cliquant sur l'image. Pour cela, ajouter :

- avant <img .....> : par exemple :
<a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">

et après : </a>

Pour que le titre du blog ne soit pas affiché, ajouter ce code dans le template :
h1{display:none;}

ou ajouter ce code dans un gadget HTML/JavaScript :
<style type="text/css">h1{display: none;}</style>

Comment ajouter un gadget HTML/JavaScript sur un blog

* * * * *
On peut intégrer le titre dans l'image constituant la bannière.

C'est toutefois déconseillé car il faudra recommencer à chaque changement de bannière.

* * * * *
L'image est une partie d'image personnelle ou trouvée sur internet.

On peut aussi utiliser une des images disponibles sur le site spécialisé : http://www.freewebpageheaders.com/gallery/.

feuilles

On y trouve plus de 900 images pour bannières aux dimensions de 800 par 200 pixels.

Cliquer sur l'image ci-dessus pour l'agrandir à sa taille réelle.

Exemple d'utilisation : cliquer ici.

Autre exemple : en bleu.

Autre exemple : en vert.

* * * * *
On peut aussi ajouter des bannières animées : exemple et méthode : cliquer ici.

* * * * *
On peut enfin ajouter des bannières de manière aléatoire pour chaque page : méthode : cliquer ici.

* * * * *
Une bannière de saison :

bannières de noêl

http://1.bp.blogspot.com/-80N8TiUSjuY/Tux8eqzY7hI/AAAAAAAABDc/8p06Woigw6w/s1600/bois-neige.JPG

D'autres bannières plus grandes et prêtes à l'emploi, sont disponibles sur le site : http://mycenes.centerblog.net/ (cliquer sur les images pour les agrandir à leur taille réelle).

bannières de noêl

bannières de noël

halloween

D'autres catégories de bannières sont disponibles dans la colonne de gauche du site.

* * * * *
On peut trouver ici des milliers d'images gratuites

12 commentaires:

Celine Aud a dit…

merci beaucoup, j ai creer une banniere avec le nom du site mais je n'arrivais pas a cacher le nom du blog tout en restant referencé sur les moteurs de recherche.
DONC BIG MERCIIII
voila le rendu grace a toi :)
http://electronicsession.blogspot.fr/

Willo le geek a dit…

Merci beaucoup j'étais un peu perdu car nouveau blogger et maintenant ça s'éclaircit vraiment merci à toi

Willo le geek a dit…

Merci beaucoup j'étais un peu perdu car nouveau blogger et maintenant ça s'éclaircit vraiment merci à toi

Elenn Simon a dit…

Bonjour et merci pour la limpidité de vos explications,

Je ne parviens pas à trouver l'option "Ajuster à la page". J'ai seulement les options d'emplacement.
Où puis-je trouver cette option ?

Merci à vous.

Elenn Simon a dit…

Bonjour et merci pour la limpidité de vos explications,

Je ne parviens pas à trouver l'option "Ajuster à la page". J'ai seulement les options d'emplacement.
Où puis-je trouver cette option ?

Merci à vous.

Meiser a dit…

Bonjour.

Dans "Mise en page", modifier le cadre contenant le titre. On y trouve à la fin :

Emplacement :
Derrière le titre et la description
Substituer le titre et la description
Placer la description après l'image
Ajuster à la page


Talent Aiguilles a dit…

Bonjour
Voilà un nouveau blog crée (mon 1er)aussi je ne parviens pas à personnaliser l'en-tête comme je voudrais. A l'aiiiiiiiide !!!!
Je n'arrive pas à agrandir la photo choisie et je voudrais que le titre et la description apparaissent à côté de la photo.
Je ne trouve rien pour modifier height et width dans le htlm... Merci me conseiller

Meiser a dit…


Bonjour.

On ne peut pas agrandir une image. On ne peut que la réduire.

Il faut créer ou utiliser une image d'origine de plus grande taille.


Muriel B a dit…

me confirmes-tu qu'on ne peux pas agrandir la bannière de sorte qu'elle occupe toute la largeur du blog? elle semble en effet limitée à 758px de largeur (voir atablelesloulouttes.blogspot.com)
merci d'avance et chapeau pour la pertinence de tes conseil

Meiser a dit…


Bonjour.

Il suffit de créer ou d'utiliser une image plus large à l'origine.


Sentinelle a dit…

Lorsque je recommande un article sur mon blog en cliquant sur G+, ce n'est pas l'image que j'ai comme bannière du blog qui s'affiche mais une autre image sur ma page d'accueil. Pourquoi et comment modifier cela ?

Merci !

Camille a dit…

Hello !

Moi mon petit soucis, c'est que ma bannière, qui est à l'origine une image rose sur fond blanc, apparait toute grisée ... Je n'ai pas trouvé de solution pour qu'elle apparaisse dans les bonnes couleurs . Any help ? :) Merci d'avance !

Camille

http://camilleillustration.blogspot.fr/