Rotation des bannières

Plus qu'un jour pour dire aurevoir à l'année 2007. Il est aussi temps pour moi de répondre particulièrement à un voeux, celui d'Arnox qui voulait d'une bannière qui change aléatoirement. Si comme lui vous avez plusieurs bannières que vous ameriez afficher sur votre blog, une solution très simple à utiliserexiste pour vous.

1. Connectez-vous sur votre compte, allez sur modèle, "éléments de la page" et cliquez sur "modifier" pour le widget de l'entête. Cette pop-up s'ouvrira :

Sélectionnez l'image à utiliser à partir d'un serveur externe, pas à partir de votre ordinateur.

2. Allez sur "modèle", "modifier le code html" et là cliquez sur "développer des modèles de gadget". Trouvez le code suivant et ajoutez le code en rouge à l'endroit indiqué en prenant le soin de mettre les urls pour les bannières à afficher.

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
<!-- Début des modifications. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://url de votre image"
banner[1]="http://url de votre image"
banner[2]="http://url de votre image"
banner[3]="http://url de votre image"
banner[4]="http://url de votre image"
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</noscript>
<!-- Fin des modifications. -->
</b:if>

Enregistrez votre modèle et allez voir le résultat. Normalement, à chaque chargement d'une nouvelle page, votre blog affichera une nouvelle bannière. Une astuce de Vincent Liu dont vous pouvez vérifier l'éfficacité sur son blog.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.