Certaines personnes, surtout de la communauté d'overblog, me demandent parfois comment peuvent elles faire pour poser, comme je l'ai fait, un widget (c'est à dire un gadget dans une fenêtre) et en particulier mon joli petit chat noir qui remue la queue, chasse la souris et ronronne, dans un module de leur blog.

Je me dis que le plus simple est d'écrire un tuto reprenant étape par étape le processus.

1. Choisir votre gadget

Sur widgetbox, on trouve des gadgets, du simple bouton au gadget interactif performant.

Sur aBowman, on trouve des gadgets également.

Choisissez donc celui que vous préférez qui bien sur, peut n'être ni le chat Maukie sur widgetbox ni le chien sur aBowman que je prends comme exemple ici.

Se souvenir qu'overblog n'admet pas le code flash. Il faut donc un code HTML obligatoirement.

2. Copier le code HTML.

Pour le chat Maukie, on clique sur "Get widget".

Une fenêtre s'ouvre. On clique sur "Copy" pour... copier

On peut aussi se contenter de copier le code suivant :

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('2a269f8f-cec0-4c84-863a-9e79e8dd51c2');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/maukie-the-virtual-cat">Maukie - the virtual cat</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Pour le chien, on copie le code proposé sur le site 

ou on copie le code ici :

<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object>

3. Ouvrir son interface d'administrateur et se rendre sur "Configurer"

4. Faire glisser un module texte libre dans la colonne de droite

5. Ouvrir ce nouveau module 'Texte libre" en cliquant sur le petit marteau

6. Cliquer sur "HTML"

7. Sur cette nouvelle fenêtre, copier le code choisi et valider en cliquant sur "Mettre à jour"

6. Changer le titre éventuellement si vous ne voulez pas conserver "Texte libre".

7. Valider.

8. Allez voir le résultat pour apprécier en essayant de vous mettre à la place du visiteur, car le plus important (règle d'ergonomie web) est de faire plaisir, de donner envie, sans heurter, ni agresser ni agacer par du son ou des mouvements qui perturbent la lecture ou la tranquillité de votre visiteur, le travail ou le sommeil de son entourage.