Affichage aléatoire de bannières

obtenir ces boutons

Affichage aléatoire de bannières

On peut afficher des bannières différentes de manière aléatoire pour chaque page.

Pour faire cela, il suffit d'ajouter à la fin du template juste avant </body>, le code suivant :

<script type='text/javascript'>
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header h1 {");
document.write(' background:url("' + banner[random] + '") no-repeat top center;');
document.write(" }");
document.write("</style>");
</script>

* * * * *
Pour certains templates, il faut remplacer (à la fin) #header h1 par #header.

Les 10 bannières encodées ne sont que des exemples. Chacun les remplacera par d'autres images.

On peut ajouter ou enlever des images. Dans ce cas, le nombre "10" doit être augmenté ou diminué dans l'instruction (10*Math.random()).

Comment ajouter une bannière en haut de l'écran.

Comment modifier un template (modèle) de Blogger.

3 commentaires:

Monique P. a dit…

Bonjour

Merci pour tous les trucs/gadgets/infos etc. votre blog figure parmi mes préférés, juste une petite suggestion si vous le permettez ce serait bien d'avoir des exemples que l'on pourrait visionner concernant les codes/gadgets que vous nous présentez!

Merci encore pour toute l'aide que vous nous apportez.

M.P.

Olivier Garcelon a dit…

Bonjour,

D'abords merci pour vos astuces, ça m'a bien aidé.
J'ai bien copié le code et les chemins de mes bannieres depuis Picassa. Mais il affiche ma banniere en tout petit, alors que le html de base du blog n'est pas spécialement modifié.
Et ma banniere est pourtant a la bonne taille quand je l'affiche de façon standard.

Merci.

Meiser a dit…

Bonjour.

La taille est certainement fixée dans un des paragraphes relatifs à :
- header
- header a
- h1
- img