5 secondes pour ajouter un diaporama de Flickr sur son Blog 25 Sep 2014 6:33 PM (10 years ago)
5 secondes pour ajouter un diaporama Flickr à son Blog
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
<iframe style="width: 400px; height: 400px;" scrolling="no" align="middle" frameborder="0" src="https://www.flickr.com/photos/prac53/sets/72157609076361497/player"></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+ 2 Apr 2013 7:26 PM (12 years ago)
Des Gadgets Blogger pour afficher les photos de vos Albums Google+
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.
<iframe width="492" height="342" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus.xml
&up_AID=https://plus.google.com/photos/115854656993758258488/albums/5804812316416858033
&up_NBC=12
&up_SIZE=120
&up_HSIZE=
&up_CROP=
&up_CLP=
&up_SHA=Y
&up_URL=http://www.liens-du-vin.ch/vienne-octobre-2012.htm
&up_TITLE=Souvenirs de Vienne
&up_LCOL=%23cc0000
&up_BCOL=%23de7008
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6">
Gadget Google - Vignettes de Google+ - http://www.liens-du-vin.ch/thumbnails-google-plus.htm</iframe>
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
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 - 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 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.
<iframe width="500" height="440" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow.xml
&up_AID=https://plus.google.com/photos/115854656993758258488/albums/5297196325809923457
&up_PWH=480
&up_PHT=360
&up_DTime=1500
&up_TTime=800
&up_RND=Yes
&up_CLP=No
&up_NAB=Yes
&up_SCOL=%23f2e9ca
&up_BCOL=%23de7008
&up_CCOL=%23f6f6f6">
Gadget Google - Diaporama de Google+ - http://www.liens-du-vin.ch/google-plus-slideshow.htm</iframe>
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 11 Feb 2013 9:48 PM (12 years ago)
Un Gadget Blogger pour afficher les derniers Pins d'un compte Pinterest, avec vignette
En utilisant un Flux RSS de Pinterest créé par Yahoo Pipes, le Gadget Blogger affiche une vignette, le titre et la description d'un Pins d'un compte Pinterest. Affiche jusqu'à 25 Pins.
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
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, 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 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.
<iframe style="width: 400px; height: 680px;" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last_pins.xml
&up_NAME=prac53
&up_NBP=5
&up_LEN=220
&up_LCOL=%23cc0000
&up_BTCOL=%23de7008
&up_BCOL=%23de7008
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6"></iframe>
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 16 Nov 2012 4:12 PM (12 years ago)
Un Gadget Blogger pour afficher les derniers Pins d'un compte ou d'un tableau de Pinterest
Les deux widgets de Pinterest (Profile Widget et Board Widget) réunis dans un seul Gadget Blogger. Affiche les derniers Pins sur son Blog
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
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, 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 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.
<iframe width="560" height="680" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-widget.xml
&up_USER=prac53
&up_BOARD=geek
&up_TWI=120
&up_THE=480
&up_NBC=1
&up_CCOL=%23f6f6f6"></iframe>
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 6 Nov 2012 3:01 PM (12 years ago)
Afficher une Timeline de Twitter sur son Blog
Twitter demande de 1 à 5 Domaines Internet qui peuvent afficher la Timeline. Pour blogspot.com il vaut mieux utiliser un tag iframe pour insérer une page html hébergée sur un Domaine privé
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 11 Oct 2012 8:16 PM (12 years ago)
Un Gadget Blogger pour afficher les vignettes d'un compte ou d'un tableau Pinterest
Les vignettes (hauteur 90 pixels) d'un compte ou d'un tableau de Pinterest. Le Gadget Blogger pour ajouter les Pins de Pinterest sur son Blog
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
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, 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 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.
<iframe width="500" height="880" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-thumbnails.xml
&up_USER=prac53
&up_BOARD=geek
&up_NBC=12
&up_SHA=Yes
&up_CLP=Yes
&up_URL=http://pinterest.com/prac53/geek/
&up_TIT=Pinterest - Geek
&up_LCOL=%23cc0000
&up_BCOL=%23de7109
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6"></iframe>
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 30 Sep 2012 6:53 PM (12 years ago)
Un Gadget Blogger pour afficher les derniers messages d'un Blog
Un Gadget pour afficher les derniers messages d'un Blog de Blogger. Affiche un titre, un sommaire et une vignette pour chaque message.
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
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 - 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
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.
<iframe width="580" height="800" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-posts.xml
&up_BID=30801821
&up_NBP=7
&up_LEN=210
&up_LCOL=%23cc0000
&up_BTCOL=%2322427c
&up_BCOL=%23cc0000
&up_BKCOL=%23c3d9ff
&up_CCOL=%23d1dae3"></iframe>
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 28 Sep 2012 7:21 PM (12 years ago)
Recadrer automatiquement les images du Blog (crop)
Utiliser l'URL d'une image de Picasa Albums Web pour recadrer automatiquement une image
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
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
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 25 Sep 2012 6:44 PM (12 years ago)
Un badge Google+ sur son Blog
Afficher le badge Google+ de son profil sur son blog
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)
<div style="width: 325px; margin: auto;"><iframe style="width: 325px; height: 124px;" src="https://sites.google.com/c/widgets/ProfileCard?uid=115854656993758258488" allowTransparency="true" frameborder="0" scrolling="no"></iframe></div>
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
%3C/strong%3E%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3Cbr%20/%3E%26lt;div%20style%3D%22width:%20325px;%20margin:%20auto;%22%26gt;%26lt;iframe%20style%3D%22width:%20325px;%20height:%20124px;%22%20src%3D%22https://sites.google.com/c/widgets/ProfileCard?uid%3D%3Cspan%3E115854656993758258488%3C/span%3E%22%20allowTransparency%3D%22true%22%20frameborder%3D%220%22%20scrolling%3D%22no%22%26gt;%26lt;/iframe%26gt;%26lt;/div%26gt;%20%20%3Cbr%20/%3E%3Cbr%20/%3E%3C/div%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cstrong%3EDes%20exemples%3C/strong%3E%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cul%3E%3Cli%3EMon%20profil%20sur%20Google+,%20%3Ca%20href%3D%22http://plus.google.com/115854656993758258488%22%20target%3D%22_blank%22%3E+Philippe%20Chappuis%3C/a%3E%26nbsp;:%26nbsp;%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3C/div%3E%3Cbr%20/%3E%3C/li%3E%3Cli%3ELe%20badge%20Google+%20de%20%3Ca%20href%3D%22http://plus.google.com/106189723444098348646%22%20target%3D%22_blank%22%3E+Larry%20Page%3C/a%3E%26nbsp;:%26nbsp;%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3C/div%3E%3Cbr%20/%3E%3C/li%3E%3Cli%3ELe%20badge%20Google+%20de%20%3Ca%20href%3D%22http://plus.google.com/114671227071069817799%22%20target%3D%22_blank%22%3E+Soraya%20Lambrechts%3C/a%3E,%20l'auteur%20de%20%3Ca%20href%3D%22http://blogconnexion.blogspot.com/%22%20target%3D%22_blank%22%20title%3D%22Soraya%20-%20Blog%20Connexion%22%3EBlog%20Connexion%3C/a%3E%26nbsp;:%26nbsp;%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3C/div%3E%3Cbr%20/%3E%3C/li%3E%3C/ul%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cstrong%3EPlus%20d'informations%3C/strong%3E%20%3Cbr%20/%3E%3Cbr%20/%3E%3Ca%20href%3D%22http://bloggercode-blogconnexion.blogspot.ch/2012/12/vignette-profils-pages-google-plus.html%22%20target%3D%22_blank%22%20title%3D%22Vignettes%20GooglePlus%20-%20Blogger%22%3ELes%20vignettes%20des%20profils%20et%20pages%20Google+%20(GooglePlus)%20sur%20Blogger%3C/a%3E.%20Les%20explications%20de%20%3Ca%20href%3D%22http://plus.google.com/114671227071069817799%22%20target%3D%22_blank%22%3E+Soraya%20Lambrechts%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Ca%20href%3D%22http://viti-vino.blogspot.ch/2011/07/gadgets-blogger-google-plus.html%22%20target%3D%22_blank%22%20title%3D%22Des%20Gadgets%20Blogger%20pour%20Google+%22%3EDes%20Gadgets%20Blogger%20pour%20Google+%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Ca%20href%3D%22http://www.liens-du-vin.ch/gadgets-google-plus.htm%22%20target%3D%22_blank%22%20title%3D%22Des%20Gadgets%20Google%20pour%20Google+%22%3EDes%20Gadgets%20Google%20pour%20Google+%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Ca%20href%3D%22http://viti-vino.blogspot.com/p/gadgets.html%22%20target%3D%22_blank%22%20title%3D%22Des%20Gadgets%20pour%20son%20Site%20ou%20son%20Blog%22%3EDes%20Gadgets%20pour%20son%20Site%20ou%20son%20Blog%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3Cp%3E%3Cbr%20/%3E%0A%26nbsp;%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Ca%20href%3D%22http://www.liens-du-vin.ch%22%20title%3D%22Liens%20du%20Vin%22%20target%3D%22_blank%22%3E%26nbsp;Les%20Liens%20du%20Vin%26nbsp;%3C/a%3E%0A%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Cbr%20/%3E%3C/p%3E%3C/div%3E){kind=icon}
Les vignettes d'un album d'une Page Facebook 9 Sep 2012 7:52 PM (12 years ago)
Un Gadget Blogger pour afficher les vignettes d'un album d'une page de Facebook
Les vignettes (130 x 86) d'un album public d'une Page de Facebook peuvent être ajoutée sur son Blog avec un Gadget Blogger
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
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, 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 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.
<iframe width="500" height="880" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/facebook-thumbnails.xml
&up_ID=229240080442617
&up_NBC=29
&up_SHA=Yes
&up_CLP=Yes
&up_URL=http://www.montdor.ch
&up_TIT=Domaine du Mont d'Or
&up_LCOL=%23cc0000
&up_BCOL=%23cc0000
&up_BKCOL=%23c3d9ff
&up_CCOL=%23d1dae3"></iframe>
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 26 Aug 2012 3:54 PM (12 years ago)
Google Livres - Aperçu - Un Gadget Google
Un Gadget Google pour afficher l'aperçu d'un livre de Google Livres sur son Blog.
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.
<iframe style="width: 600px; height: 490px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/preview-books.xml
&up_ID=z2kVAAAAYAAJ
&up_LAN=French - fr
&up_PWH=580
&up_PHT=460
&up_CCOL=%23f6f6f6"
allowTransparency="true" frameborder="0" scrolling="no">
Gadget Google - Aperçu Google Livres - http://www.liens-du-vin.ch/google-livre-apercu.htm</iframe>
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.
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) 27 May 2012 9:31 PM (12 years ago)
La version anglaise du Gadget Commentaires récents (Recent Comments)
La version anglaise du Gadget Commentaires récents (Recent Comments). Une nouvelle version du Gadget de bloggerbuster (Amanda), sans le problème des caractères spéciaux
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
%26bodytext%3D%3Ch1%20itemprop%3D%22name%22%3ELa%20version%20anglaise%20du%20Gadget%20Commentaires%20r%C3%A9cents%20(Recent%20Comments)%20%3C/h1%3E%3Cimg%20itemprop%3D%22image%22%20src%3D%22http://2.bp.blogspot.com/-dvtiAEUuH38/T8KdobaonvI/AAAAAAAAF90/7mCPGIskyOQ/s1600/blogger-comments-screen.png%22%20style%3D%22display:%20none;%22%20/%3E%3Cp%20itemprop%3D%22description%22%3ELa%20version%20anglaise%20du%20Gadget%20Commentaires%20r%C3%A9cents%20(Recent%20Comments).%20Une%20nouvelle%20version%20du%20Gadget%20de%20bloggerbuster%20(Amanda),%20sans%20le%20probl%C3%A8me%20des%20caract%C3%A8res%20sp%C3%A9ciaux%3C/p%3E%3Cbr%20/%3E%20%3Cbr%20/%3ELa%20version%20la%20plus%20connue%20de%20ce%20%3Cstrong%3EGadget%20Blogger%3C/strong%3E%20est%20le%20Gadget%20de%20%3Ca%20href%3D%22http://www.bloggerbuster.com/2009/07/recent-comments-and-recent-posts.html%22%20target%3D%22_blank%22%20title%3D%22Recent%20Comments%20-%20Bloggerbuster%22%3Ebloggerbuster%20(Amanda)%3C/a%3E.%20Malheureusement%20ce%20gadget%20ne%20traduit%20pas%20les%20entit%C3%A9s%20html%20(%26amp;%2339;%20ou%20%26amp;nbsp;).%20%20%20%20%3Cbr%20/%3E%3Cbr%20/%3E%20Pour%20corriger%20ce%20probl%C3%A8me,%20la%20m%C3%A9thode%20classique%20consiste%20%C3%A0%20cr%C3%A9er%20un%20script%20%3Ca%20href%3D%22http://www.w3schools.com/jsref/jsref_prototype_math.asp%22%20target%3D%22_blank%22%20title%3D%22prototype%22%3Eprototype%3C/a%3E%20dans%20le%20javascript%20du%20gadget%26nbsp;:%26nbsp;%20%20%3Cbr%20/%3E%3Cbr%20/%3E%20%3Cdiv%3E%3Cbr%20/%3E%20String.prototype.unescapeHtml%20%3D%20function%20()%3Cbr%20/%3E%7B%3Cbr%20/%3Evar%20temp%20%3D%20document.createElement(%22div%22);%3Cbr%20/%3Etemp.innerHTML%20%3D%20this;%3Cbr%20/%3Evar%20resu%20%3D%20temp.childNodes%5B0%5D.nodeValue;%3Cbr%20/%3Etemp.removeChild(temp.firstChild);%3Cbr%20/%3Ereturn%20resu;%3Cbr%20/%3E%7D%3Cbr%20/%3E%20%3Cbr%20/%3E%3C/div%3E%20%3Cbr%20/%3E%3Cbr%20/%3E%20L'appel%20%C3%A0%20cette%20fonction%20permet%20d'%C3%A9liminer%20les%20caract%C3%A8res%20saisis%20comme%20entit%C3%A9%20html%26nbsp;:%26nbsp;%20%20%3Cbr%20/%3E%3Cbr%20/%3E%20%3Cdiv%3E%3Cbr%20/%3E%20postcontent%3Dpostcontent.unescapeHtml()%3Cbr%20/%3E%20%3Cbr%20/%3E%3C/div%3E%20%3Cbr%20/%3E%3Cbr%20/%3E%20J'ai%20r%C3%A9alis%C3%A9%20une%20nouvelle%20version%20de%20ce%20gadget,%20qui%20reprend%20les%20fonctionnalit%C3%A9s%20et%20les%20param%C3%A8tres%20de%20la%20%3Ca%20href%3D%22http://viti-vino.blogspot.com/2011/01/gadget-blogger-commentaires-recents.html%22%20target%3D%22_blank%22%20title%3D%22Commentaires%20r%C3%A9cents%20-%20version%20fran%C3%A7aise%22%3Eversion%20fran%C3%A7aise%3C/a%3E.%3Cbr%20/%3E%3Cbr%20/%3E%20%3Cstrong%3EAjouter%20ce%20Gadget%20%C3%A0%20Blogger%3C/strong%3E%3Cbr%20/%3E%3Cbr%20/%3E%20%3Cimg%20style%3D%22display:%20block;%20margin:%200px%20auto%2010px;%20text-align:%20center;%20width:%20240px;%20height:%20120px;%20border:%201px%20solid%20rgb(222,%20112,%208);%22%20src%3D%22http://2.bp.blogspot.com/-dvtiAEUuH38/T8KdobaonvI/AAAAAAAAF90/7mCPGIskyOQ/s1600/blogger-comments-screen.png%22%20alt%3D%22Gagdet%20Blogger%20-%20Recent%20Comments%22%20title%3D%22Gagdet%20Blogger%20-%20Recent%20Comments%22%20/%3E%3Cbr%20/%3E%20%3Cbr%20/%3E%20Ajouter%20ce%20Gadget%20avec%20le%20bouton%20%3Cstrong%3E%3Cem%3EAdd%20to%20Blogger%3C/em%3E%3C/strong%3E%26nbsp;:%26nbsp;%20%20%3Cbr%20/%3E%3Cbr%20/%3E%3Ccenter%3E%3Ca%20href%3D%22http://www.blogger.com/add-gadget?url%253Dhttp://prac-gadget.googlecode.com/files/recent-comments.xml%22%20target%3D%22_blank%22%20title%3D%22Add%20this%20Gadget%20to%20Blogger%20-%20Recent%20Comments%22%3E%3Cimg%20alt%3D%22Add%20this%20Gadget%20to%20Blogger%22%20title%3D%22Add%20this%20Gadget%20to%20Blogger%22%20src%3D%22http://www.blogger.com/img/add/add2blogger_lg.gif%22%20/%3E%3C/a%3E%3C/center%3E%20%3Cbr%20/%3E%3Cbr%20/%3EAjouter%20ce%20Gadget%20avec%20le%20%3Cstrong%3Eformulaire%20personnalis%C3%A9%3C/strong%3E%20de%20Blogger%26nbsp;:%26nbsp;%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3Cbr%20/%3EMise%20en%20page%20/%20Ajouter%20un%20gadget...%3Cbr/%3EPersonnalis%C3%A9s%20/%20Saisissez%20l'URL%20du%20gadget%26nbsp;:%26nbsp;%3Cbr%20/%3E%3Cbr%20/%3E%20%3Cstrong%3Ehttp://prac-gadget.googlecode.com/files/recent-comments.xml%3C/strong%3E%20%3Cbr/%3E%3Cbr%20/%3E%3C/div%3E%20%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cstrong%3EParam%C3%A8tres%20du%20Gadget%3C/strong%3E%3Cbr%20/%3E%3Cbr%20/%3E%20%20%3Cdiv%3E%3Cbr%20/%3E%20%3Cstrong%3E%3Cem%3EGadget%20Blogger,%20Recent%20Comments%3C/em%3E%3C/strong%3E%20%3Ca%20href%3D%22http://prac-gadget.googlecode.com/files/recent-comments.xml%22%20target%3D%22_blank%22%20title%3D%22Recent%20Comments%22%3E%3Cbr%20/%3E%3Cbr%20/%3Ehttp://prac-gadget.googlecode.com/files/recent-comments.xml%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EBLOG%3C/span%3E%20:%20Name%20of%20Blog,%20for%20example%20viti-vino.blogspot.com.%3Cbr%20/%3E%20%3Cbr%20/%3E%3Cspan%3ENBC%3C/span%3E%20:%20Number%20of%20comments%20to%20display%20(1%20-%2020)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EMAX%20%3C/span%3E:%20Length%20of%20text%20to%20display%20(50%20-%20500)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EDATE%3C/span%3E%20:%20Display%20date%20(Yes%20-%20No)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ETBLOG%3C/span%3E%20:%20Display%20title%20of%20Blog%20(Yes%20or%20No)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ETITLE%3C/span%3E%20:%20Display%20title%20of%20Posts%20(Yes%20or%20No)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EAUTHOR%3C/span%3E%20:%20Display%20Author%20(Yes%20or%20No)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ETOP%3C/span%3E%20:%20Open%20links%20within%20the%20same%20window%20(Yes%20-%20No)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EALG%3C/span%3E%20:%20Text-align%20(left%20or%20justify)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ESIZE%3C/span%3E%20:%20Size%20of%20font%20(85%20%25)%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ELCOL%3C/span%3E%20:%20%23rrggbb,%20color%20of%20links%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3ETCOL%3C/span%3E%20:%20%23rrggbb,%20color%20of%20text%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EBCOL%3C/span%3E%20:%20%23rrggbb,%20color%20of%20background%3Cbr%20/%3E%3Cbr%20/%3E%3C/div%3E%3Cbr%20/%3E%20%20%3Cbr%20/%3E%3Cbr%20/%3E%20%20%3Cstrong%3EVersions%20et%20mentions%20l%C3%A9gales%3C/strong%3E%3Cbr%20/%3E%3Cbr%20/%3E%20%3Ca%20href%3D%22https://developers.google.com/gadgets/%22%20target%3D%22_blank%22%20title%3D%22Gadgets%20fournis%20par%20Google%22%3EGadgets%3C/a%3E%20fournis%20par%20Google.%3Cbr/%3E%20%20%3Cbr%20/%3E%3Cbr%20/%3E%3Cstrong%3EPlus%20d'informations%3C/strong%3E%3Cbr%20/%3E%3Cbr%20/%3E%20%20%3Ca%20href%3D%22http://viti-vino.blogspot.com/2011/01/gadget-blogger-commentaires-recents.html%22%20target%3D%22_blank%22%20title%3D%22Commentaires%20r%C3%A9cents%20-%20version%20fran%C3%A7aise%22%3ECommentaires%20r%C3%A9cents%20-%20version%20fran%C3%A7aise%3C/a%3E%3Cbr%20/%3E%20%3Cbr%20/%3E%3Ca%20href%3D%22http://www.liens-du-vin.ch/gadget-blogroll-google-reader.htm%22%20target%3D%22_blank%22%20title%3D%22Un%20Gadget%20Google%20pour%20partager%20ses%20abonnements%20de%20Google%20Reader%22%3EUn%20Gadget%20Google%20pour%20partager%20ses%20abonnements%20de%20Google%20Reader%3C/a%3E%3Cbr%20/%3E%20%3Cbr%20/%3E%3Ca%20href%3D%22http://viti-vino.blogspot.com/p/gadgets.html%22%20target%3D%22_blank%22%20title%3D%22Des%20Gadgets%20pour%20son%20Blog%22%3EDes%20Gadgets%20pour%20son%20Blog%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Ca%20href%3D%22http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html%22%20target%3D%22_blank%22%20title%3D%22Un%20Gadget%20Blogger%20-%20Derniers%20messages%20d'un%20Blog%22%3EAfficher%20un%20diaporama%20avec%20les%20derniers%20messages%20d'un%20Blog%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3Cp%3E%3Cbr%20/%3E%0A%26nbsp;%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Ca%20href%3D%22http://www.liens-du-vin.ch%22%20title%3D%22Liens%20du%20Vin%22%20target%3D%22_blank%22%3E%26nbsp;Les%20Liens%20du%20Vin%26nbsp;%3C/a%3E%0A%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Cbr%20/%3E%3C/p%3E%3C/div%3E)
Google Drive et Blogger - Améliorer son Blog 26 Apr 2012 8:31 PM (12 years ago)
Google Drive et Blogger - Améliorer son Blog
Google Drive peut être utilisé comme un véritable hébergeur Internet. L 'espace de stockage gratuit de 5 Giga autorise l'hébergement de pages html, de feuilles de style, de fichiers son ou d'animations Flash.
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 :
<iframe src="https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></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> :
<link rel="stylesheet" type="text/css" href="URL feuille de style" />
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 :
<script> var cssNode = document.createElement('link');
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "URL feuille de style";
cssNode.media = "screen";
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>
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 :
<iframe style="width: 240px; height: 27px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml
&up_MP3=https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0
&up_START=No
&up_CCOL=%23f6f6f6"
allowTransparency="true"
frameborder="0"
scrolling="no">
</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
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 :
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { wmode: "transparent" };
var attributes = { id: "player_swf" };
swfobject.embedSWF("https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf",
"player_content", "200", "200", "9.0.0", false, flashvars, params, attributes);
</script>
Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message :
<div id="player_content"></div>
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 :
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 9 Apr 2012 3:54 PM (13 years ago)
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 :
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 26 Feb 2012 8:23 PM (13 years ago)
Gadget Blogger pour afficher un Diaporama avec les derniers posts de Pinterest
Deux Gadgets Blogger pour afficher un Diaporama de Pinterest (derniers posts) sur son Blog. Possibilité de n'afficher que les images d'un tableau (Board).
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.xmlAjouter 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
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
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.
Les paramètres des Gadgets
- 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.
- Les images du tableau Geek de mon compte Pinterest. Diaporama sans titre et barre de navigation supprimée.
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 12 Dec 2011 9:01 PM (13 years ago)
Webdoc, une autre façon de publier et partager du contenu sur le Web
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.
<iframe title="webdoc" width="500" height="840"
src="http://www.webdoc.com/embed/C4FD782C-46A0-0001-CD85-1180CEF01631" frameborder="0" scrolling="no"></iframe>
src="http://www.webdoc.com/embed/C4FD782C-46A0-0001-CD85-1180CEF01631" frameborder="0" scrolling="no"></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
.%20%20%3Cbr/%3E%3Cbr/%3E%20Disposant%20d'un%20outil%20d'%C3%A9dition%20simple%20d'emploi,%20les%20vid%C3%A9os,%20les%20sons%20et%20les%20diaporamas%20sont%20cr%C3%A9%C3%A9s%20par%20un%20glisser-d%C3%A9placer.%20Des%20%3Ci%3E%3Cstrong%3EApps%3C/strong%3E%3C/i%3E%20permettent%20d'ajouter%20un%20diaporama%20de%20%3Cstrong%3EFlickr%3C/strong%3E%20ou%20de%20%3Cstrong%3EPicasa%20Albums%20Web%3C/strong%3E.%20Des%20%3Ci%3Egoodies%3C/i%3E%20facilitent%20la%20mise%20en%20forme%20d'une%20pr%C3%A9sentation%20de%20Slideshare%20ou%20d'une%20vid%C3%A9o%20de%20YouTube.%20Les%20photos%20peuvent%20%C3%AAtre%20pr%C3%A9sent%C3%A9es%20dans%20un%20%20album%20ou%20dans%20un%20diaporama.%20%20%3Cbr/%3E%3Cbr/%3E%20Un%20%3Ca%20href%3D%22http://www.webdoc.com/documents/C4FD782C-46A0-0001-CD85-1180CEF01631%22%20target%3D%22_blank%22%20title%3D%22Webdoc%20-%20prac53%22%3EWebdoc%3C/a%3E%20avec%20un%20diaporama%20et%20une%20vid%C3%A9o%26nbsp;:%26nbsp;%20%20%3Cbr/%3E%3Cbr/%3E%20%3Ccenter%3E%3Cdiv%3EWebdoc%20-%20prac53%20-%20A%20la%20d%C3%A9couverte%20des%20plus%20beaux%20Clos%20Domaines%20et%20Ch%C3%A2teaux%20viticoles%20de%20Suisse%3C/div%3E%3C/center%3E%20%3Cbr/%3E%3Cbr/%3E%20L'insertion%20d'un%20Webdoc%20sur%20un%20Site%20ou%20un%20Blog%20se%20fait%20avec%20le%20%3Ci%3E%3Cb%3Ecode%20embarqu%C3%A9%3C/b%3E%3C/i%3E,%20soit%20un%20tag%20%3Ci%3Eiframe%3C/i%3E.%20%20%3Cdiv%3E%3Cbr/%3E%3Cimg%20border%3D%220%22%20height%3D%22194%22%20width%3D%22400%22%20src%3D%22http://3.bp.blogspot.com/-NX6lPrYpEk0/TvDsvEAko_I/AAAAAAAAFlM/H5nb-xirn60/s400/webdoc-code-embarque.jpg%22%20title%3D%22Webdoc%20-%20code%20embarqu%C3%A9%22%20alt%3D%22Webdoc%20-%20code%20embarqu%C3%A9%22%20/%3E%3Cbr/%3E%3Cbr/%3E%3C/div%3E%20%3Cdiv%3E%26lt;iframe%20title%3D%22webdoc%22%20width%3D%22500%22%20height%3D%22840%22%3Cbr/%3E%20src%3D%22http://www.webdoc.com/embed/%3Cspan%3EC4FD782C-46A0-0001-CD85-1180CEF01631%3C/span%3E%22%20frameborder%3D%220%22%20scrolling%3D%22no%22%26gt;%26lt;/iframe%26gt;%20%3Cbr/%3E%3C/div%3E%20%20%3Cbr/%3E%3Cbr/%3E%3Cb%3EWebdoc%20devient%20urturn%3C/b%3E%3Cbr/%3E%3Cbr%20/%3E%20Depuis%20janvier%202013,%20Webdoc%20change%20de%20nom%20et%20devient%20%3Ca%20href%3D%22http://www.urturn.com/%22%20target%3D%22_blank%22%20title%3D%22urturn%20-%20Choisis%20ton%20Expression%20et%20partage%20tes%20%C3%A9motions%22%3Eurturn%20:%20Choisis%20ton%20Expression%20et%20partage%20tes%20%C3%A9motions%3C/a%3E.%20%20%20%3Cbr/%3E%3Cbr/%3E%3Cb%3EEn%20savoir%20plus%3C/b%3E%3Cbr/%3E%3Cbr%20/%3E%20%3Ca%20href%3D%22http://www.webdoc.com/resources%22%20target%3D%22_blank%22%20title%3D%22Webdoc%20-%20presse%22%3ELe%20site%20de%20Webdoc%3C/a%3E%3Cbr/%3E%20%3Ca%20href%3D%22http://sites.google.com/site/annuairevin/webdoc-to-share-content%22%20target%3D%22_blank%22%20title%3D%22Ins%C3%A9rer%20un%20Webdoc%20sur%20Google%20Sites%22%3EIns%C3%A9rer%20un%20Webdoc%20sur%20Google%20Sites%3C/a%3E%3Cbr/%3E%20%3Ca%20href%3D%22http://viti-vino.blogspot.ch/2012/08/google-livres-apercu.html%22%20target%3D%22_blank%22%20title%3D%22Ins%C3%A9rer%20un%20aper%C3%A7u%20de%20Google%20Livres%20sur%20son%20Blog%22%3EIns%C3%A9rer%20un%20aper%C3%A7u%20de%20Google%20Livres%20sur%20son%20Blog%3C/a%3E%3Cbr/%3E%3Cdiv%3E%3Cp%3E%3Cbr%20/%3E%0A%26nbsp;%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Ca%20href%3D%22http://www.liens-du-vin.ch%22%20title%3D%22Liens%20du%20Vin%22%20target%3D%22_blank%22%3E%26nbsp;Les%20Liens%20du%20Vin%26nbsp;%3C/a%3E%0A%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Cbr%20/%3E%3C/p%3E%3C/div%3E){kind=logo}
Gadget Blogger pour insérer une image sonore 24 Aug 2011 9:48 PM (13 years ago)
Gadget Blogger pour insérer une image sonore
Une utilisation du lecteur Flash Dewplayer pour jouer un son lors du survol d'une image avec la souris
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.xmlAjouter 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
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 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+ 28 Jul 2011 6:03 PM (13 years ago)
Des Gadgets Blogger pour Google+
Des Gadgets Google pour afficher le flux d'un utilisateur de Google+, un moteur de recherche sur Google+ et un Badge avec les statistiques.
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.xmlAjouter 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+
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
CCOL : #rrggbb couleur du conteneur, ou transparent
- 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
Mes Statistiques de Google+
Mon Flux sur Google+
Le Flux de Max Cutts sur Google+
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 9 May 2011 9:36 PM (13 years ago)
Gadget Blogger pour insérer une video *.flv avec Dewtube
Un Gadget Blogger pour insérer le lecteur Dewplayer. Il permet de visionner une vidéo Flash (*.flv)
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.xmlAjouter 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
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 2 May 2011 8:29 PM (13 years ago)
Lecteur intégrable pour afficher une video Facebook
Un Gadget Blogger pour insérer une vidéo de Facebook
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.xmlAjouter 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
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 130iem anniversaire). Insertion avec un Gadget Google.
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 30 Apr 2011 4:30 PM (13 years ago)
Des lecteurs simples pour jouer un fichier mp3 sur son Blog
En utilisant un Gadget Blogger, il devient très simple de jouer un son (*.mp3) sur son Blog.
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.xmlAjouter 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
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
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 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
- Lecteur Dewplayer avec contrôle du volume. Extrait Magnificat BWV 243, Gloria Patri (JS Bach)
- Lecteur Dewplayer avec lecture de plusieurs fichiers. Extraits Requiem Dies Irae (Mozart) et Posthorn, swiss postal sound (Rossini)
- Lecteur Google audio (Gmail). Extrait O Fortuna, Carl Orff, Carmina Burana
- Lecteur Google audio (Google Reader). Extrait Magnificat BWV 243, Gloria Patri (JS Bach)
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 31 Mar 2011 10:08 PM (14 years ago)
Afficher son blog avec les vues dynamiques
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.
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.
Configurer le Gadget Suivre par Mail 20 Mar 2011 5:35 PM (14 years ago)
Configurer le Gadget Suivre par Mail
Blogger propose depuis le 16 mars 2011 un nouveau Gadget, Suivre les mises à jour par e-mail.
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
;%3Cbr%20/%3Ereturn%20true%22'%20method%3D'post'%20target%3D'popupwindow'%26gt;%3Cbr%20/%3E%26lt;span%26gt;%3Cbr%20/%3E%26lt;input%20class%3D'follow-by-email-address'%20name%3D'email'%20placeholder%3D'%3Cspan%3EEmail%20address...%3C/span%3E'%3Cbr%20/%3Etype%3D'text'/%26gt;%3Cbr%20/%3E%26lt;/span%26gt;%3Cbr%20/%3E%26lt;input%20class%3D'follow-by-email-submit'%20type%3D'submit'%20value%3D'%3Cspan%3ESubmit%3C/span%3E'/%26gt;%3Cbr%20/%3E%26lt;input%20expr:value%3D'data:feedPath'%20name%3D'uri'%20type%3D'hidden'/%26gt;%3Cbr%20/%3E%26lt;input%20name%3D'loc'%20type%3D'hidden'%20value%3D'%3Cspan%3Een_US%3C/span%3E'/%26gt;%3Cbr%20/%3E%26lt;/form%26gt;%3Cbr%20/%3E%26lt;/div%26gt;%3Cbr%20/%3E%26lt;/div%26gt;%3Cbr%20/%3E%26lt;span%20class%3D'item-control%20blog-admin'%26gt;%3Cbr%20/%3E%26lt;b:include%20name%3D'quickedit'/%26gt;%3Cbr%20/%3E%26lt;/span%26gt;%3Cbr%20/%3E%26lt;/b:includable%26gt;%3Cbr%20/%3E%26lt;/b:widget%26gt;%3Cbr%20/%3E%3Cbr%20/%3E%3C/div%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cb%3EEmail%20address...%20%3C/b%3E:%20%C3%A0%20remplacer%20par%20%3Cb%3EAdresse%20Mail...%3C/b%3E%3Cbr%20/%3E%3Cb%3ESubmit%20%3C/b%3E:%20%C3%A0%20remplacer%20par%20%3Cb%3ESuivre%3C/b%3E%3Cbr%20/%3E%3Cb%3Een_US%20%3C/b%3E:%20%C3%A0%20remplacer%20par%20%3Cb%3Efr_FR%3C/b%3E%3Cbr%20/%3E%3Cbr%20/%3ELe%20formulaire%20de%20validation%20propos%C3%A9%20par%20Feedburner%20est%20maintenant%20en%20fran%C3%A7ais%26nbsp;:%26nbsp;%3Cbr%20/%3E%3Cbr%20/%3E%3Ccenter%3E%3Cimg%20style%3D%22display:block;%20margin:0px%20auto%2010px;%20text-align:center;%20width:%20320px;%20height:%20288px;%22%20src%3D%22http://2.bp.blogspot.com/-A9VKKY5JLHQ/TYY-84beYnI/AAAAAAAADu0/mGAxBabqkPA/s400/feedburner-formulaire-francais.jpg%22%20border%3D%220%22%20alt%3D%22Formulaire%20de%20confirmation%20Feedburner%22%20title%3D%22Formulaire%20de%20confirmation%20Feedburner%22%20id%3D%22BLOGGER_PHOTO_ID_5586221603460375154%22%20/%3E%3C/center%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cspan%3EPlus%20d'informations%3C/span%3E%3Cbr%20/%3E%3Cbr%20/%3EPour%20configurer%20le%20mail%20envoy%C3%A9%20par%20Feedburner%20(textes%20en%20fran%C3%A7ais,%20options%20d'envois,%20etc...),%20suivre%20les%20indications%20donn%C3%A9es%20par%20%3Ca%20href%3D%22http://mestrucspourblogger.blogspot.com/2010/05/creer-une-newsletter-33.html%22%20target%3D%22_blank%22%20title%3D%22Mes%20Trucs%20pour%20Blogger%22%3EMesTrucsPourBlogger%3C/a%3E%3Cbr%20/%3E%3Cbr%20/%3E%3Cdiv%3E%3Cp%3E%3Cbr%20/%3E%0A%26nbsp;%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Ca%20href%3D%22http://www.liens-du-vin.ch%22%20title%3D%22Liens%20du%20Vin%22%20target%3D%22_blank%22%3E%26nbsp;Les%20Liens%20du%20Vin%26nbsp;%3C/a%3E%0A%3Cimg%20src%3D%22http://www.liens-du-vin.ch/_pic01/vin004.gif%22%20width%3D%2220%22%20height%3D%2256%22%20/%3E%0A%3Cbr%20/%3E%3C/p%3E%3C/div%3E)
Afficher une feuille Excel sur son Blog - Google Viewer 27 Feb 2011 7:40 PM (14 years ago)
Afficher une feuille Excel sur son Blog - Google Viewer
Le lecteur de document de Google, Google Viewer permet de visionner des fichiers *.pdf, *.tif et *.ppt. 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 ainsi que les fichiers Excel, *.xls et *.xlsx.
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.
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 :
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 !
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 22 Feb 2011 7:54 PM (14 years ago)
Les derniers messages d'un Blog sous forme de Diaporama
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.
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.xmlAjouter 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
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.
- 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 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