Sometimes I have to put text on a path

Sunday, June 19, 2011

Un exemple de gadget (diaporama) dans le corps d'une page de son blogspot.com



A la suite de l'article Un Diaporama pour Blogger, il a été développé un Gadget Google qui regroupe tout le code nécessaire à l'affichage d'un Diaporama dans le corps du message.

Admettons que l'on veuille insérer dans le corps du message le gadget :Diaporama Picasa. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.


Obtenir le code du gadget

1. Ouvrir iGoogle (Mon Google) et cliquer sur Ajouter des Modules, puis sur Ajouter un flux ou un gadget et saisir l'adresse du gadget :

http://URL/nomdugadget.xml


Ajouter un gadget
ou cliquer sur le bouton Ajouter à Google si vous vous trouvez sur une page qui contient le gadget désiré.

Ajouter à Google

2. Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option à propos de ce gadget :

Barre de titre du gadget
A propos ... du gadget

3. Dans la rubrique Pour webmasters, choisir l'option Insérer ce gadget

Insérer ce gadget

4. Ajuster le gadget à la dimension désirée, ignorer les paramètres d'affichage, mais définir les paramètres du Gadget :

Paramètres d'affichage

Paramètres du gadget

5. Cliquer sur obtenir le code. On obtient un script javascript, avec lesparamètres URL encodés :







hébergeur : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr

adresse_gadget : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml

paramètres ... paramètres : Les paramètres du Gadget, sous la forme de couple up_nom=valeur séparés par le caractère & (ampersand - et commercial) URL encodé par &

w=xxx h=yyy : Les dimensions du Gadget, w pour width (largeur) et h pour height (hauteur).

&title=titre-gadget...output=js : la fin de la source, à ignorer !



Convertir le script en








width="xxx" : La largeur du iframe


height="yyy" : la hauteur du iframe


allowTransparency="true" : La couleur de fond de la page hôte prime sur celle du iframe


frameborder="0" : pas de bord


scrolling="no" : pas d'ascenseurs



Le résultat

Intégrons cette iframe sur ce blog, avec un tag

pour centrer le cadre (saisie sans retour à la ligne) :













Et nous obtenons le Diaporama :






Voir aussi:
http://aide-blogger-fr.blogspot.com/2008/11/placer-des-gadgets-dans-les-lments-de.html
Plus d'information:
http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html

No comments:

Post a Comment