Viti-Vino. Le Blog de Prac - Les Outils Google

5 secondes pour ajouter un diaporama de Flickr sur son Blog

2014-09-25T20:33:00.000+02:00

5 secondes pour ajouter un diaporama de Flickr

Pour ajouter un diaporama de Flickr, il faut utiliser un tag iframe à placer dans le html du message ou dans un Gadget html / Javascript.

Créer le code HTML

1. Ouvrir l'album Flickr. Recopier l'URL. Par exemple :

https://www.flickr.com/photos/prac53/sets/72157609076361497

prac53 est le nom de l'utilisateur
72157609076361497 est l'identifiant de l'album

2. Ajouter /player à l'adresse de l'album. Notez que l'adresse doit être de la forme https://

https://www.flickr.com/photos/prac53/sets/72157609076361497/player

3. Le code du iframe

Le résultat

5 secondes pour ajouter un diaporama Flickr sur son Blog

Limitations

Flickr ne publie plus, depuis la fin de 2013, de Flux RSS d'un album. Les diaporamas créés à partir d'un Flux RSS offrent plus de possibilités de configuration que le diaporama présenté ici.

Mentions légales

© photos : www.diapo.ch, Philippe Krauer et www.c-d-c.ch.

Des Gadgets Blogger pour vos photos de Google+

2013-04-02T21:26:00.001+02:00

Les Albums de Picasa Albums Web sont affichés sur Google+. Depuis mars 2013, Google redirige l'adresse picasaweb.google.com vers plus.google.com/photos. Il est possible d'empêcher la redirection de Picasa vers Google+.

Les Gadgets Blogger utilisent le Flux Media RSS de l'Album Picasa affiché dans Google+. Les Gadget acceptent l'URL de l'album de Google+ comme paramètre d'entrée.

Trouver l'URL d'un Album Google+

Ouvrir l'Album Google+, et copier l'adresse. Par exemple :

https://plus.google.com/photos/115854656993758258488/albums/5661135291897071089

115854656993758258488 est l'identifiant Google+ de l'utilisateur.
5661135291897071089 est l'identifiant de l'Album Google+.

Les vignettes (Thumbnails) d'un Album de Google+

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (sous la forme http://...) :

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus-b.xml

Ajouter ce Gadget en l'intégrant dans votre bibliothèque xml

Installer le Gadget développé par Soraya sur votre Blog. Il ne sera visible que par l'administrateur. Ajouter l'URL du gadget dans la liste de liens.

Paramètres du Gadget

Gadget Blogger - Les Vignettes (Thumbnails) d'un Album de Google+

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus-b.xml

AID : l'adresse (URL) de l'Album Google+.

NBC : Le nombre de vignettes à afficher (de 1 à 200)

SIZE : La largeur des vignettes (de 32 à 160px)
HSIZE : La hauteur des vignettes (de 32 à 160px). Facultatif.
CROP : Recadrage (Cropped), Yes ou No. Défaut No (non).
Yes (oui), l image originale est recadrée dans un carré de taille SIZE.
No (non), l'image originale est placée dans un rectangle de largeur SIZE.

SHA : Vignettes avec ombre portée (Yes - No)

CLP : Ouvrir l'image sur un click (Yes - No), par défaut Yes

URL : L'URL du lien sur le titre
TITLE : Le titre du lien

LCOL : #rrggbb la couleur du lien
BCOL : #rrggbb la couleur de la bordure
BKCOL : #rrggbb la couleur du fond
CCOL : #rrggbb la couleur du conteneur

Le Gadget Google dans le html d'un message

Le Gadget Blogger décrit ci-dessus ne peut pas être inséré dans le html d'un message. Pour cela nous devons utiliser un Gadget Google, à insérer avec un tag iframe. Les paramètres du gadget sont en rouge.

Le résultat

Les vignettes de l'Album Google+ Souvenirs de Vienne.

Gadget Google - Les vignettes d'un Album de Google+ - http://www.liens-du-vin.ch/thumbnails-google-plus.htm

Un diaporama (Slideshow) d'un Album de Google+

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (de la forme http://...) :

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow-b.xml

Gadget Blogger - Diaporama (Slideshow) d'un Album de Google+

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow-b.xml

URL : l'adresse de l'Album Google+.

PWH : largeur des images en pixels. Jusqu'à 800 pixels le diaporama affiche l'image en qualité originale
PHT : hauteur des images en pixels. Toutes les images sont mises à l'échelle, en se basant sur PWH et PHT. Le diaporama est exactement à la taille PWH x PHT

DTime : temps d'affichage en ms. (de 1000 à 12000). Defaut : 4000.
TTime : temps de transition entre les images en ms. (de 500 à 6000). Defaut : 2000.

RND : affichage des images dans un ordre aléatoire (Yes - No, défaut No)

CLP : ouverture d'une fenêtre Google+ lors d'un clic sur l'image (Yes - No, défaut No)

NAB : affichage de la barre de navigation (Yes - No, défaut Yes)

SCOL : #rrggbb couleur du fond du diaporama
BCOL : #rrggbb couleur de la bordure

Le résultat

Le Diaporama des Domaines viticoles suisses (Clos Domaines et Châteaux).

Gadget Google - Diaporama Album Google+ - http://www.liens-du-vin.ch/google-plus-slideshow.htm - Les plus beaux domaines viticoles de Suisse

Mentions légales

Gadgets fournis par Google.

© photos : www.diapo.ch, Philippe Krauer, www.c-d-c.ch et Philippe Chappuis

Plus d'informations

Diaporama de Google+ avec un Gadget Google

Les vignettes d'un Album de Google+ avec un Gadget Google

Les vignettes d'un album de Picasa

Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Un diaporama des photos d'un album de Picasa

Un diaporama des derniers Pins de Pinterest

Des Gadgets pour Google+

Vidéo : intérêt et fonctionnement des Flux RSS

Des Gadgets pour son Site ou son Blog

Les derniers Pins d'un compte Pinterest avec vignette

2013-02-11T22:48:00.000+01:00

Le flux RSS d'un compte Pinterest, créé par Yahoo Pipes comprend pour chaque Pins, un titre, une vignette et une description.

Identifier un compte Pinterest

Ouvrir son compte Pinterest, et copier l'adresse. Par exemple :

http://pinterest.com/prac53/

prac53 est le nom du compte.

Ajouter ce Gadget à Blogger

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (sous la forme http://...) :

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/last-pins-b.xml

Gadget Blogger, Derniers Pins de Pinterest avec vignette

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/last-pins-b.xml

NAME : Le nom du compte Pinterest
NBP : Nombre de Pins à afficher (1 - 25)
LEN : Longeur maximum de la description (1 - 300)

LCOL : #rrggbb, couleur des liens
BTCOL : #rrggbb, couleur de la bordure des vignettes
BCOL : #rrggbb, couleur de la bordure du gadget
BKCOL : #rrggbb, couleur du fond du gadget

CCOL : #rrggbb, couleur du conteneur

Le résultat

Les 5 derniers Pins de mon compte Pinterest.

Gadget Google - Les derniers Pins d'un compte Pinterest avec vignette - http://www.liens-du-vin.ch/last-pins-pinterest.htm

Versions et mentions légales

Gadgets fournis par Google.

Le Flux RSS utilisé par ce Gadget est généré par un Yahoo Pipes. Mes remerciements aux auteurs, voyelle.fr.

Plus d'informations

Les Gadget Pinterest Profile Widget et Board Widget réunis dans un Gadget Blogger

Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Les derniers Pins de Pinterest avec vignette en utilisant un Gadget Google

Un diaporama des derniers Pins de Pinterest

Vidéo : intérêt et fonctionnement des Flux RSS

Suivre les Pins de son site sur Pinterest

Les derniers Pins de Pinterest avec vignette sur sa page Google Sites

Des Gadgets pour son Site ou son Blog

Les derniers Pins de Pinterest sur son Blog

2012-11-16T17:12:00.000+01:00

Lors du lancement des outils pour les entreprises (novembre 2012), Pinterest propose deux nouveaux Widgets Profile Widget et Board Widget.

C'est la version Pinterest du gadget des vignettes de Pinterest, en version Gadget Blogger ou en version Gadget Google. La version personnalisée de ces Gadgets autorise davantage d'options (couleurs, action sur clic, liens, nombre de vignettes) que la version officielle.

Identifier un tableau (Board) de Pinterest

Ouvrir un tableau (board) de Pinterest, et copier l'adresse. Par exemple :

http://pinterest.com/prac53/geek/

prac53 est le nom du compte.

geek est le nom du tableau.

Ajouter ce Gadget à Blogger

Ajouter ce Gadget avec le bouton Add to Blogger :

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget :

http://prac-gadget.googlecode.com/files/pinterest-widget-b.xml

Gadget Blogger, Derniers Pins de Pinterest

http://prac-gadget.googlecode.com/files/pinterest-widget-b.xml

USER : Le nom du compte Pinterest
BOARD : Le nom du tableau Pinterest. Facultatif, s'il ne figure pas, le Gadget affiche les derniers Pins du compte

TWI : La largeur d'une vignette (60 - 240), en pixels

THE : La hauteur maximum d'une vignette (60 - 1200), en pixels

NBC : Nombre de vignettes à afficher par ligne(1 - 6)

CCOL : #rrggbb, couleur du conteneur

Le résultat

Les derniers Pins de mon compte Pinterest.

Gadget Google - Les derniers Pins d'un compte Pinterest - http://www.liens-du-vin.ch/pinterest-profile-board-widget.htm

Les derniers Pins du tableau de +Tomate Joyeuse, Tout Pinterest en Français.

Gadget Google - Les derniers Pins d'un compte Pinterest - http://www.liens-du-vin.ch/pinterest-profile-board-widget.htm

Les derniers Pins du Blog de Soraya.

Gadget Google - Les derniers Pins d'un compte Pinterest - http://www.liens-du-vin.ch/pinterest-profile-board-widget.htm

Versions et mentions légales

Gadgets fournis par Google.

Plus d'informations

Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Les derniers Pins de Pinterest avec un Gadget Google

Un diaporama des derniers Pins de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Suivre les Pins de son site sur Pinterest

Les derniers Pins de Pinterest sur sa page Google Sites

Les vignettes d'une page de Facebook

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Des Gadgets pour son Site ou son Blog

Timeline de Twitter

2012-11-06T16:01:00.001+01:00

La Timeline de Twitter est définie sur Twitter et n'est valable que pour 1 à 5 Domaines Internet. A moins d'éliminer la redirection de Blogger, il n'est pas possible de définir blogspot.com comme Domaine Internet qui héberge la Timeline.

J ai donc utilisé mon Domaine, Les Liens du Vin pour héberger ma Timeline. Pour l'insérer sur mon Blog, il suffit de placer la page html dans un tag iframe.

Gadget Google - Timeline twitter - http://www.liens-du-vin.ch/_files/timeline-twitter-fr.htm

Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit.
Pour utiliser cette nouvelle fonctionnalité, il faut renseigner la rubrique Domaines du gadget Timeline et mettre : googledrive.com comme nom de domaine.
Sur Google Drive, j'ai placé dans un répertoire en accès public, un fichier html contenant la Timeline.

Plus d'informations

Le guide de Twitter pour insérer une Timeline

Insérer un Badge de Twitter sur Google Sites

Les vignettes d'un compte ou d'un tableau Pinterest

2012-10-11T22:16:00.000+02:00

Le Gadget Blogger proposé permet d'afficher les vignettes des Pins d'un compte ou d'un tableau de Pinterest. Il permet de réaliser une planche-contact de ses photos placées sur Pinterest.

Identifier un tableau (Board) de Pinterest

Ouvrir un tableau (board) de Pinterest, et copier l'adresse. Par exemple :

http://pinterest.com/prac53/geek/

prac53 est le nom du compte.

geek est le nom du tableau.

Ajouter ce Gadget à Blogger

Ajouter ce Gadget avec le bouton Add to Blogger :

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget :

http://prac-gadget.googlecode.com/files/pinterest-thumbnails-b.xml

Gadget Blogger, Vignettes Pinterest

http://prac-gadget.googlecode.com/files/pinterest-thumbnails-b.xml

USER : Le nom du compte Pinterest
BOARD : Le nom du tableau Pinterest. Facultatif, s'il ne figure pas, le Gadget affiche les vignettes du compte

NBC : Nombre de vignettes à afficher (1 - 25)

SHA: Vignettes avec ombre portée (Yes ou No)
CLP : Clic sur image, pour accès à l'image originale sur Pinterest (Yes ou No)

URL : Lien sur le titre
TIT : Titre du Gadget

LCOL : #rrggbb, couleur du lien
BCOL : #rrggbb, couleur de la bordure
BKCOL : #rrggbb, couleur du fond des vignettes
CCOL : #rrggbb, couleur du conteneur

Le résultat

Les 12 dernières vignettes de mon tableau Geek, affichage avec ombre portée.

Gadget Google - Les vignettes d'un compte Pinterest ou d'un tableau Pinterest - http://www.liens-du-vin.ch/gadget-pinterest-thumbnails.htm

Les 9 dernières vignettes du tableau de Tomate Joyeuse, Tout Pinterest en Français, affichage avec ombre portée.

Gadget Google - Les vignettes d'un compte Pinterest ou d'un tableau Pinterest - http://www.liens-du-vin.ch/gadget-pinterest-thumbnails.htm

Les 9 dernières vignettes du tableau des développements de Blogger Code du Blog de Soraya. Vignettes sans ombre portée.

Gadget Google - Les vignettes d'un compte Pinterest ou d'un tableau Pinterest - http://www.liens-du-vin.ch/gadget-pinterest-thumbnails.htm

Versions et mentions légales

Gadgets fournis par Google.

Plus d'informations

Les vignettes de Pinterest avec un Gadget Google

Un diaporama des derniers Pins de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Suivre les Pins de son site sur Pinterest

Les vignettes de Pinterest sur sa page Google Sites

Les vignettes d'une page de Facebook

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Des Gadgets Blogger pour vos Albums de Google+

Des Gadgets pour son Site ou son Blog

Les derniers messages d'un Blog, avec vignettes

2012-09-30T20:53:00.000+02:00

Le Gadget Blogger affiche un titre, le sommaire et une vignette pour chaque message du Blog. Le Blog doit être public et le flux des messages du Blog doit être sur Partiel ou Complet

Ajouter ce Gadget avec le bouton Add to Blogger :

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget :

http://prac-gadget.googlecode.com/files/last-posts-b.xml

Gadget Blogger - Derniers messages d'un Blog

http://prac-gadget.googlecode.com/files/last-posts-b.xml

BID : L'identifiant du Blog

Pour obtenir l'identifiant du Blog, afficher la source du Blog et rechercher l'instruction :

<link rel="service.post" type="application/atom+xml" title="Titre du Blog - Atom" href="http://www.blogger.com/feeds/30801821/posts/default" />

30801821 est l'identifiant du Blog.

NBP : Nombre de messages à afficher (1 - 20)
LEN : Longueur du texte à afficher (1 à 300)

LCOL : #rrggbb, couleur du lien
BTCOL : #rrggbb, couleur de la bordure des vignettes
BCOL : #rrggbb, couleur de la bordure du gadget
BKCOL : #rrggbb, couleur du fond des vignettes
CCOL : #rrggbb, couleur du conteneur

Des exemples

Les 7 derniers messages du Blog de Prac.

Gadget Google - Les derniers messages d'un blog de Blogger, avec vignettes - http://www.liens-du-vin.ch/last-posts-blogger.htm
Les 7 derniers messages de Blogger-Code, le Blog de Soraya.

Gadget Google - Les derniers messages d'un blog de Blogger, avec vignettes - http://www.liens-du-vin.ch/last-posts-blogger.htm

Plus d'informations

Les derniers messages d'un Blog avec un Gadget Google

Un Gadget Blogger pour afficher un diaporama des derniers messages d'un Blog

Un Gadget Blogger pour afficher les derniers commentaires d'un Blog

Partager ses abonnements de Google Reader

Les derniers Pins d'un compte Pinterest, avec vignette

Des Gadgets pour son Site ou son Blog

Recadrer automatiquement les images du Blog

2012-09-28T21:21:00.000+02:00

Les photos mises en ligne sur Blogger sont stockées dans Picasa Albums Web. Chaque blog contenant des photos dispose d'un album Web Picasa correspondant (portant le même nom) pour ces photos. Une petite icône orange Blogger figure sur la couverture de cet album. Nous allons voir comment utiliser l'URL fournie par Picasa Albums Web pour recadrer automatiquement une photo.

L'adresse URL d'une photo s'obtient en ouvrant la photo dans Picasa Albums Web, puis en recopiant le lien donné dans la colonne de droite (lien vers cette photo). C'est une adresse de ce type :

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s800/navette-atlantis.jpg

Le répertoire sxx, ici s800 est la taille de la plus grande dimension de l'image. Blogger fournit automatiquement une taille en fonction de l'espace disponible sur le blog et du choix indiqué lors de l'insertion de l'image (petit, moyen ou grand).

Taille d'image sans déformation

La valeur du répertoire sxx peut varier de 0 à 1600 pixels. s0 donne l'image originale. Affichons notre image en 72 pixels de large (vignette - thumbnail) puis en 220 pixels de large.

Vignette de 72 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s72/navette-atlantis.jpg

Image de 220 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220/navette-atlantis.jpg

Paramètre -d

En ajoutant -d, l'URL ainsi créée permet le téléchargement de l'image, avec les informations Exif.

Adresse pour le téléchargement de l'image originale

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s0-d/navette-atlantis.jpg

Télécharger l'image originale

Paramètre -h

En ajoutant -h, l'URL ainsi créée est celle d'une page web. Blogger ajoute un script qui interdit l'insertion de cette page dans un cadre iframe.

Adresse d'une page web avec une image de 720 pixels de large

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s720-h/navette-atlantis.jpg

Afficher une page web, avec une image de 720 pixels

Paramètre -c

Le paramètre -c permet d'obtenir une image recadrée (croppée - to crop, recadrer). L'image est un carré centré sur l'image originale. Les proportions sont conservées.

Carré de 144 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s144-c/navette-atlantis.jpg

Image carrée de 220 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220-c/navette-atlantis.jpg

Combiner les paramètres -c et -h

Les paramètres -c et -h peuvent être utilisés simultanément.

Carré de 320 pixels de côtés, affiché dans une page web

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s320-c-h/navette-atlantis.jpg

Afficher une page web, avec un carré de 320 pixels

Plus d'informations

Picasa Albums Web

Un Gadget Blogger pour afficher les vignettes d'un Album Picasa

Un Gadget Blogger pour afficher un diaporama d'un Album Picasa

Un Gadget Google pour insérer une photo avec un cadre semi-transparent

Un badge Google+ sur son Blog

2012-09-25T20:44:00.000+02:00

Pour chaque profil Google+, il est possible de créer un badge, fourni par Google Sites. Ce badge peut être placé sur son Blog avec un tag iframe.

L'identifiant du Profil Google+

Dans Google+ ouvrir le Profil. L'adresse de la page est de cette forme :

https://plus.google.com/115854656993758258488/posts

115854656993758258488 est l'identifiant du profil Google+

Le code à placer dans le HTML du Blog (un message ou un gadget html/javascript)

Des exemples

Mon profil sur Google+, +Philippe Chappuis :
Le badge Google+ de +Larry Page :
Le badge Google+ de +Soraya Lambrechts, l'auteur de Blog Connexion :

Plus d'informations

Les vignettes des profils et pages Google+ (GooglePlus) sur Blogger. Les explications de +Soraya Lambrechts

Des Gadgets Blogger pour Google+

Des Gadgets Google pour Google+

Des Gadgets pour son Site ou son Blog

Les vignettes d'un album d'une Page Facebook

2012-09-09T21:52:00.001+02:00

Si une Page de Facebook contient un ou plusieurs albums, les vignettes de ces albums peuvent être affichées sur son Blog.

L'identifiant de l'Album

Pour obtenir l'identifiant, ouvrir l'album Facebook, et copier l'adresse. Par exemple :

https://www.facebook.com/media/set/?set=a.229240080442617.65799.190160991017193&type=3

229240080442617 est l'identifiant de l'Album.

Important : Le Gadget ne peut être utilisé que pour un Album public, d'une Page Facebook.

Ajouter ce Gadget à Blogger

Ajouter ce Gadget avec le bouton Add to Blogger :

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget :

http://prac-gadget.googlecode.com/files/facebook-thumbnails-b.xml

Gadget Blogger, Vignettes Facebook

http://prac-gadget.googlecode.com/files/facebook-thumbnails-b.xml

ID : Identifiant de l'Album Facebook

NBC : Nombre de vignettes à afficher (1 - 200)

SHA: Vignettes avec ombre portée (Yes ou No)
CLP : Clic sur image, pour accès à l'image originale sur Facebook (Yes ou No)

URL : Lien sur le titre de l'Album
TIT : Titre de l'Album

LCOL : #rrggbb, couleur du lien
BCOL : #rrggbb, couleur de la bordure
BKCOL : #rrggbb, couleur du fond des vignettes
CCOL : #rrggbb, couleur du conteneur

Le résultat

Les vignettes de l'album l'été au Domaine du Mont d'Or. Vignettes avec ombre portées.

Gadget Google - Les vignettes d'un Album public d'une Page de Facebook - http://www.liens-du-vin.ch/gadget-vignettes-facebook.htm

Versions et mentions légales

Gadgets fournis par Google.

Plus d'informations

Les vignettes d'un Album Facebook avec un Gadget Google

Les vignettes d'un Album Facebook sur sa page Google Sites

Insérer une vidéo de Facebook sur son Blog

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Les vignettes de Pinterest

Des Gadgets pour son Site ou son Blog

L'aperçu d'un livre de Google Livres sur son Blog

2012-08-26T17:54:00.000+02:00

Google Livres permet de parcourir une base de données de plusieurs millions de livres. Google permet d'afficher l'aperçu d'un livre, en utilisant les API de google Books. Le Gadget Google permet l'ajout d'un aperçu en quelques clics.
L'aperçu permet de visualiser le livre en texte intégral ou de parcourir les premières pages. Il dispose d'une recherche interne et d'outils de zoom.

L'URL du Gadget

preview-books.xml

Ajouter le Gadget sur son Blog

Le Gadget peut être ajouté en utilisant le code iframe du Gadget. Le code ci-dessous doit être collé sans espaces ni retour à la ligne, soit dans un Gadget HTML / Javascript, soit directement dans le HTML d'un message. Les paramètres du Gadget sont indiqués en rouge.

L'identifiant du livre

ISBN, le numéro international normalisé du livre (International Standard Book Number). Les 10 ou 13 chiffres du code EAN. Par exemple ISBN:0738531367.

Numéro OCLC, le numéro unique attribué à un livre par l'OCLC lorsque le livre est catalogué sur WorldCat. Par exemple OCLC:70850767.

LCCN, le numéro de contrôle de la Bibliothèque du Congrès (Library of Congress Control Number). Par exemple LCCN:2006921508.

Identifiant Google Livres, l'identifiant unique attribué au livre par Google Livres. Par example, Py8u3Obs4f4C.

URL de l'aperçu Google Livres, c'est l'adresse internet qui ouvre l'aperçu du livre sur Google Livres. Par exemple http://books.google.com/books?id=Py8u3Obs4f4C&printsec=frontcove.

Les paramètres du Gadget

ID : identifiant du livre

PWH : largeur de l'aperçu en pixels
PHT : hauteur de l'aperçu en pixels

LAN : langue de l'interface

CCOL : #rrggbb couleur du conteneur ou transparent

Des exemples

Le livre Mountain View, images de l'amérique au début du XXe siècle.

Gadget Google - Aperçu Google Livres - http://www.liens-du-vin.ch/google-livre-apercu.htm

Le livre Pensées de Pascal

Gadget Google - Aperçu Google Livres - http://www.liens-du-vin.ch/google-livre-apercu.htm

Mentions légales

Gadget fourni par Google
Utilisation des ouvrages relevant du domaine public

Plus d'informations

Afficher une feuille Excel sur son Blog
Le lecteur de documents de Google Documents
Google Drive et Blogger - Améliorer son Blog
Fichiers joints et Podcasting avec Blogger
Webdoc - Partagez vos passions autrement

Le Gadget Recent Comments (commentaires récents)

2012-05-27T23:31:00.002+02:00

La version la plus connue de ce Gadget Blogger est le Gadget de bloggerbuster (Amanda). Malheureusement ce gadget ne traduit pas les entités html (' ou  ).

Pour corriger ce problème, la méthode classique consiste à créer un script prototype dans le javascript du gadget :

String.prototype.unescapeHtml = function ()
{
var temp = document.createElement("div");
temp.innerHTML = this;
var resu = temp.childNodes[0].nodeValue;
temp.removeChild(temp.firstChild);
return resu;
}

L'appel à cette fonction permet d'éliminer les caractères saisis comme entité html :

postcontent=postcontent.unescapeHtml()

J'ai réalisé une nouvelle version de ce gadget, qui reprend les fonctionnalités et les paramètres de la version française.

Ajouter ce Gadget à Blogger

Ajouter ce Gadget avec le bouton Add to Blogger :

Ajouter ce Gadget avec le formulaire personnalisé de Blogger :

Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget :

http://prac-gadget.googlecode.com/files/recent-comments.xml

Paramètres du Gadget

Gadget Blogger, Recent Comments

http://prac-gadget.googlecode.com/files/recent-comments.xml

BLOG : Name of Blog, for example viti-vino.blogspot.com.

NBC : Number of comments to display (1 - 20)

MAX : Length of text to display (50 - 500)

DATE : Display date (Yes - No)

TBLOG : Display title of Blog (Yes or No)

TITLE : Display title of Posts (Yes or No)

AUTHOR : Display Author (Yes or No)

TOP : Open links within the same window (Yes - No)

ALG : Text-align (left or justify)

SIZE : Size of font (85 %)

LCOL : #rrggbb, color of links

TCOL : #rrggbb, color of text

BCOL : #rrggbb, color of background

Versions et mentions légales

Gadgets fournis par Google.

Plus d'informations

Commentaires récents - version française

Un Gadget Google pour partager ses abonnements de Google Reader

Des Gadgets pour son Blog

Afficher un diaporama avec les derniers messages d'un Blog

Google Drive et Blogger - Améliorer son Blog

2012-04-26T22:31:00.001+02:00

Google Drive permet le stockage gratuit jusqu'à 5 Giga. Une petite astuce d'adressage permet de disposer de cet espace de stockage comme un hébergement internet. Nous allons en profiter pour améliorer notre Blog.

Intégrer sur son Blog une page html hébergée sur Google Drive

A titre d'exemple, j'ai copié la page Diaporama des Premiers Grands Crus Vaudois, hébergée sur mon site Les Liens du Vin, sur Google Drive.
Une fois le document partagé et rendu public, Google Drive nous donne l'adresse suivante comme lien de partage (lien aperçu de l'affichage) :

https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm

Cette URL peut être utilisée comme lien, Le Diaporama des Premiers Grands Crus vaudois, ou comme adresse source pour l'intégration de la page sur le Blog.

Le code d'intégration, avec un tag iframe :

Les Premiers Grands Crus des Clos Domaines et Châteaux

© Photos : Régis Colombo et Clos Domaines et Châteaux

Feuille de style pour un seul message

Pour une mise en page particulière, une feuille de style peut être hébergée sur Google Documents. Pour qu'elle s'applique à l'ensemble du Blog il faut placer cette instruction avant </head> :

Pour appliquer un style particulier à un seul message, il est possible de placer le style entre les 2 balises <style> et </style> dans le html du message. Si la feuille de style est de grande taille ou utilisée à plusieurs endroits sur le Blog, il peut être intéressant de l'héberger sur Google Drive et de la charger dynamiquement lors de l'affichage de la page concernée.
Il suffit de placer ce petit script dans le html du message :

Pour obtenir l'URL, nous effectuons les mêmes transformations que ci-dessus, sur l'URL fournie par Google Documents :

https://docs.google.com/open?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg

https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg

La feuille test_style.css devient accessible et peut être utilisée sur le Blog.

A titre d'exemple, cette feuille de style est utilisée pour mettre en forme la liste ci-dessous :

Quelques services Google

Les fichiers son (*.mp3)

Google Documents accepte les fichiers *.mp3. En effectuant le changement d'URL, le fichier devient lisible par un lecteur standard. J'ai utilisé le lecteur mp3 de Google Mail pour jouer un extrait du Gloria Patri de Jean-Sébastien Bach.

https://docs.google.com/open?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0

https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0

Le Gadget Google est inséré dans le html du message avec un tag iframe :

Gadget Google - Lecteur audio de Google - http://www.liens-du-vin.ch/google-audio_player- script.htm - Gloria Patri de Jean-Sébastien Bach
Extrait J.S. Bach - Gloria Patri

Animation Flash

Un fichier Flash peut être hébergé sur Google Drive. A titre d'exemple, j'ai placé l'horloge Google et obtenu l'URL suivante :

https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf

Pour intégrer l'animation Flash dans un message, il suffit de placer les 2 scripts suivants dans le html du message :

Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message :

Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit. Il faut creéer un répertoire en accès public puis placer les fichiers html dans ce répertoire.
Le répertoire public peut contenir tous les fichiers nécessaires à l'affichage d'une page Internet, en plus des pages html : script (*.js), images (*.png ou *.jpg), fichiers sons (*.mp3) ou animation flash (*.swf).

J ai par exemple placé cette mini page html sur Google Drive : Etiquette de vin. Elle peut être intégrée sur le Blog par un tag iframe :

Hébergement de pages html sur Google Drive

Plus d'informations

Google Drive

Afficher une feuille Excel sur son Blog avec Google Viewer

Le lecteur de documents de Google Documents

Insérer la Timeline de Twitter sur son Blog

Les lecteurs MP3 de Google

Nivo Slider - Comment insérer un diaporama en utilisant Google Drive

Cloud Carousel - Comment insérer un carousel d'images en utilisant Google Drive

Insérer des Gadgets de iGoogle sur son Site

Suivre les Pins de son site sur Pinterest

2012-04-09T17:54:00.001+02:00

Pinterest conserve le site à l'origine du Pin. Ainsi, les Pins de ce Blog se trouvent à cette adresse

http://www.pinterest.com/source/viti-vino.blogspot.com

Pour un site, l'adresse des Pins est :

http://www.pinterest.com/source/liens-du-vin.ch

Créer un Flux RSS

Mise à jour : 2013.01.01. feed43 ne peut plus être utilisé pour créer un Flux RSS. Pinterest impose d'être enregistré pour afficher la source. L'URL http://www.pinterest.com/source/NOMDUSITE est redirigée vers la page de loggin. L'auteur de l'article original propose d'utiliser un tableau de bord de ViralContentBuzz pour suivre ses Pins

Nous pouvons utiliser le Flux RSS de cette adresse pour suivre les Pins de ce site sur Pinterest.

feed43 permet de créer un Flux RSS à partir d'une adresse URL.

Pour créer un nouveau flux, spécifier l'adresse de la page à convertir :

Nous allons extraire dans chaque message du Flux RSS, l'identifiant du Pin, le commentaire, le lien vers l'auteur du Pin et son nom.

Les zones à extraire sont marquées par {%}. Le symbole {*} indique que nous voulons extraire ces zones dans tous les Pins. Les zones ainsi définies sont utilisables en indiquant leur numéro d'ordre, soit {%1}, {%2}, ...

<a href="http://pinterest.com/pin/{%}" class="PinImage ImgLink">{*}
<p class="description">{%}</p>{*}
<a href="{%}" title="{%}" class="ImgLink">{*}

Nous allons utiliser ces zones pour définir les propriétés d'un article du Flux :

Les zones retenues permettent de définir :

Le titre de l'article : {%2}
Le lien vers le Pin : {%1}
Le lien vers l'auteur du Pin : {%3}
Le nom de l'auteur du Pin : {%4}

Ces données une fois saisies, nous obtenons le Flux RSS des Pins réalisés depuis un site donné :

Utiliser le Flux RSS

Une fois le Flux créé sur feed43, il est recommandé de renommer le flux. Par exemple, le Flux RSS des Pins réalisés sur mon site Les Liens du Vin : http://feed43.com/liens-du-vin.xml.

Le Flux peut être utilisé avec Google Reader ou affiché sur un Blog avec le Gadget Flux :

J'ai utilisé le Flux créé ci-dessus, avec un Gadget Google comme lecteur de Flux :

&lt;p&gt;Afficher les titres d'un flux sur son site&lt;/p&gt;

En savoir plus

L'article original, sur Mashable

Video : L'intérêt et le fonctionnement des Flux RSS

Le bouton Pin-It de Pinterest, sur le Blog de Soraya

Tout Pinterest en français. Les Pins de Tomate Joyeuse

Un Gadget Google pour insérer un Flux RSS sur son Site ou son Blog

Un diaporama avec les derniers posts de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Les vignettes de Pinterest

Un Diaporama avec les derniers posts de Pinterest

2012-02-26T21:23:00.001+01:00

Deux Gadgets Blogger pour afficher un Diaporama de Pinterest sur son Blog. Avec ces deux gadgets nous pouvons restreindre l'affichage à un seul tableau (board) de Pinterest. Ces gadgets utilisent le Flux Media RSS fourni par Pinterest. Cet hébergeur fournit un flux pour les dernières Images d'un utilisateur ou les dernières images d'un seul tableau (board).

Les deux variantes du Gadget

Sans titre

pinterest-slideshow-simple-b.xml

Avec un titre et les légendes des photos

pinterest-slideshow-b.xml

Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Sans titre

http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple-b.xml

Avec titre et légendes

http://prac-gadget.googlecode.com/files/pinterest-slideshow-b.xml

Sans titre

USER : le nom de l'utilisateur Pinterest

BOARD : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,
le diaporama affiche les dernières images de l'utilisateur

Pour obtenir le nom du tableau (board), clic sur Edit du tableau. Copier l'URL :

http://pinterest.com/prac53/favorite-places-spaces/settings/

prac53 est le nom de l'utilisateur
favorite-places-spaces est le nom du tableau Favorite Places & Spaces

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.

BCOL : #rrggbb. La couleur de la bordure du diaporama.

Avec titre et légendes

USER : le nom de l'utilisateur Pinterest

BOARD : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,
le diaporama affiche les dernières images de l'utilisateur

Pour obtenir le nom du tableau (board), clic sur Edit du tableau. Copier l'URL :

http://pinterest.com/prac53/favorite-places-spaces/settings/

prac53 est le nom de l'utilisateur
favorite-places-spaces est le nom du tableau Favorite Places & Spaces

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

LNK : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.
TIT : le titre du diaporama. Par défaut le titre du Flux Media RSS de Pinterest.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.

BCOL : #rrggbb. La couleur de la bordure du diaporama.

TCOL : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.
LCOL : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.
CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.

Les caractéristiques des gadgets

Affiche les images en format *.jpg, *.gif et *.png
Fond transparent ou couleurs à choix
Temps d'affichage modifiable
Ordre aléatoire des images en option
Suppression possible de la barre de navigation
Clic sur image désactivé par défaut
Affichage des légendes de chaque image (version avec titre)

Des exemples

J'ai utilisé, non pas un Gadget Blogger pour ces exemples, mais la version Gadget Google afin d'afficher le Diaporama dans le html de ce message.

Les dernières images de mon compte Pinterest. Diaporama avec titre et légendes des images.

Gadget Google - Diaporama Pinterest avec titre - http://www.liens-du-vin.ch/pinterest-slideshow-script.htm

Les images du tableau Geek de mon compte Pinterest. Diaporama sans titre et barre de navigation supprimée.

Gadget Google - Diaporama Pinterest avec titre - http://www.liens-du-vin.ch/pinterest-slideshow-script.htm

Gadget Google ou Gadget Blogger

Un Gadget Google peut être placé dans un message du Blog. Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).

Plus d'informations

Insérer le bouton Pin-It de Pinterest. Les codes et toutes les explications sur Blog Connexion

Diaporama Pinterest avec un Gadget Google

Afficher un Diaporama de Pinterest sur Google Sites

Suivre les Pins de son Blog ou de son Site sur Pinterest

Diaporama des derniers messages avec un gadget Blogger

Gadget Blogger - Les vignettes de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Les vignettes d'un compte ou d'un tableau de Pinterest

Diaporama Picasa avec un Gadget Blogger

Diaporama Flickr avec un Gadget Blogger

Diaporama Photobucket avec un Gadget Blogger

Des Gadgets Blogger pour vos Albums de Google+

Créer un Diaporama à partir d'un Flux Média RSS

Afficher des Diaporamas sur Google Sites

Des Gadgets pour son Blog

Webdoc - Partagez vos passions autrement

2011-12-12T22:01:00.001+01:00

Webdoc, une autre façon de publier et partager du contenu sur le Web

Webdoc permet de créer en quelques clics du contenu multimédias et de le partager sur les principaux réseaux sociaux (Facebook, Twitter et Google+).

Disposant d'un outil d'édition simple d'emploi, les vidéos, les sons et les diaporamas sont créés par un glisser-déplacer. Des Apps permettent d'ajouter un diaporama de Flickr ou de Picasa Albums Web. Des goodies facilitent la mise en forme d'une présentation de Slideshare ou d'une vidéo de YouTube. Les photos peuvent être présentées dans un album ou dans un diaporama.

Un Webdoc avec un diaporama et une vidéo :

Webdoc - prac53 - A la découverte des plus beaux Clos Domaines et Châteaux viticoles de Suisse

L'insertion d'un Webdoc sur un Site ou un Blog se fait avec le code embarqué, soit un tag iframe.

Webdoc devient urturn

Depuis janvier 2013, Webdoc change de nom et devient urturn : Choisis ton Expression et partage tes émotions.

En savoir plus

Le site de Webdoc
Insérer un Webdoc sur Google Sites
Insérer un aperçu de Google Livres sur son Blog

Gadget Blogger pour insérer une image sonore

2011-08-24T23:48:00.006+02:00

Le Gadget Blogger insère une image qui joue un fichier *.mp3 au survol par la souris. Le Gadget utilise le lecteur Flash Dewplayer qui est intégré dans le Gadget.
Le fichier *.mp3 à jouer peut être hébergé sur une page classeur de Google Sites.

Le Gadget

Insérer une image sonore

image-sonore-b.xml

Ajouter le Gadget sur son Blog

Par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter (sous la forme http://...) :

Image sonore

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/image-sonore-b.xml

Les paramètres du Gadget

Image sonore

URL : l'URL de l'image à afficher
MP3 : l'URL du fichier son (*.mp3) à jouer au survol par la souris

PWH : largeur de l'image en pixels
PHT : hauteur de l'image en pixels

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.

Les caractéristiques du Gadget

L'image peut être hébergée sur Picasa Albums Web et le fichier son sur Google Sites

Un exemple

J'ai utilisé, non pas un Gadget Blogger pour cet exemple, mais la version Gadget Google afin d'afficher l'image sonore dans le html de ce message.

Le Château de Vufflens en hiver. Extrait de Jean-Sébastien Bach, Magnificat BWV 243 Gloria Patri.

Survolez l'image avec la souris !

Gadget Google - Une image sonore - http://www.liens-du-vin.ch/image-sonore-script.htm - Château de Vufflens - Bach Gloria Patri

Gadget Google ou Gadget Blogger

Un Gadget Google peut être placé dans un message du Blog. Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).

Plus d'informations

Insérer une image sonore avec un Gadget Google

Des lecteurs simples pour jouer un fichier *.mp3 sur son Blog

Le site de Dewplayer

Sonoriser ses images avec Dewplayer

Des Gadgets pour son Blog

Copyright photo

© photo : www.diapo.ch et Clos Domaines et Châteaux

Des Gadgets Blogger pour Google+

2011-07-28T20:03:00.033+02:00

Google+ dans sa version initiale ne comporte pas d'API. Grace aux Gadget Blogger nous pouvons afficher le Flux RSS (Atom) d'un utilisateur via PlusFeed, intégrer un Moteur de Recherche et afficher un badge avec les statistiques Google+.

Les Gadgets

Moteur de recherche sur Google+

google-plus-search-b.xml

Un Badge avec les Statistiques Google+

google-plus-statistics-b.xml

Afficher le Flux RSS (Atom) d'un utilisateur de Google+

google-plus-feed-b.xml

Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Moteur de recherche sur Google+

http://prac-gadget.googlecode.com/files/google-plus-search-b.xml

Un Badge avec les Statistiques Google+

http://prac-gadget.googlecode.com/files/google-plus-statistics-b.xml

Afficher le Flux RSS (Atom) d'un utilisateur de Google+

http://prac-gadget.googlecode.com/files/google-plus-feed-b.xml

Afficher le Flux RSS (Atom) d'un utilisateur de Google+, avec vignettes

http://prac-gadget.googlecode.com/files/google-plus-feed-thumb-b.xml

Ajouter le Gadget en l'intégrant dans votre bibliothèque xml

Installer le Gadget développé par Soraya sur votre Blog. Il ne sera visible que par l'administrateur. Ajouter l'URL du gadget dans la liste de liens.

Les paramètres des Gadgets

Moteur de recherche sur Google+

PUSER : lien sur le texte Google+

Par exemple le profil Google+ d'un utilisateur :

https://plus.google.com/115854656993758258488/posts?hl=fr

BKCOL : #rrggbb couleur du fond du gadget
BCOL : #rrggbb couleur de la bordure
CCOL : #rrggbb couleur du conteneur, ou transparent

Un Badge avec les Statistiques Google+

Afficher le Flux RSS (Atom) d'un utilisateur de Google+, avec ou sans vignettes

GID : l'identifiant Google+ de l'utilisateur

L'URL du profil d'un utilisateur se présente comme suit :

https://plus.google.com/115854656993758258488/posts?hl=fr

115854656993758258488 est l'dentifiant de l'utilisateur

NBR : nombre de messages à afficher . De 1 à 100, par défaut 12
LNK : URL du lien sur le titre du Flux

SCOL : #rrggbb couleur du fond du lecteur de Flux
FCOL : #rrggbb couleur de la police
HCOL : #rrggbb couleur du lien au survol de la souris
LCOL : #rrggbb couleur du fond du texte
BCOL : #rrggbb couleur de la bordure
CCOL : #rrggbb couleur du conteneur, ou transparent

Des exemples

Les Gadgets sur un modèle Picture Window

A titre d'exemple, j'ai utilisé 3 Gadgets Google, pour placer les gadgets dans le corps du message.

Le Moteur de recherche

Gadget Google - Un Moteur de Recherche pour Google+

Mes Statistiques de Google+

Gadget Google - des gadgets pour Google+ (Google Plus) - http://www.liens-du-vin.ch/gadget-google-plus.htm

Mon Flux sur Google+

Gadget Google - Le Flux d'un utilisateur de Google+ - http://www.liens-du-vin.ch/gadgets-google-plus.htm

Le Flux de Max Cutts sur Google+

Gadget Google - Le Flux d'un utilisateur de Google+ - http://www.liens-du-vin.ch/gadgets-google-plus.htm

Plus d'informations

Des Gadgets Google pour Google+

Un badge Google+ sur son Blog

Les Flux RSS

Les statistiques Google+

Gadget Google - Partager ses abonnements de Google Reader

Des Gadgets Blogger pour vos Albums de Google+

Gadget Google - Un lecteur de Flux sur son Site ou son Blog

Pour Google Sites, le Flux d'un utilisateur de Google+, le moteur de recherche et les statistiques Google+

Gadget Blogger pour insérer une video *.flv avec Dewtube

2011-05-09T23:36:00.010+02:00

Un Gadget Blogger pour afficher une Vidéo en Flash (*.flv ou *.f4v) sur son Blog. Le gadget utilise le lecteur Flash Dewtube d'alsacréations.
Il suffit d'indiquer le fichier *.flv (ou *.f4v) à afficher, le lecteur Dewtube lui-même est intégré dans le lecteur Flash du Gadget.
Le fichier Flash peut être hébergé sur une page classeur de Google Sites.

Le Gadget

Lecteur Dewtube

dewtube-b.xml

Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Lecteur Dewtube

http://prac-gadget.googlecode.com/files/dewtube-b.xml

Les paramètres du Gadget

Lecteur Dewtube

FLV : URL du fichier Flash (*.flv ou *.f4v).

C'est l'adresse du fichier video. Hébergement possible sur Google Sites.

Pour afficher un aperçu de la video, il faut placer une image au format *.jpg dans le même répertoire que la video. Cette image doit avoir le même nom et la même taille que la video.

FWH : largeur de la video en pixels.
FHT : hauteur de la video en pixels.

START : démarrage automatique, Yes ou No, par défaut No (non).

CCOL : #rrggbb ou transparent. La couleur de fond du conteneur. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.

Les caractéristiques du gadget

Il n'est pas nécessaire d'héberger le fichier Flash du lecteur (dewtube.swf). Celui-ci est intégré dans le Gadget.
Aperçu de la video à héberger sous le même nom que la video. Par exemple ma_video.flv et ma_video.jpg

Un exemple

La video Bad Boy, affichée sur un Modèle Picture Window :

Gadget Google ou Gadget Blogger

Un Gadget Google peut être placé dans un message du Blog. Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).

Plus d'informations

Insérer une video FLV avec Dewtube

Le lecteur Dewtube

Intégrer une video de Facebook sur son Blog

Diffuser une video de YouTube avec un lecteur personnalisé

Lecteur intégrable pour afficher une video Facebook

2011-05-02T22:29:00.013+02:00

Facebook ne fournit pas de lecteur intégrable pour les videos. Le Gadget Blogger permet d'insérer une video de Facebook sur son Blog. Celle-ci doit être publique.

Le Gadget

Lecteur Flash pour afficher une video de Facebook

facebook-video-player-b.xml

Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Lecteur Video

http://prac-gadget.googlecode.com/files/facebook-video-player.xml

Les paramètres du Gadget

Lecteur Video

ID : identifiant de la video

Sur Facebook, lancer la video. L'adresse est de cette forme

https://www.facebook.com/photo.php?v=3701337574015&set=vb.228564680568906&type=3&theater

3701337574015 est l'identifiant de la video

FWH : largeur de la video en pixels
FHT : hauteur de la video en pixels

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent

Caractéristiques du gadget

Le Gadget est prévu pour des vidéos hébergées sur Facebook, qui sont publiques.
Il ne convient pas pour des videos privées ou placées sur Facebook depuis YouTube ou Dailymotion

Des exemples

Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog). Les exemples ci-dessous sont des Gadget Google insérés dans le html de ce message.

Lecteur Video. Vidéo de TruPinoyTV - Just Awesome !

Mise à jour : mars 2013. Vidéo facebook supprimée par TruPinoyTV. Ci-dessous, la vidéo sur YouTube (Flashmob organisé par la Banque de Sabadell pour son 130^iem anniversaire). Insertion avec un Gadget Google.

Bacio della Luna - Prosecco. Lecteur YouTube - http://www.liens-du-vin.ch/youtube-player-script.htm

Lecteur Video. Vidéo de Revelation - Awesome Swiss Watch

Gadget Google - Insérer une vidéo de Facebook sur son Blog ou son Site - http://www.liens-du-vin.ch/facebook-video-gadget.htm

Plus d'informations

Le site de Facebook

Un Gadget Google pour afficher une vidéo de Facebook

Le lecteur Dewtube pour afficher une video *.flv

Afficher des animations en Flash avec un lecteur standard

Videos de YouTube en haute qualité

Les vignettes d'un Album de Facebook sur son Blog

D'autres Gadgets pour son Site ou son Blog

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

2011-04-30T18:30:00.033+02:00

Pour placer un lecteur mp3 (son) sur son Blog, il faut généralement insérer le code d'un lecteur Flash. Une fois le code inséré, il faut rechercher un hébergeur pour le fichier Flash (*.swf) et pour les fichiers *.mp3 à jouer.

Les Gadgets Blogger présentés ci-dessous intègrent le lecteur Flash. L'hébergement des fichiers *.mp3 est possible sur Google Sites, dans une page classeur.

Les Gadgets

Lecteur Dewplayer simple

dewplayer-b.xml

Lecteur Dewplayer avec contrôle du volume

dewplayer-vol-b.xml

Lecteur Dewplayer avec lecture de plusieurs fichiers son

dewplayer-multi-b.xml

Lecteur Google audio de Gmail

google-audio-b.xml

Lecteur Google audio de Google Reader

google-audio-step-b.xml

Ajouter le Gadget sur son Blog

Par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter (de la forme http://...) :

Lecteur Dewplayer

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/dewplayer-b.xml

Lecteur Dewplayer avec contrôle du volume

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/dewplayer-vol-b.xml

Lecteur Dewplayer avec lecture de plusieurs fichiers

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/dewplayer-multi-b.xml

Lecteur Google audio (Gmail)

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-b.xml

Lecteur Google audio (Google Reader)

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step-b.xml

Les paramètres des Gadgets

Lecteur Dewplayer

MP3 : url du fichier *.mp3 à jouer

START : démarrage automatique (Yes ou No), par défaut No
LOOP : lecture en boucle (Yes ou No), par défaut No

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent

Lecteur Dewplayer avec contrôle du volume

Lecteur Dewplayer avec lecture de plusieurs fichiers

MP3S : url des fichiers *.mp3 à jouer

Séparer les fichiers par le caractère Pipe |, à coder %7C

Exemple : son1.mp3%7Cson2.mp3

START : démarrage automatique (Yes ou No), par défaut No
LOOP : lecture en boucle (Yes ou No), par défaut No

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent

Lecteur Google audio (Gmail)

MP3 : url du fichier *.mp3 à jouer

START : démarrage automatique (Yes ou No), par défaut No

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent

Lecteur Google audio (Google Reader)

MP3 : url du fichier *.mp3 à jouer

START : démarrage automatique (Yes ou No), par défaut No

CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent

Les caractéristiques des gadgets

Le lecteur Flash est intégré dans chaque Gadget
Les fichiers *.mp3 peuvent être hébergés sur Google Sites, dans une page classeur

Des exemples

Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog). Les exemples ci-dessous sont réalisés à partir d'un Gadget Google. Celui-ci peut être inséré à l'aide d'un tag iframe dans le html du message.

Lecteur Dewplayer. Extrait O Fortuna, Carl Orff, Carmina Burana

Gadget Google - Dewplayer - http://www.liens-du-vin.ch/flash_dewplayer-script.htm

Lecteur Dewplayer avec contrôle du volume. Extrait Magnificat BWV 243, Gloria Patri (JS Bach)

Gadget Google - Dewplayer volume - http://www.liens-du-vin.ch/flash_dewplayer-script.htm

Lecteur Dewplayer avec lecture de plusieurs fichiers. Extraits Requiem Dies Irae (Mozart) et Posthorn, swiss postal sound (Rossini)

Gadget Google - Dewplayer volume - http://www.liens-du-vin.ch/flash_dewplayer-script.htm

Lecteur Google audio (Gmail). Extrait O Fortuna, Carl Orff, Carmina Burana

Gadget Google - Lecteur audio de Google - http://www.liens-du-vin.ch/google-audio_player-script.htm

Lecteur Google audio (Google Reader). Extrait Magnificat BWV 243, Gloria Patri (JS Bach)

Gadget Google - Lecteur multimédia de Google - http://www.liens-du-vin.ch/google-audio_player-script.htm

Plus d'informations

Un Gadget Google pour insérer un lecteur audio compatible HTML5

Un Gadget Google pour insérer un lecteur audio compatible HTML5 sur Google Site

Dewplayer, le site

Des Gadgets Google pour insérer le lecteur Dewplayer

Des Gadgets Google pour insérer le lecteur audio de Google

Un Gadget Blogger pour insérer une image sonore

Un Gadget Google pour insérer une image sonore

Fichiers joints et Podcasting avec Blogger

Afficher son blog avec les vues dynamiques

2011-04-01T00:08:00.017+02:00

Disponibles depuis le 30 mars 2011, les vues dynamiques permettent d'afficher son Blog dans 5 présentations différentes. Les mises à jour de fin septembre 2011 apportent 2 vues supplémentaires.

La vue dynamique de son Blog

http://NOMDUBLOG.blogspot.com/view

Activer la vue dynamique

Paramètres / général. Activer les vues dynamiques : Oui

Selon l' Aide en ligne, le Flux du Blog doit être sur Complet.

La vue barre de défilement (sidebar)

La vue planche d'images (flipcard)

La vue mosaïque (mosaic)

La vue instantané (snapshot)

La vue ruban temporel (timeslide)

La vue magazine

La vue classique (classic)

Plus d'informations

Les vues dynamiques pour le lecteur du Blog

Les Vues dynamiques - mise à jour de fin septembre 2011

Le Blog de Google France présente les dernières nouveautés des Vues Dynamiques

Les vues affichent les messages du Blog. Les gadgets disparaissent, mais les publicités AdSense figurent. Le format et la position des publicités ne sont pas modifiables

Il est possible d'afficher son Blog avec l'une des sept vues dynamiques disponibles. La méthode est décrite sur Mes Trucs pour Blogger. Il n'est ainsi plus nécessaire d'ajouter /view à l'URL du Blog pour obtenir l'affichage dynamique

Les vues dynamiques sont supportées à partir d'Internet Explorer 8, Chrome 10 et Firefox 3.6

Les Vues Dynamiques de ce Blog

Diaporama réalisé avec le Gadget Google : Diaporama.

Gadget Google - Diaporama Picasa Albums Web avec titre - http://www.liens-du-vin.ch/picasa-gadget-script.htm

Configurer le Gadget Suivre par Mail

2011-03-20T18:35:00.019+01:00

Blogger propose depuis le 16 mars 2011 un nouveau Gadget, Suivre les mises à jour par e-mail .

Une fois le gadget installé sur le Blog, le gadget se présente sous la forme d'une zone de saisie suivie d'un bouton Submit. Le texte de la zone de saisie, Email address... n'apparaît que sous Chrome. C'est l'attribut placeholder de la balise input qui n'est pas traité par FireFox 3.6 et Internet Explorer 8.

La grille de validation de Feedburner est quand à elle également en anglais :

Modifier le code source

Nous allons modifier le code html du gadget pour afficher les textes en français et obtenir le formulaire Feedburner dans cette langue.

Présentation / Modifier le code HTML. Cocher Développer des modèles de gadgets puis rechercher le code suivant :

<b:widget id='FollowByEmail1' locked='false' title='Suivre par Mail' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2
class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify'
expr:onsubmit='"window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" +
data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\");
return true"' method='post' target='popupwindow'>
<span>
<input class='follow-by-email-address' name='email' placeholder='Email address...'
type='text'/>
</span>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

Email address... : à remplacer par Adresse Mail...
Submit : à remplacer par Suivre
en_US : à remplacer par fr_FR

Le formulaire de validation proposé par Feedburner est maintenant en français :

Plus d'informations

Pour configurer le mail envoyé par Feedburner (textes en français, options d'envois, etc...), suivre les indications données par MesTrucsPourBlogger

Afficher une feuille Excel sur son Blog - Google Viewer

2011-02-27T20:40:00.021+01:00

Le lecteur de document de Google, Google Viewer permet de visionner des fichiers *.pdf (Adobe Portable Document Format), *.tif (Tagged Image File Format) et *.ppt (Microsoft PowerPoint).

Depuis le 18 février 2011, le lecteur de Google peut afficher 12 formats supplémentaires. Il est désormais possible d'afficher un fichier *.psd (Adobe Photoshop) ainsi que les fichiers Excel, *.xls et *.xlsx

Afficher un fichier Adobe Photoshop

En utilisant le formulaire en ligne avec l'adresse d'un fichier *.psd hébergé sur Google Docs, nous obtenons ce code pour intégrer le lecteur :

Adresse du fichier *.psd

http://www.liens-du-vin.ch/_files/_files/ascreen-ph.psd

Code iframe pour intégrer le lecteur

<iframe
src="http://docs.google.com/viewer?
url=http://www.liens-du-vin.ch/_files/ascreen-ph.psd
&embedded=true"
width="380" height="360" style="border: none;">Lecteur Google Viewer pour afficher un fichier *.psd</iframe>

Le résultat

Le cas d'une feuille Excel

J ai créé une feuille Excel à partir des statistiques de visite de ce Blog (2010, type de navigateur et système d'exploitation).
La feuille Excel est hébergée par Google Docs, en format original. Pour conserver le format original lors de l'importation, il ne faut pas cocher l'option :

Convertir des documents, présentations, feuilles de calcul et dessins au format Google Documents correspondant

En utilisant le formulaire en ligne de Google Viewer, la feuille Excel peut être affichée dans le lecteur.

Feuille Excel dans le lecteur Google Viewer

Utiliser un Google Web Elements

Pour une intégration directe sur le Blog, il reste cependant préférable d'utiliser le Google Web Elements Spreadsheet

Dans ce cas, il faut respecter deux conditions :

La feuille Excel doit être importée dans Google Docs, avec l'option de conversion :

Convertir des documents, présentations, feuilles de calcul et dessins au format Google Documents correspondant
Le document doit être public et le document doit être publié en tant que page Web

Utilisez l'option Partager, une fois le document ouvert pour publier la page :

Adresse de la page Web (feuille Excel en format Google Documents)

http://spreadsheets.google.com/pub?
output=html
&widget=true
&single=true
&element=true
&gid=0
&key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc

Code du Google Web Elements

<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:350px;height:340px;" src="http://spreadsheets.google.com/pub?
output=html
&widget=true
&single=true
&element=true
&gid=0
&key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc"
scrolling="no" allowtransparency="true"></iframe>

En plaçant le code du iframe dans le html du message, nous obtenons :

Google Web Elements - Spreadsheets

Une astuce

Il est possible d'insérer directement, sans passer par un Google Web Elements, une plage d'une feuille Excel. La feuille doit satisfaire les deux conditions mentionnées ci-dessus.
On utilise aussi un tag iframe. Le code à insérer :

Adresse de la page Web (feuille Excel en format Google Documents)

https://spreadsheets.google.com/ccc?
key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc
&hl=fr

Code du iframe

<iframe width='350' height='300' frameborder='0'
src='http://spreadsheets.google.com/pub?
key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc
&single=true
&gid=0
&range=A1%3AB17
&output=html'></iframe>

Plage à afficher

Cellules A1 à B17 : range=A1%3AB17

Le Résultat

Nous avons une feuille Excel sans la barre Google Web Elements. De plus, une modification de la feuille dans Google Docs sera de suite reportée sur le Blog !

Insérer une feuille Excel sur son Blog

Plus d'informations

Le Blog de Google Docs

Google Drive et Blogger - Améliorer son Blog

Les Google Web Elements

Google Viewer

Google Livres - Insérer un aperçu sur son Blog

Fichiers joints et Podcasting avec Blogger

Les derniers messages d'un Blog sous forme de Diaporama

2011-02-22T20:54:00.014+01:00

Le Diaporama standard de Blogger peut être utilisé pour afficher les derniers messages d'un Blog à l'aide d'un Gadget Blogger. Le Gadget affiche la première image contenue dans le message, ainsi que le début du texte. Les 10 derniers messages peuvent être affichés. C'est une utilisation particulière du Flux Atom du Blog.

Les deux variantes du Gadget

Affichage de l'image à gauche du texte

last-post-slideshow-b.xml

Version verticale, image centrée en haut du gadget

last-post-slideshow-v-b.xml

Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Image à gauche

http://prac-gadget.googlecode.com/files/last-post-slideshow-b.xml

Version verticale, image centrée en haut du gadget

http://prac-gadget.googlecode.com/files/last-post-slideshow-v-b.xml

Les paramètres des Gadgets

Image à gauche

NAME : le nom du Blog. Par exemple viti-vino.blogspot.com.

Le Flux du Blog doit être défini sur complet.

NBP : le nombre de messages (post) à afficher.

PDEF : l'image à afficher lorsqu'il n'existe aucune image dans un message. Saisir l'URL de l'image, par exemple http://www.liens-du-vin.ch/ascreen.jpg.

LEN : la longueur du texte à afficher. De 1 à 512 caractères. Par défaut 128.

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage du message dans une fenêtre indépendante. Yes ou No, par défaut No (non).
BLK : ouverture des liens dans une nouvelle fenêtre. Yes ou No, par défaut Yes (oui).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

FSIZE : La taille de la police. Par défaut 0.80em.

TCOL : #rrggbb. La couleur du texte. Par défaut la couleur définie dans le modèle du Blog.
LCOL : #rrggbb. La couleur du lien (lire la suite). Par défaut la couleur définie dans le modèle du Blog.
SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.
BCOL : #rrggbb. La couleur de la bordure du diaporama.
CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.

Version verticale, image centrée en haut du gadget

NAME : le nom du Blog. Par exemple viti-vino.blogspot.com.

Le Flux du Blog doit être défini sur complet.

NBP : le nombre de messages (post) à afficher.

PDEF : l'image à afficher lorsqu'il n'existe aucune image dans un message. Saisir l'URL de l'image, par exemple http://www.liens-du-vin.ch/ascreen.jpg.

LEN : la longueur du texte à afficher. De 1 à 512 caractères. Par défaut 128.

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage du message d'origine dans une fenêtre indépendante. Yes ou No, par défaut No (non).
BLK : ouverture des liens dans une nouvelle fenêtre. Yes ou No, par défaut Yes (oui).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

FSIZE : La taille de la police. Par défaut 0.80em.

TCOL : #rrggbb. La couleur du texte. Par défaut la couleur définie dans le modèle du Blog.
LCOL : #rrggbb. La couleur du lien (lire la suite). Par défaut la couleur définie dans le modèle du Blog.
SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.
BCOL : #rrggbb. La couleur de la bordure du diaporama.
CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.

Les caractéristiques des gadgets

Images originales, telles qu'elles figurent dans le message du Blog
Affiche les images en format *.jpg, *.gif et *.png
Fond transparent ou couleurs à choix
Temps d'affichage modifiable
Ordre aléatoire des images en option
Suppression possible de la barre de navigation

Des exemples

J'ai utilisé, non pas un Gadget Blogger pour ces exemples, mais la version Gadget Google afin d'afficher le Diaporama dans le html de ce message.

Les derniers messages du Blog d'Aide pour Blogger. Vignettes de 160 x 120. Pas de barre de navigation, ordre aléatoire. Version verticale.

Gadget Google - Slideshow last post of blogger - http://www.liens-du-vin.ch/last-post-slideshow.htm

Les derniers messages de ce Blog. Vignettes de 120 x 90. Pas de barre de navigation, ordre aléatoire. Version horizontale, avec images à gauche.

Gadget Google - Diaporama des derniers messages d'un Blog - http://www.liens-du-vin.ch/last-post-slideshow.htm

Gadget Google ou Gadget Blogger

Un Gadget Google peut être placé dans un message du Blog. Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).

Plus d'informations

Afficher les derniers messages d'un Blog avec un Gadget Google

Gadget Blogger - Les derniers messages d'un Blog, avec vignettes

Diaporama Pinterest avec un Gadget Blogger

Diaporama Picasa avec un Gadget Blogger

Diaporama Photobucket avec un Gadget Blogger

Diaporama Flickr avec un Gadget Blogger

Créer un Diaporama à partir d'un Flux Média RSS

Afficher des Diaporamas sur Google Sites

Des Gadgets pour son Blog

Viti-Vino. Le Blog de Prac - Les Outils Google

5 secondes pour ajouter un diaporama de Flickr sur son Blog

5 secondes pour ajouter un diaporama Flickr à son Blog

Des Gadgets Blogger pour vos photos de Google+

Des Gadgets Blogger pour afficher les photos de vos Albums Google+

Les derniers Pins d'un compte Pinterest avec vignette

Un Gadget Blogger pour afficher les derniers Pins d'un compte Pinterest, avec vignette

Les derniers Pins de Pinterest sur son Blog

Un Gadget Blogger pour afficher les derniers Pins d'un compte ou d'un tableau de Pinterest

Timeline de Twitter

Afficher une Timeline de Twitter sur son Blog

Les vignettes d'un compte ou d'un tableau Pinterest

Un Gadget Blogger pour afficher les vignettes d'un compte ou d'un tableau Pinterest

Les derniers messages d'un Blog, avec vignettes

Un Gadget Blogger pour afficher les derniers messages d'un Blog

Recadrer automatiquement les images du Blog

Recadrer automatiquement les images du Blog (crop)

Un badge Google+ sur son Blog

Un badge Google+ sur son Blog

Les vignettes d'un album d'une Page Facebook

Un Gadget Blogger pour afficher les vignettes d'un album d'une page de Facebook

L'aperçu d'un livre de Google Livres sur son Blog

Google Livres - Aperçu - Un Gadget Google

Le Gadget Recent Comments (commentaires récents)

La version anglaise du Gadget Commentaires récents (Recent Comments)

Google Drive et Blogger - Améliorer son Blog

Google Drive et Blogger - Améliorer son Blog

Suivre les Pins de son site sur Pinterest

Un Diaporama avec les derniers posts de Pinterest

Gadget Blogger pour afficher un Diaporama avec les derniers posts de Pinterest

Webdoc - Partagez vos passions autrement

Gadget Blogger pour insérer une image sonore

Gadget Blogger pour insérer une image sonore

Des Gadgets Blogger pour Google+

Des Gadgets Blogger pour Google+

Gadget Blogger pour insérer une video *.flv avec Dewtube

Gadget Blogger pour insérer une video *.flv avec Dewtube

Lecteur intégrable pour afficher une video Facebook

Lecteur intégrable pour afficher une video Facebook

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

Afficher son blog avec les vues dynamiques

Afficher son blog avec les vues dynamiques

Configurer le Gadget Suivre par Mail

Configurer le Gadget Suivre par Mail

Afficher une feuille Excel sur son Blog - Google Viewer

Afficher une feuille Excel sur son Blog - Google Viewer

Les derniers messages d'un Blog sous forme de Diaporama

Les derniers messages d'un Blog sous forme de Diaporama