23/04/2006

Tuto : Faire défiler ses partenaires !

Vous êtes plusieurs à posséder un blog et souhaiter qu'il soit plus accueillant et sympa à regarder, par exemple en faisant défiler ses partenaires ! Eh bien, dans ce tutorial je vais vous expliquer comment installer cela sur votre blogstation !

On va se servir d'un code HTML que l'on copiera comme contenu dans les éléments colonnes. J'ai trouvé ce code sur le site Astwinds qui propose plusieurs astuces pour améliorer la présentation de votre blog.

Je vais vous détailler tout ceci par étapes :

 Le but de ce tuto est de créer un défilement de bannières vertical que l'on peut stopper en survolant au-dessus des bannières avec la souris. Il est également possible d'ajouter des annotations, par exemple "Le blogstation de ......", qui s'afficheront lorsque l'on reste quelques secondes sur une bannière.

1) Vous devez vous rendre dans la partie admin de votre blogstation, ensuite cliquez sur "Présentation", puis "contenu des colonnes". Nous allons ajouter un élément personnalisé; tapez dans "nom de l'élément" : fenêtre défilante partenaires. Il sera ainsi plus facile de reconnaître cet élément plus tard lorsque vous ajouterez de nouveaux partenaires.

2) Nous allons copier le code HTML suivant dans l'espace "Contenu de l'élément" :

<!-- Début du code du menu déroulant d'Astwinds-->
<noscript><a href="http://www.astwinds.com/">Menu déroulant <br> d'Astwinds</A></noscript><marquee Class="Scroller" bgcolor="#FFFFFF" behavior="scroll" direction="up" width="180" height="130" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<div align="center"><a href="http://mooblog.blog.weareplaystation.fr/" target="_blank"><img src="http://mooblog.blog.weareplaystation.fr/files/banniere.2.bmp" border="0" alt=" Le blogstation de Moo"></a></div>
</marquee>
<!-- Fin du code du menu déroulant d'Astwinds -->

3) Voilà, je vais vous expliquer un peu les différents paramètres pour modifier l'affichage de cette fenêtre de défilement sur votre blog.

Il est possible de modifier :

  • la taille de la fenêtre : changez les valeurs width="180" et height="130" comme vous le voulez.
  • la vitesse de défilement des bannières : changez la valeur scrollamount="2" comme vous le voulez.
  • l'adresse de destination de votre blog partenaire : dans cet exemple, j'ai mis l'adresse de mon blog; il suffira donc de la remplacer par celle de votre partenaire, ainsi lorsque l'on clique sur sa bannière on est automatiquement dirigé vers son blog.
  • l'adresse (URL) de la bannière de votre partenaire : vous pouvez l'obtenir en faisant un clik droit sur sa bannière et en cliquant sur "Paramètres", copiez l'adresse (URL) de l'image de la bannière. Ensuite, remplacez-la à la place de la mienne. Il est également possible de l'héberger dans la partie "files" de votre blog, vous enregistrez l'image de la bannière et obetenez ainsi une adresse (URL) que vous pouvez copier.
  • l'annotation pour décrire le lien : lorsque l'on reste un certain temps au-dessus des bannières partenaires de mon blog, on peut voir apparaître "Le blogstation de ....". Il suffit juste de changer le texte situé dans le code HTML après alt="..."  .

 4) C'est terminé pour les modifications du code pour ajouter un partenaire. Si vous souhaitez ajouter plusieurs partenaires, il vous faudra copier la partie suivante du code :

<a href="http://mooblog.blog.weareplaystation.fr/" target="_blank"><img src="http://mooblog.blog.weareplaystation.fr/files/banniere.2.bmp" border="0" alt=" Le blogstation de Moo">

Vous le collerez à la suite de l'autre code pour le partenaire précedent.

Exemple :   (en bleu : la partie modifiée pour un nouveau partenaire)

<!-- Début du code du menu déroulant d'Astwinds-->
<noscript><a href="http://www.astwinds.com/">Menu déroulant <br> d'Astwinds</A></noscript><marquee Class="Scroller" bgcolor="#FFFFFF" behavior="scroll" direction="up" width="180" height="130" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<div align="center"><a href="http://mooblog.blog.weareplaystation.fr/" target="_blank"><img src="http://mooblog.blog.weareplaystation.fr/files/banniere.2.bmp" border="0" alt=" Le blogstation de Moo">

<a href="http://mooblog.blog.weareplaystation.fr/" target="_blank"><img src="http://mooblog.blog.weareplaystation.fr/files/banniere.2.bmp" border="0" alt=" Le blogstation de Moo"></a></div>
</marquee>
<!-- Fin du code du menu déroulant d'Astwinds -->

5) Il ne vous reste plus qu'à enregistrer les modifications que vous venez de faire et à ajouter cet élément dans la colonne que vous voulez et maintenant vous avez une belle fenêtre défilante de vos partenaires.

J'espère que mes explications ont été claires, si vous avez le moindre problème n'hésitez pas à laisser un message en commentaires. Je vous aiderai volontiers.

Commentaires

jai voté merci pour cette info c sympa de ta part passe sur le mien

Écrit par : samy | 24/04/2006

Les commentaires sont fermés.