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

Webdoc - Partagez vos passions autrement

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

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

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

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

Un Webdoc avec un diaporama et une vidéo :

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

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

En savoir plus

Le site de Webdoc
Insérer un Webdoc sur Google Sites

Gadget Blogger pour insérer une image sonore

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

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

Le Gadget

Insérer une image sonore

image-sonore-b.xml

Ajouter le Gadget sur son Blog

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 sonore

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

Les paramètres des Gadgets

Image sonore

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

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

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

Les caractéristiques du gadget

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

Un exemple

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

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

Survolez l'image avec la souris !

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

Gadget Google ou Gadget Blogger

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

Plus d'informations

Insérer une image sonore avec un Gadget Google

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

Le site de Dewplayer

Sonoriser ses images avec Dewplayer

Des Gadgets pour son Blog

Copyright photo

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

Des Gadgets Blogger pour Google+

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

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

Les Gadgets

Moteur de recherche sur Google+

google-plus-search-b.xml

Un Badge avec les Statistiques Google+

google-plus-statistics-b.xml

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

google-plus-feed-b.xml

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

google-plus-feed-thumb-b.xml

Ajouter le Gadget sur son Blog

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

Moteur de recherche sur Google+

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

Un Badge avec les Statistiques Google+

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

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

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

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

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

Les paramètres des Gadgets

Moteur de recherche sur Google+

PUSER : lien sur le texte Google+

Par exemple le profil Google+ d'un utilisateur :

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

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

Un Badge avec les Statistiques Google+

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

GID : l'identifiant Google+ de l'utilisateur

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

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

115854656993758258488 est l'dentifiant de l'utilisateur

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

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

Des exemples

Les Gadgets sur un modèle Picture Window

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

Le Moteur de recherche

Gadget Google - Un Moteur de Recherche pour Google+

Mes Statistiques de Google+

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

Mon Flux sur Google+

Gadget Google - Le Flux d'un utilisateur de Google+ avec vignettes

Le Flux de Max Cutts sur Google+

Gadget Google - Le Flux d'un utilisateur de Google+ avec vignettes

Plus d'informations

Des Gadgets Google pour Google+

Les Flux RSS

Les statistiques Google+

PlusFeed la redirection du Flux d'un utilisateur de Google+

Un Gadget pour insérer un lecteur de Flux

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

Une video : Les Réseaux Sociaux

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

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

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

Le Gadget

Lecteur Dewtube

dewtube-b.xml

Ajouter le Gadget sur son Blog

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

Lecteur Dewtube

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

Les paramètres du Gadget

Lecteur Dewtube

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

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

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

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

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

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

Les caractéristiques du gadget

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

Un exemple

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

Gadget Google ou Gadget Blogger

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

Plus d'informations

Insérer une video FLV avec Dewtube

Le lecteur Dewtube

Intégrer une video de Facebook sur son Blog

Diffuser une video de YouTube avec un lecteur personnalisé

Lecteur intégrable pour afficher une video Facebook

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

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

Le Gadget

Lecteur Flash pour afficher une video de Facebook

facebook-video-player-b.xml

Ajouter le Gadget sur son Blog

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

Lecteur Video

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

Les paramètres du Gadget

Lecteur Video

ID : identifiant de la video

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

http://www.facebook.com/video/video.php?v=189542341058985&comments&set=t.522564519&type=1

189542341058985 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

Un exemple

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

Lecteur Video. Video de Gila Hassid, chanteuse populaire israélienne

Gadget Google - Video Facebook - http://www.liens-du-vin.ch/facebook-video-gadget.htm

Plus d'informations

Le site de Facebook

Un Gadget Google pour afficher une video 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é

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

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

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

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

Les Gadgets

Lecteur Dewplayer simple

dewplayer-b.xml

Lecteur Dewplayer avec contrôle du volume

dewplayer-vol-b.xml

Lecteur Dewplayer avec lecture de plusieurs fichiers son

dewplayer-multi-b.xml

Lecteur Google audio de Gmail

google-audio-b.xml

Lecteur Google audio de Google Reader

google-audio-step-b.xml

Lecteur simple de Deezer

deezer-mini-b.xml

Ajouter le Gadget sur son Blog

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

Lecteur Dewplayer

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

Lecteur Dewplayer avec contrôle du volume

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

Lecteur Dewplayer avec lecture de plusieurs fichiers

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

Lecteur Google audio (Gmail)

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

Lecteur Google audio (Google Reader)

http://prac-gadget.googlecode.com/files/google-audio-step-b.xml

Lecteur Deezer simple

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

Les paramètres des Gadgets

Lecteur Dewplayer

MP3 : url du fichier *.mp3 à jouer

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

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

Lecteur Dewplayer avec contrôle du volume

Lecteur Dewplayer avec lecture de plusieurs fichiers

MP3S : url des fichiers *.mp3 à jouer

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

Exemple : son1.mp3%7Cson2.mp3

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

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

Lecteur Google audio (Gmail)

MP3 : url du fichier *.mp3 à jouer

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

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

Lecteur Google audio (Google Reader)

MP3 : url du fichier *.mp3 à jouer

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

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

Lecteur Deezer simple

ID : ID : identifiant du morceau de musique à jouer

Sur deezer, partager donne l'URL : http://www.deezer.com/listen-1429492

1429492 est l'identifiant du morceau de musique

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

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

Les caractéristiques des gadgets

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

Des exemples

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

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

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

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

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

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

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

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

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

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

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

Lecteur simple Deezer. Extrait Les Choeurs De L'armée Rouge, Hymne à la joie (9^e symphonie Beethoven)

Gadget Google - Deezer - http://www.liens-du-vin.ch/deezer-player-script.htm

Plus d'informations

Le site de Deezer

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 Google pour insérer le lecteur simple de Deezer

Un Gadget Blogger pour insérer une image sonore

Un Gadget Google pour insérer une image sonore

Fichiers joints et Podcasting avec Blogger

Afficher son blog avec les vues dynamiques

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

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

La vue dynamique de son Blog

http://NOMDUBLOG.blogspot.com/view

Activer la vue dynamique

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

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

La vue barre de défilement (sidebar)

La vue planche d'images (flipcard)

La vue mosaïque (mosaic)

La vue instantané (snapshot)

La vue ruban temporel (timeslide)

La vue magazine

La vue classique (classic)

Plus d'informations

Les vues dynamiques pour le lecteur du Blog

Les Vues dynamiques - mise à jour de fin septembre 2011

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

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

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

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

Les Vues Dynamiques de ce Blog

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

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

Configurer le Gadget Suivre par Mail

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

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

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

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

Modifier le code source

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

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

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

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

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

Plus d'informations

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

Afficher une feuille Excel sur son Blog - Google Viewer

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

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

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

Afficher un fichier Adobe Photoshop

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

Adresse du fichier *.psd

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

Code iframe pour intégrer le lecteur

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

Le résultat

Le cas d'une feuille Excel

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

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

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

Feuille Excel dans le lecteur Google Viewer

Utiliser un Google Web Elements

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

Dans ce cas, il faut respecter deux conditions :

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

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

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

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

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

Code du Google Web Elements

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

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

Google Web Elements - Spreadsheets

Une astuce

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

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

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

Code du iframe

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

Plage à afficher

Cellules A1 à B17 : range=A1%3AB17

Le Résultat

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

Insérer une feuille Excel sur son Blog

Plus d'informations

Le Blog de Google Docs

Les Google Web Elements

Google Viewer

Fichiers joints et Podcasting avec Blogger

Les derniers messages d'un Blog sous forme de Diaporama

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

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

Les deux variantes du Gadget

Affichage de l'image à gauche du texte

last-post-slideshow-b.xml

Version verticale, image centrée en haut du gadget

last-post-slideshow-v-b.xml

Ajouter le Gadget sur son Blog

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

Image à gauche

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

Version verticale, image centrée en haut du gadget

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

Les paramètres des Gadgets

Image à gauche

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

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

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

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

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

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

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

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

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage 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).

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

Les caractéristiques des gadgets

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

Des exemples

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

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

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

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

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

Gadget Google ou Gadget Blogger

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

Plus d'informations

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

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

Gadget Blogger pour afficher un Diaporama Flickr

2011-02-19T17:43:00.014+01:00

Les Gadgets Blogger permettent d'afficher un Diaporama d'un Photoset (album) de Flickr ou toutes les images d'un utilisateur (Photostream) de Flickr. Grâce à l'utilisation de Yahoo Pipes il est possible d'afficher jusqu'à 500 photos par album ou par ensemble d'images. Le Flux Media RSS de Flickr est analysé pour afficher une image sans perte de qualité jusqu'à 640 pixels de large.

Les variantes du Gadget

Sans titre, un ensemble d'images

flickr-ph-slideshow-simple-b.xml

Sans titre, images d'un album

flickr-slideshow-simple-b.xml

Avec un titre et les légendes des photos. Ensemble d'images

flickr-ph-slideshow-b.xml

Avec un titre et les légendes des photos. Images d'un album

flickr-slideshow-b.xml

Ajouter le Gadget sur son Blog

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

Sans titre, ensemble d'images

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

Sans titre, images d'un album

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

Avec titre et légendes, ensemble d'images

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

Avec titre et légendes, images d'un album

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

Les paramètres des Gadgets

Sans titre, ensemble d'images (Photostream)

UID : l'identifiant de l'utilisateur.

Ouvrir le compte Flickr, rechercher l'adresse marquée RSS. L'URL est de cette forme :

http://api.flickr.com/services/feeds/photos_public.gne?id=42038249@N00&lang=fr-FR&format=rss_200

42038249@N00 est l'identifiant de l'utilisateur.

PWH : la largeur des images en pixels. Jusqu'à 640 pixels, le diaporama affiche l'image en qualité originale.
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.

Sans titre, image d'un album (Set)

SET : le Set (album) de Flickr à afficher.

Ouvrir l'album et copier son adresse. L'URL est de cette forme :

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

72157609076361497 est l'identifiant du Set à afficher.

Le Set doit être public.

PWH : la largeur des images en pixels. Jusqu'à 640 pixels, le diaporama affiche l'image en qualité originale.
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, ensemble d'images (Photostream)

UID : l'identifiant de l'utilisateur.

Ouvrir le compte Flickr, rechercher l'adresse marquée RSS. L'URL est de cette forme :

http://api.flickr.com/services/feeds/photos_public.gne?id=42038249@N00&lang=fr-FR&format=rss_200

42038249@N00 est l'identifiant de l'utilisateur.

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 Flickr.

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.

Avec titre et légendes, images d'un album (Set)

SET : le Set (album) de Flickr à afficher.

Ouvrir l'album et copier son adresse. L'URL est de cette forme :

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

72157609076361497 est l'identifiant du Set à afficher.

Le Set doit être public.

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 Flickr.

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

Dépasse la limite normale des 20 images pour un Flux de Flickr (maximum 500 images)
Images sans perte de qualité jusqu'à 640 pixels
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)

Un exemple

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

L'album La Noblesse des Vins Suisses

Gadget Google - Diaporama / Slideshow de Flickr - http://www.liens-du-vin.ch/flickr-gadget-script.htm

Gadget Google ou Gadget Blogger

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

Plus d'informations

Diaporama Flickr avec un Gadget Google

Diaporama des derniers messages avec un gadget Blogger

Un Gadget Blogger pour afficher les vignettes de Flickr

Ses photos Flickr sur un mur d'images, avec un Diaporama Tiltviewer

Diaporama Photobucket avec un Gadget Blogger

Diaporama Picasa avec un Gadget Blogger

Diaporama des derniers messages d'un Blog

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

Afficher des Diaporamas sur Google Sites

Des Gadgets pour son Blog

Gadget Blogger pour afficher un Diaporama Photobucket

2011-02-08T21:18:00.011+01:00

Deux Gadgets Blogger pour afficher un Diaporama de Photobucket sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le Gadget proposé par Blogger. Comme ce dernier, ils utilisent le Flux Media RSS fourni par Photobucket. Cet hébergeur fournit un flux pour un Album, les photos d'un utilisateur ou le résultat d'une recherche d'image.

Les deux variantes du Gadget

Sans titre

photobucket-slideshow-simple-b.xml

Avec un titre et les légendes des photos

photobucket-slideshow-b.xml

Ajouter le Gadget sur son Blog

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

Sans titre

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

Avec titre et légendes

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

Les paramètres des Gadgets

Sans titre

FEED : le Flux Media RSS à afficher.

C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS :

Pour un album Photobucket, ouvrir l'album et copier l'adresse marquée RSS. C'est une adresse de cette forme :

http://feed266.photobucket.com/albums/ii244/prac53/feed.rss

L'album doit être public.

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

FEED : le Flux Media RSS à afficher.

C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS :

Pour un album Photobucket, ouvrir l'album et copier l'adresse marquée RSS. C'est une adresse de cette forme :

http://feed266.photobucket.com/albums/ii244/prac53/feed.rss

L'album doit être public.

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 Photobucket.

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

Images sans perte de qualité
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)

Un exemple

Le diaporama La Valeur de l'Homme, le travail de la vigne, affiché 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

Diaporama Photobucket avec un Gadget Google

Diaporama des derniers messages avec un gadget Blogger

Diaporama Flickr avec un Gadget Google

Un Gadget Blogger pour afficher les vignettes de Photobucket

Diaporama Picasa 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

Gadget Blogger pour afficher un Diaporama de Picasa

2011-01-28T20:38:00.019+01:00

Deux Gadgets Blogger pour afficher un Diaporama Picasa sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le Gadget proposé par Blogger. Comme ce dernier, ils utilisent le Flux Media RSS fourni par Picasa.

Les deux variantes du Gadget

Sans titre

picasa-slideshow-simple-b.xml

Avec un titre et les légendes des photos

picasa-slideshow-b.xml

Ajouter le Gadget sur son Blog

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

Sans titre

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

Avec titre et légendes

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

Les paramètres des Gadgets

Sans titre

FEED : le Flux Media RSS à afficher. Pour un album Picasa, ouvrir l'album et copier l'adresse marquée RSS. C'est une adresse de cette forme :

http://picasaweb.google.com/data/feed/base/
user/philippe.chappuis/albumid/5545812725123933217?alt=rss
&kind=photo&hl=fr

L'album doit être public. L'adresse peut être http ou https (connexion sécurisée).

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. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

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

Avec titre et légendes

FEED : le Flux Media RSS à afficher. Pour un album Picasa, ouvrir l'album et copier l'adresse marquée RSS. C'est une adresse de cette forme :

http://picasaweb.google.com/data/feed/base/
user/philippe.chappuis/albumid/5545812725123933217?alt=rss
&kind=photo&hl=fr

L'album doit être public. L'adresse peut être http ou https (connexion sécurisée).

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 de l'album Picasa.

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. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

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

Images sans perte de qualité jusqu'à 800 pixels de large
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
Clic sur image désactivé par défaut
Affichage des légendes de chaque image (version avec titre)

Un exemple

Le diaporama des plus beaux domaines viticoles de Suisse, affiché 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

Diaporama Picasa avec un Gadget Google

Diaporama des derniers messages avec un gadget Blogger

Diaporama Photobucket avec un Gadget Blogger

Diaporama Flickr avec un Gadget Blogger

Un Gadget Blogger pour afficher les vignettes de Picasa

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

Des Gadgets pour son Blog

Le Gadget Blogger pour afficher les Vignettes de Photobucket

2011-01-18T23:49:00.014+01:00

Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket.

Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter le Gadget, avec Présentation / Ajouter un Gadget

Sélectionner Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml

photobucket-thumb-rssfeed.xml

Les paramètres du Gadget

FEED : Le Flux Media à utiliser.
C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS :

NBC : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)

SIZE : La taille des vignettes, en pixels (de 36 à 160, 72 par défaut)

SHA : Ombre portée sous les vignettes (Oui - Non)

CLP : Ouvrir l'image d'origine sur clic (Oui - Non), oui par défaut

URL : L'URL du lien sur le titre

TITRE : Le titre

LCOL : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

Le résultat

Les vignettes de mon Album Photobucket, Swiss Wineries. Vignettes de 36 x 36 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'info

Un Gadget Google pour afficher les vignettes d'un Flux Media RSS de Photobucket

Des Gadgets pour son Blog

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

Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos de Flickr

Le Gadget Blogger pour afficher les Vignettes de Flickr

2011-01-14T21:08:00.015+01:00

Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos (Photoset) de Flickr.

Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter le Gadget, avec Présentation / Ajouter un Gadget

Sélectionner Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

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

flickr-thumbnails-b.xml

Les paramètres du Gadget

SET : Identifiant du Photoset (ensemble d'images) à afficher.

Ouvrir le Set, l'adresse est de cette forme :

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

72157609076361497 est l'identifiant du Set.

NBC : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)

SIZE : La taille des vignettes, en pixels (de 36 à 240, 72 par défaut)

SHA : Ombre portée sous les vignettes (Yes - No)

CLP : Ouvrir l'image d'origine sur clic (Yes - No). Yes (oui) par défaut

URL : L'URL du lien sur le titre

TITRE : Le titre

LCOL : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

Le résultat

Les vignettes du Photoset Swiss Wineries. Vignettes de 36 pixels, avec ombre porté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'info

Un Gadget Google pour afficher les vignettes d'un ensemble de Photos de Flickr

Ses photos Flickr sur un mur d'images

Des Gadgets pour son Blog

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

Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket

Une video : Sauvegarde et partage de photos sur Internet

Le Gadger Blogger pour afficher les Vignettes de Picasa Albums Web

2011-01-12T22:15:00.029+01:00

Un Gadget Blogger pour afficher les vignettes d'un album Picasa ou les dernières images téléchargées sur son compte.

Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter le Gadget, avec Présentation / Ajouter un Gadget

Sélectionner Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml

picasa-album-photostream.xml

Les paramètres du Gadget

USR : Le nom de l'utilisateur Picasa

AID : L'dentifiant de l'album. Vide si affichage des dernières images téléchargées.
Pour obtenir le nom de l'utilisateur et l'identifiant de l'article, ouvrir un album et copier l'adresse marquée RSS. C'est une URL de cette forme :

http://picasaweb.google.com/data/feed/base/user/philippe.chappuis/albumid/5545812725123933217?alt=rss&kind=photo&hl=fr

L'utilisateur est philippe.chappuis et l'identifiant de l'album est 545812725123933217

NBC : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)

SIZE : La largeur des vignettes, en pixels (de 32 à 160, 72 par défaut)
HSIZE : La hauteur des vignettes, en pixels (de 32 à 160).
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 : Ombre portée sous les vignettes (Oui - Non), défaut non.

CLP : Ouvrir l'image sur un click (Oui - Non), défaut oui.

URL : L'URL du lien sur le titre

TITRE : Le titre

LCOL : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

Le résultat

Mes dernières images sur Picasa, affichées sous forme de vignettes 36 x 36, 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

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

Un Diaporama de Picasa avec un Gadget Blogger

Des Gadgets pour son Blog

Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket

Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos de Flickr

Un Gadget Blogger pour afficher les derniers commentaires du Blog

Le Gadget Blogger pour afficher les Commentaires récents

2011-01-11T00:11:00.027+01:00

Il existe plusieurs versions de ce Gadget. Ils sont pour la plupart en anglais ou présentent le défaut d'afficher les caractères spéciaux avec leur valeur affichée en entité HTML. Ainsi l'apostrophe est affichée ' (janvier 2011).

Le Gadget de Madtomatoe affiche l'apostrophe correctement, mais le texte de présentation des commentaires est en anglais. Il s'agit en réalité d'un script javascript à insérer dans un gadget HTML / JAVASCRIPT.

Le Gadget Blogger lecteur de Flux, permet d'afficher le Flux des commentaires, mais il n'affiche pas le texte du commentaire lui-même !

J ai donc réalisé un véritable Gadget Blogger qui est en français et affiche correctement les caractères spéciaux.

Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter le Gadget, avec Présentation / Ajouter un Gadget

Sélectionner Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/commentaires-recents.xml

commentaires-recents.xml

Les paramètres du Gadget

BLOG : L'adresse du Blog, par exemple viti-vino.blogspot.com.
Important : L adresse sans http://

NBC : Le nombre de commentaires à afficher (de 1 à 20, 5 par défaut)

MAX : La longueur du texte (de 50 à 500, 150 par défaut)

DATE : Faire figurer la date (Oui ou Non, par défaut Oui)

TBLOG : Afficher le titre du Blog (Oui ou Non, par défaut Oui)

TITRE : Faire figurer le titre du message (Oui ou Non, par défaut Oui)

AUTEUR : Faire figurer l'auteur (Oui ou Non, par défaut Oui)

TAILLE : Taille police en % (par défaut 85)

LCOL : La couleur des liens (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.

TCOL : La couleur du texte.

BCOL : La couleur du fond.

Le résultat

Les derniers commentaires du Blog de Prac sur un Modèle Picture Window :

Flux des commentaires

Le Flux des commentaires doit être activé pour le Blog. Pour cela utiliser Paramètres / Flux d'actualisation. Clic sur Mode Avancé, puis choisir :

Flux de commentaires de Blog : Complet
Flux de commentaires par message : Complet

Un mur d'images avec une galerie en xml

2011-01-06T21:17:00.015+01:00

Les diaporamas basé sur un Flux Media RSS sont limités en terme d'effets graphiques. Il existe de nombreux prestataires tiers qui proposent un Diaporama en Flash avec des effets très élaborés.

Tiltviewer permet d'afficher un mur d'images. (To tilt : pencher, incliner).

Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash tiltviewer.swf.
L'insertion du diaporama dans un message du blog ou un gadget html / javascript est grandement simplifiée en utilisant un Gadget Google.

Url du gadget

tiltviewer-gallery.xml

Insertion du gadget

Le gadget peut être inséré dans le html d'un message de Blogger ou dans un gadget HTML / Javascript. Pour obtenir le code du tag iframe ou la source du script, il faut utiliser la méthode décrite dans le message du Blog d'Aide pour Blogger.

Pour ce gadget, les codes sont donnés sur la page : un Gadget Google pour afficher un mur d'images avec Tiltviewer.

Le code du iframe

Le fichier xml

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<tiltviewergallery>
<photos>

   <photo imageurl="URL image" linkurl="lien plus d'infos">
   <title>titre de l'image</title>
   <description>

   <![CDATA[ La description de l image.
Les tags <u>, <i> et <b> sont admis ]]>
   </description>
</photo>
   ........................

   </photos>
<tiltviewergallery>

Un exemple de fichier xml valide : gallery-swiss-wineries.xml

Affichage plein écran

Faire un clic droit puis choisir Plein écran

Hébergement sur Google Sites

Le lecteur Flash (Tiltviewer.swf) ainsi que la galerie xml peuvent être hébergés sur Google Sites (page classeur).

Il faut cependant respecter les restrictions suivantes :

Fichier xml : - Ne pas utiliser l'adresse classique du fichier xml :

http://sites.google.com/site/NOMSITE/.../galerie.xml

mais utiliser la forme sécurisée de l'adresse :

http://nnn...nnn-a-mmm...mmm-s-sites.googlegroups.com/site/NOMSITE/.../galerie.xml

Pour obtenir l'adresse du fichier, télécharger le fichier xml depuis la page classeur (sous IE), puis avec l'explorateur Windows, retouvez ce fichier dans les fichiers temporaires Windows et recopier l'adresse Internet (Documents and Settings/user/local Settings/Temporary Internet Files)

Images - Les fichiers définis dans la galerie xml doivent être hébergés par un site appartenant à un Domaine Google (Google Sites, Picasa, ...)

Un exemple

Les images des plus beaux domaines viticoles suisses

Gadget Google - Un mur d'images avec le diaporama Flash de TiltViewer - http://www.liens-du-vin.ch/galerie-mur-images.htm

Plus d'informations

Ses photos de Flickr sur un mur d'images

Une galerie horizontale en accordéon

Les vignettes d'un album Picasa sur son Blog

Un gadget Google pour ajouter un diaporama dans le corps du message

Tiltviewer, le site

Crédit photos

Association Clos Domaines et Châteaux

Une galerie pour afficher des images en accordéon

2010-12-12T18:08:00.013+01:00

L'affichage en accordéon se réalise simplement avec quelques lignes de CSS. La méthode est décrite dans l'article de Stu Nicholls : Sliding Photograph Galleries.

J'avais utilisé cet exemple pour utiliser une feuille de style pour un seul message.

Un Gadget Google permet d'insérer une galerie horizontale, avec les photos affichées en accordéon.

URL du gadget

gadget-slide-horizontal.xml

Insertion du gadget

Le gadget peut être inséré dans le html d'un message de Blogger ou dans un gadget HTML / Javascript. Pour obtenir le code du tag iframe ou la source du script, il faut utiliser la méthode décrite sur le Blog d'Aide pour Blogger.

Pour le gadget, les codes sont donnés sur la page galerie horizontale.

Le tag iframe

A saisir sans espace ni retour à la ligne :

Un exemple

J utilise le code suivant pour afficher les images des Clos Domaines et Châteaux

Gadget Google - Galerie horizontale de photos affichées en accordéon

Plus d'informations

Ses photos Flickr sur un mur d'images

Les vignettes d'un album Picasa sur son Blog

Un style pour un seul message de Blogger

Insérer un gadget dans le corps du message

Crédit photos

Association Clos Domaines et Châteaux

Colorer le Bouton Partager de Blogger

2010-10-19T22:27:00.019+02:00

Modifier le Bouton Partager

Blogger utilise la technique du Sprite CSS, pour afficher 5 liens sur 1 image et modifier le fond au survol de la souris.
Le coeur de la méthode consiste à définir la grande image comme image de fond, et à se positionner sur celle-ci à des endroits différents. Le positionnement change grâce à la clause CSS background-position.

L image de départ utilisée par Blogger

Elle comporte 4 rangées de 5 icônes (5 x 22 x 22 pixels). Le bouton standard utilise la première rangée pour les liens, et affiche la dernière ligne (transparente) au survol par la souris.

Le bouton Partager standard

Le bouton Partager en couleur

Nous allons afficher la troisième rangée de l'image de base. Au survol (pseudo-classe a:hover), nous allons afficher les icônes de la deuxième rangée (haut du bouton clair).

Le CSS à placer dans le Blog, redéfinit la clause background-position. -44px correspond à la rangée 3 (2 x 22) et -22px à la rangée 2 (1 x 22). La mention !important indique que cette clause CSS prime sur toute autre.

/* bouton de partage en couleur */

a.sb-email {background-position: 0px -44px !important;}
a.sb-blog {background-position: -21px -44px !important;}
a.sb-twitter {background-position: -42px -44px !important;}
a.sb-facebook {background-position: -63px -44px !important;}
a.sb-buzz {background-position: -84px -44px !important; width: 24px;}

a.sb-email:hover {background-position: 0px -22px !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-buzz:hover {background-position: -84px -22px !important;}

Le bouton Partager transparent

L'image de base comporte une quatrième rangée transparente. Nous allons l'afficher pour les liens, et au survol, nous ferons apparaître les icônes de la troisième rangée (bas du bouton clair).

Le CSS à placer dans le Blog, redéfinit la clause background-position. -66px correspond à la rangée 4 (3 x 22) et -44px à la rangée 3 (2 x 22). Il faut ajouter width: 22px pour afficher le bord de l'icône au survol.

/* bouton de partage transparent */

a.sb-email {background-position: 0px -66px !important;}
a.sb-blog {background-position: -21px -66px !important;}
a.sb-twitter {background-position: -42px -66px !important;}
a.sb-facebook {background-position: -63px -66px !important;}
a.sb-buzz {background-position: -84px -66px !important; width: 22px;}

a.sb-email:hover {background-position: 0px -44px !important; width: 22px;}
a.sb-blog:hover {background-position: -21px -44px !important; width: 22px;}
a.sb-twitter:hover {background-position: -42px -44px !important; width: 22px;}
a.sb-facebook:hover {background-position: -63px -44px !important; width: 22px;}
a.sb-buzz:hover {background-position: -84px -44px !important; width: 22px;}

Correction du style

Dans les 2 cas (bouton en couleur et bouton transparent), ajouter ceci au style du Blog, pour éviter un décalage vers le bas du dernier bouton de la rangée, au survol de la souris :

.post-share-buttons
{
width: 112px !important;
}

Adaptation du style pour les modèles personnalisés

Depuis mars 2011, les modèles personnalisés doivent avoir cette correction pour afficher les boutons partagés :

.post-share-buttons a
{
position: relative;
display: inline-block;
}

Nouveau bouton de partage (25 mars 2011)

Depuis le 25 mars 2011, Blogger a introduit un nouveau bouton de partage dans la feuille de style associée au Blog.

Cette image de 120 par 60 pixels comprend le partage sur Orkut. Les petites icônes sont réduites en largeur par rapport à la version 1 (20 x 30 pixels au lieu de 22 x 22 pixels).

Important : Les modifications ci-dessus ne s'appliquent pas à ce nouveau bouton de partage !

En savoir plus

Sprite CSS pour afficher jusqu'à 50 Profils de Réseaux sociaux.

Le bouton de Partage de Blogger.

Profils des Réseaux Sociaux avec Sprite CSS

2010-10-17T23:43:00.034+02:00

Sprite CSS : Afficher vos Profils dans 50 Réseaux Sociaux

La méthode décrite ici est appelée Sprite CSS, par analogie avec la méthode utilisée par les premiers jeux vidéos (Sprite en anglais : le lutin, le farfadet). Ces jeux affichaient un personnage animé à partir de pixels pris sur une seule image, par souci d'économie de ressources.

La base de cet article est un Plugin pour Wordpress, Cute Profiles : Free WordPress Plugin To Show Vertically Floating Social Profiles.

Le CSS background-position

La clause CSS background-image permet de définir l'image de fonds d'un bloc. La position de cette image est fixée par background-position. Nous allons utiliser 2 coordonnées, l'axe horizontal et l'axe vertical en pixels pour afficher une partie de l'image de fonds.
Partons d'une image de 120 x 90 pixels, et divisons cette image en 4 cadrans (haut / bas et gauche / droite).

Un lien avec une image

En utilisant la clause background-image nous pouvons créer un lien sur une image. Le tag a (ancre) doit normalement contenir le texte du lien. Nous supprimons l'affichage du lien par la clause CSS display: none;

div.test1
{
border: 0px;
margin: 0px;
padding: 0px;
}

div.test1 a
{
display: inline-block;
width: 60px;
height: 45px;
padding: 0px;
margin: 0px 0px 4px;

background-image: url(http://www.liens-du-vin.ch/ascreen.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}

div.test1 a.haut_gauche
{
background-position: 0px 0px; /* CADRAN HAUT GAUCHE */
}

div.test1 a.haut_droite
{
background-position: -60px 0px; /* CADRAN HAUT DROITE */
}

div.test1 a.bas_gauche
{
background-position: 0px -45px; /* CADRAN BAS GAUCHE */
}

div.test1 a.bas_droite
{
background-position: -60px -45px; /* CADRAN BAS DROITE */
}

div.test1 a span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}

Le code HTML, place les liens sur les 4 cadrans, dans un bloc div :

<div class="test1">

<a class="haut_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Gauche"><span>Liens Du Vin<</a>
<a class="haut_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Droite"><span>Liens Du Vin</span></a>
<a class="bas_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Gauche"><span>Liens Du Vin</span></a>
<a class="bas_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Droite"><span>Liens Du Vin</span></a>

</div>

Ce qui donne le résultat suivant :

Haut Gauche (0 0)	Haut Droite (-60 0)
Liens Du Vin	Liens Du Vin
Bas Gauche (0 -45)	Bas Droite (-60 -45)
Liens Du Vin	Liens Du Vin

Changer le fonds au survol

Nous allons utiliser une peudo-classe CSS a:hover pour modifier le fonds du lien au survol de celui-ci.
Affichons le cadran Haut Gauche sur le lien, et affichons le cadran Bas Droite lorsque le curseur survole le lien. Il suffit de définir la clause CSS hover (à placer après la clause a:link) :

div.test1 a.haut_gauche:hover
{
background-position: -60px -45px;
}

En pratique, l'image change pour le cadran Bas Droite au survol par la souris :

Liens Du Vin

La Mise en oeuvre avec les icônes de Profil

L'image *.png des Profils des Réseaux Sociaux (50 icônes) ainsi que la feuille de style complète pour toutes les icônes peuvent être obtenues à l'adresse du Plugin Wordpress citée plus haut.

L'image de base comprend 50 icônes de 32 pixels, sur 2 rangées. La première rangée est l'image du lien, la deuxième comporte l'image à afficher au survol du lien.

Les coordonnées de background-position pour le lien

Par exemple, nous voulons afficher comme lien, l'icône no 3 de la première rangée (facebook). Le CSS du lien sera :

div.profil_sprite a.facebook
{
background-position: -64px 0px;
}

En généralisant, le lien pour l'icône n, -32 * (n - 1). Par exemple, l'icône YouTube (no 9, donc -32 * (9-1) = -256) :

div.profil_sprite a.youtube
{
background-position: -256px 0px; /* ICONE 9 : -32 * (9 - 1) */
}

Les coordonnées de background-position pour le survol de la souris

Nous devons changer la coordonnée y de background-position, en nous déplaçant de 32px vers le bas. Pour Facebook (icône no3) :

div.profil_sprite a.profil_facebook:hover
{
background-position: -64px -32px;
}

Et pour YouTube (icône no 9) :

div.profil_sprite a.youtube:hover
{
background-position: -256px -32px;
}

Un exemple complet avec mes profils

Le CSS :

div.profil_sprite /* LE BLOC DIV CONTENANT LES LIENS */
{
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}

div.profil_sprite a /* LE LIEN DANS LE BLOC DIV */
{
width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

/* LES ICONES QUI DOIVENT FIGURER */

div.profil_sprite a.profil_twitter
{
background-position: -32px 0px; /* ICONE NO 2 */
}
div.profil_sprite a.profil_twitter:hover
{
background-position: -32px -32px; /* ICONE NO 2 */
}
...
...
div.profil_sprite a.profil_google
{
background-position: -160px 0px; /* ICONE no 6 */
}
div.profil_sprite a.profil_google:hover
{
background-position: -160px -32px; /* ICONE no 6 */
}

.profil_sprite span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}

La barre horizontale de mes Profils :

Google - Philippe Chappuis Twitter - Prac53 Facebook - Chappuis YouTube - Chappuis Linkedin - Prac53 Flickr - Prac53 Technorati - Prac53 Xing - Philippe Chappuis Delicious - Prac53 StumbleUpon - Prac53 Wikio - Prac53 Slideshare - Prac53 Flux RSS - Blog de Prac

Le html de l'exemple :

<div class="profil_sprite">
<a href="URL profil Google" title="Profil Google" class="profil_google"><span>Profil Google</span></a>
...
</div>

Afficher la barre des profils verticalement

Il suffit de définir les liens comme étant display: block;

div.profil_sprite_v a
{

display: block;

width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

Plus d'informations

Une introduction aux Sprite CSS, par alsacréations.

Jouer avec l'opacité et la transparence pour ses images.

Utiliser les filtres d'opacité pour ses images.

Colorer le Bouton Partager de Blogger.

Ombrer ses Boîtes avec box-shadow

2010-07-20T16:12:00.042+02:00

Créer une ombre portée pour ses boîtes avec box-shadow

Les nouveaux modèles de Blogger utilisent la propriété CSS3 box-shadow. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html.

L'élément de style box-shadow

La propriété CSS box-shadow fait partie de la norme CSS3. Elle permet d'ajouter une ombre portée sur un élément HTML (span, div, img, ...).

La propriété s'applique sur la boîte de l'élément et non sur sa bordure. Blogger utilise cette propriété avec les nouveaux modèles.

En regardant la source du modèle Filigrane (Watermark) de Josh Peterson nous trouvons ce code CSS :

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img
{
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

La propriété box-shadow n'est pas encore implémentée par l'ensemble des navigateurs (juillet 2010). Il faut donc utiliser un préfixe CSS pour qu'un navigateur spécifique la reconnaisse.

-moz-box-shadow : Mozilla (FireFox)
-webkit-box-shadow : Webkit (Safari et Chrome)
-goog-ms-box-shadow : Chrome sous Internet Explorer (?)

Internet Explorer (IE), version 8 incluse, ne reconnaît pas la propriété box-shadow. Il existe un filtre propriétaire Microsoft permettant d'obtenir un résultat similaire. Il s'agit du filtre Shadow dont nous verrons l'utilisation plus loin.

La syntaxe de box-shadow

box-shadow: décalage-horizontal décalage-vertical dégradé taille couleur inset;

décalage-horizontal : obligatoire
décalage-vertical : obligatoire
dégradé : facultatif,par défaut 0. Une valeur positive augmente le flou de l'ombre. On parle de rayon de flou pour cette propriété (blur)
taille : facultatif. Par défaut 0, ce qui donne une ombre à la même taille que l'élément ombré. Une valeur positive augmente l'ombre, une valeur négative la diminue
couleur : facultatif
inset : facultatif. Si inset est mentionné il s'applique à toutes les couleurs utilisées comme fond

La couleur

La couleur peut-être indiquée selon un code couleur #rrggbb ou en notation rgb(r,g,b). Nouveauté de CSS3, la notation rgba (a pour filtre alpha) permet d'indiquer un degré d'opacité entre 0 et 1. L'opacité (la transparence d'une couleur) est définie par la propriété CSS opacity. Si opacity s'applique à un élément html et à tous ses descendants, la notation rgba ne s'applique elle qu'à une seule propriété de l'élément sélectionné.

Principe de la notation rgba

La notation rgba est identique à la notation rgb(r,g,b) mais comporte un dernier paramètre qui indique l'opacité de la couleur. L'opacité se défini par un nombre compris entre 0 et 1. A titre d'exemple, appliquons un filtre orange (#ff4500 rgb(255,69,0)), à cette photo en noir et blanc :

Le travail de l'Homme

Nous voulons une opacité de 20% (autrement dit 20% d'opacité correspond à 80% de transparence).

Le résultat obtenu sur la photo d'origine :

Le travail de l'Homme

Le CSS utilisé pour le filtre

background-color: rgba(255,69,0,.2);

/* fond orangé : #ff4500 rgb(255,69,0) */
/* opacité : 20% (.2) */

Le filtre spécifique à Internet Explorer

La notation rgba n'est pas reconnue par IE. Il faut donc utiliser un filtre alpha spécifique, suivi de la couleur de fond en notation rgb. Ces 2 éléments sont à placer avant la définition rgba :

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* filtre IE */
background-color: rgb(255,69,0); /* couleur de fond pour IE; FF et Chrome vont appliquer rgba */

background-color: rgba(255,69,0,.2);

Ce qui donne le code complet suivant :

Une ombre portée légérement floue

Créons une ombre portée décalée de 10px, avec un flou de 3px. L'ombre possède la même taille que l'élément ombré. Le CSS utilisé :

box-shadow: 10px 10px 3px #044eff; /* ombre de couleur bleu #044eff = rgb(4,78,255) */
-moz-box-shadow: 10px 10px 3px rgba(4,78,255, .8); /* opacité 80% */
-webkit-box-shadow: 10px 10px 3px rgba(4,78,255, .8);
-goog-ms-box-shadow: 10px 10px 3px rgba(4,78,255, .8);

ce qui donne l'image suivante :

Château de Vufflens

Note : L'affichage de cette page avec Internet Explorer ou FireFox fait apparaître une légère différence.

Simuler l'ombre portée sous IE

IE ne supportant pas box-shadow, il faut utiliser un filtre alpha. Le CSS pour Internet Explorer :

filter:progid:DXImageTransform.Microsoft.Shadow(color='#044eff', Direction=120, Strength=10);

Un effet d'halo

Créons une ombre portée centrée sur l'élément ombré. Donnons à l'ombre un rayon de flou important (12px) et agrandissons l'ombre de 5px. Le CSS utilisé :

box-shadow: 0 0 12px 5px #c00; /* pas de décalage de l ombre */
-moz-box-shadow: 0 0 12px 5px #c00; /* rayon de flou : 12px */
-webkit-box-shadow: 0 0 12px 5px #c00; /* l'ombre dépasse de 5px de l'objet ombré */
-goog-ms-box-shadow: 0 0 12px 5px #c00;

Le résultat, qu'il faut afficher sous FF et IE pour visualiser les différences :

Château de Vufflens

L'effet d'halo sous Internet Explorer

L'image ci-dessus ne possède pas d'halo sous Internet Explorer. Pour l'afficher, la solution retenue est la même que celle utilisé dans Blogger pour les nouveaux modèles. Un fond de couleur est défini pour l'élément, et une valeur de padding positive fait apparaître un cadre coloré.

Château de Vufflens

Le CSS, compatible IE et FF :

background-color: #c00;
padding: 3px;

On peut aussi utiliser la technique du cadre semi-transparent. Mais, contrairement à l'emploi de box-shadow, le cadre semi-transparent empiète sur l'image.

En utilisant un Gadget Google, cette technique permet de rapidement insérer une photo avec un cadre semi-transparent :

Afficher une photo avec un cadre semi-transparent

Château de Vufflens

L'utilisation de box-shadow dans le modèle Filigrane

Le code utilisé par Blogger pour le modèle Filigrane (Watermark)est le suivant

border: solid 1px #c00;
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);

Ce code produit une légère ombre portée, dont le rayon de flou est de 5px. Le décalage est de 1px. L'opacité de 50%. Le padding de 5px crée un cadre blanc (background-color: #fff;) autour de l'image. Pour afficher une ombre portée avec Internet Explorer il faut ajouter un filtre alpha comme ceci

filter:progid:DXImageTransform.Microsoft.Shadow(color='#cc0000', Direction=120, Strength=3);

L'image obtenue :

En savoir plus

Un Gadget Google pour afficher une photo avec un cadre semi-transparent

Opacité et transparence, animer ses images

Opacité et transparence, appliquer un filtre

Encadrer ses photos avec du CSS

Des cadres pour ses photos avec du CSS en ligne sous Google Sites

Des cadres pour ses photos sur Blogger

© Photos : Diapo.ch, Clos Domaines et Châteaux et Les Liens du Vin

Un code QR sur ses pages - Créer des liens pour son téléphone mobile

2010-03-07T21:59:00.019+01:00

Le QR-Code (Quick Response) est un code-barres à 2 dimensions permettant d'accéder à un contenu numérique sur son mobile, simplement en le photographiant. Pour que cela fonctionne, il faut que le téléphone mobile soit équipé de l'application qui scanne le code. Le tableau suivant indique les lecteurs à télécharger selon le type de téléphone mobile :

Téléphone	Lecteur
iPhone	I-nigma
Smartphone	Quickmark
Autres	Kaywa

Une fois le logiciel téléchargé et installé, on peut photographier le QR-Code. Celui-ci est traduit s'il s'agit d'un texte, ou ouvre la page Internet s'il s'agit d'une adresse URL.

Utiliser Google Chart API

Google Chart API met à disposition les outils nécessaires à la création d'objets graphiques.
Le principe de fonctionnement de ces outils est de créer une URL avec les paramètres du graphique. Cette adresse génère une image qu'il suffit d'afficher sur le Blog. Prenons l'exemple d'un graphique en gâteau :

source : Site Salvagnin, Encépagement Canton de Vaud, 2008

L'url du graphique

http://chart.apis.google.com/chart?
cht=p3
&chs=520x208
&chd=t:43.0,37.0,10.0,8.0,2.0
&chl=43%%7C37%%7C10%%7C8%%7C2%
&chdl=Pinot+Noir%7CGamay%7CGamaret%7CGaranoir%7CAutres
&chtt=Enc%C3%A9pagement+:+Vins+rouges+2008
&chco=4f81bd,c0504d,9bbb59,8064a2,4bacc6

Les paramètres

cht=p3 : Le type de graphique (Pie Chart - 3D)
chs=520x208 : la taille du graphique
chd=t:43.0,37.0,10.0,8.0,2.0 : les valeurs à représenter (43, 37, 10, 8 et 2)
chl=43%%7C37%%7C10%%7C8%%7C2% : les étiquettes du graphique séparées par le caractère pipe (%7C)
chdl=Pinot+Noir%7CGamay%7CGamaret%7CGaranoir%7CAutres : les légendes séparées par le caractère pipe (%7C)
chtt=Enc%C3%A9pagement+:+Vins+rouges+2008 : la légende du graphique (URL encodée)
chco=4f81bd,c0504d,9bbb59,8064a2,4bacc6 : les couleurs du graphique (selon le code rrggbb)

Le QR Code avec Google Chart API

Pour créer un QR-Code il suffit d'utiliser un graphique de type qr

Les paramètres du QR-Code

cht=qr : le type du graphique
chs=150x150 : la taille du QR-Code
chl=le contenu du QR-Code
choe=UTF-8 : l'encodage utilisé
chld=Q : niveau de la correction d'erreurs (Q permet de traduire un QR-Code dont 25% de la surface est illisible)

Un QR-Code avec du texte

Le QR-Code suivant encode la description du Blog : Viti-Vino. Le Blog de Prac - Les Outils Google. Pour personnaliser son blog. Un complément de l'aide en ligne. Les trucs et astuces pour Blogger. Les exemples du Forum d'Aide pour Blogger

Le code html du QR-Code avec du texte

Un QR-Code avec une adresse URL

Le QR-Code suivant encode l'adresse Internet du gadget Etiquettes de Vin

Le code html du QR-Code avec une adresse URL

Un QR Code avec Google URL Shortener

Depuis le 1er octobre 2010, le service de raccourcissement d'URL de Google, goo.gl (gl est l'extension du Groenland) permet de créer une URL courte, de la forme http://goo.gl/vBqG.

Une fois connecté sous son compte Google, le service information donne accès aux statistiques d'utilisation de l'URL abrégée, ainsi qu'au code QR de l'URL raccourcie.

En pratique, Google URL Shortener permet de raccourcir l'URL suivante :

maps.google.ch/maps/ms?hl=fr
&ie=UTF8
&t=h
&msa=0
&msid=102376698569738400439.00049087972194c5318f2
&ll=46.325831,6.962242&
spn=0.082979,0.145912
&z=12
&output=embed

Nous obtenons l'abrégé :

goo.gl/0hvD

la page d'information de cet abrégé, sous Google Shortener, affiche un QR Code, disponible à cette adresse :

goo.gl/0hvD.qr

C'est l'image du QR code qu'il suffit d'afficher à l'aide d'un tag img :

Plus d'informations

Le Code QR sur Wikipédia

Les outils graphiques de Google

Raccourcir ses URL avec Google URL Shortener

Fichiers joints et Podcasting avec Blogger

2010-01-16T22:33:00.021+01:00

Fichers joints et Podcasting avec Blogger

Le podcasting est un moyen de diffusion de fichiers (audio, vidéo ou autres) sur Internet appelés podcasts. En s'abonnant aux flux RSS ou Atom, le podcasting permet à l'internaute l'écoute ou le téléchargement automatique des documents joints. Blogger permet le podcasting de n'importe quel fichier, à la condition que celui-ci soit hébergé sur Internet.

Activer le Podcasting

Sur Blogger, il faut Afficher les Champs Liens, par Paramètres / Général :

Lors de la saisie du message, il faut cliquer sur Afficher les liens vers les pièces jointes pour définir les pièces jointes au message :

La fenêtre des pièces jointes comprend l'URL du document et le type MIME. Blogger détecte automatiquement le type MIME des fichiers audio et video.

Le flux RSS

Blogger génère un Flux RSS pour le Blog à l'adresse suivante :

http://NOMDUBLOG.blogspot.com/feeds/posts/default?alt=rss

Pour respecter la norme RSS, le flux RSS ne comprend que le premier fichier incorporé :

Par contre, le flux comprend bien l'ensemble des fichiers joints, incorporés par la balise <enclosure>. Ainsi cet article crée les balises suivantes :

Si le Flux est lu par Google Reader, l'ensemble des fichiers joints figure. Et, cerise sur le gâteau, le Reader permet l'écoute directe des fichiers mp3, grâce à son lecteur incorporé :

Fichiers joints dans le message

Après avoir inséré des fichiers joints, on constate que ceux-ci ne figurent pas dans le message. Blogger ne traite pas dans les variables du Blog, les balises enclosure. Si cette balise n'est pas documentée, il est néanmoins possible de l'utiliser dans le HTML du Blog :

data:post.enclosures : Toutes les balises enclosure du message

data:enclosure.mimeType : Le type MIME du fichier joint

data:enclosure.url : l'URL du fichier joint

Afficher une pièce jointe

Prenons l'exemple d'un fichier *.mp3 (audio) à afficher apres le message. Dans le HTML du Blog (Paramètres / Mise en Page / Modifier HTML - Cocher développer des modèles de Gadget), le message est indiqué par :

...
<div class='post-body entry-content'>
<data:post.body/>
...

Plaçons le code suivant après <data:post.body/>

<br/><i><b>Fichier(s) joint(s) : </b></i>

<b:loop values='data:post.enclosures' var='enclosure'>

<b:if cond='data:enclosure.mimeType == "audio/mpeg"'>

<a expr:href='data:enclosure.url' expr:title='"Ecouter le son " + data:enclosure.url' rel='enclosure' target='_blank'> Ecouter le son <img src='http://URL/icone-musique.gif' style='display:inline; border: 0 none;'/></a>

</b:if>



</b:loop>

Visualiser les fichiers joints

Nous allons utiliser le lecteur de documents de Google Documents.

Celui-ci permet de visualiser les fichiers *.pdf, *.ppt et *.tif.
Les types Mime sont respectivement application/pdf, image/tiff et application/mspowerpoint.

Le lecteur de document est appelé avec l'URL suivante :

http://docs.google.com/viewer?url=URL du fichier

Le code à ajouter à la place du commentaire () ci-dessus est le suivant :

<b:if cond='data:enclosure.mimeType == "application/pdf"'>
<a expr:href='data:enclosure.url' expr:title='"Fichier PDF " + data:enclosure.url' rel='enclosure' target='_blank'> Fichier PDF <img src='http://URL/icone-pdf.png' style='display:inline; border: 0 none;'/></a>
</b:if>

<b:if cond='data:enclosure.mimeType == "image/tiff"'>
<a expr:href='"http://docs.google.com/viewer?url=" + data:enclosure.url' expr:title='"Voir l&#39;image tif " + data:enclosure.url' rel='enclosure' target='_blank'> Voir l'image tif <img src='http://URL/icone-document.png' style='display:inline; border: 0 none;'/></a>
</b:if>

<b:if cond='data:enclosure.mimeType == "application/mspowerpoint"'>
<a expr:href='"http://docs.google.com/viewer?url=" + data:enclosure.url' expr:title='"Voir présentation " + data:enclosure.url' rel='enclosure' target='_blank'> Voir Présentation Power-Point <img src='http://URL/icone-document.png' style='display:inline; border: 0 none;'/></a>
</b:if>

Note : Attention à la syntaxe pour le titre du lien, afin de saisir un apostrophe :

Voir l'image tif devient Voir l&#39;image tif

Conclusion

Blogger se transforme facilement en outil de Podcasting. Il est possible d'ajouter des fichiers joints, comme des documents PDF ou des Présentations Power-Point et de les afficher avec le lecteur de documents de Google Documents.

Plus d'informations

Un modèle de Blog pour l'insertion de fichiers multimedia. L'approche de Soraya Lamprechts. Créer des widgets spécifiques pour chaque type de fichier multimedia.

Jouer un fichier *.mp3 sur son Blog

Des lecteurs multi-média pour son Site ou son Blog (anglais)

Des Gadgets pour son Blog

Le lecteur de documents de Google Documents

Afficher une feuille Excel sur son Blog - Google Viewer

Google Web Elements

2009-12-20T20:51:00.037+01:00

Google Web Elements, se sont des objets intégrables de Google. Pour y accèder, connectez-vous sous votre compte Google, puis rendez vous à l'adresse Google Web Elements.

Sommaire

Diaporama (Presentations)

Feuille de Calcul (Spreadsheets)

Moteur de Recherche Personnalisé (Custom Search)

Actualités (News)

Lecteur de Flux (Reader)

Forum (Conversation)

Agenda (Calendar)

Carte (Maps)

Actualités sur YourTube

Partager sur Orkut (Orkut Share)

Traduire (Translate)

Un Diaporama (Presentations)

Google Documents permet d'enregistrer un diaporama. Celle-ci peut être affichée à l'aide de l'élément Présentation

Paramètres : L'adresse de la présentation et la taille désirée.

Exemple : Les vins du Valais en Chine

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Note : La Présentation est dans un format propre à Google Document. Pour afficher une présentation Power-Point originale, il est possible d'utiliser le lecteur de documents de Google Documents.

Retour au sommaire

Une feuille de calcul (Spreadsheets)

Une feuille de calcul enregistrée sur Google Documents peut être affichée sur le Blog, à l'aide de l'élément Feuille de calcul (Spreadsheets).

Paramètres : L'adresse (URL) de la feuille de calcul, la taille et la plage de cellules à afficher.

Exemple : Encépagement en cépages rouge du Canton de Vaud (2008).

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Retour au sommaire

Un Moteur de Recherche Personnalisé (Custom Search)

L'élément Recherche Personnalisée offre une façon simple d'ajouter un formulaire de recherche sur son Blog. Trois options sont offertes, la recherche sur le Blog, la recherche sur le Blog en permettant l'affichage de publicités AdSense dans le résultat de la recherche, ou l'utilisation d'un moteur de recherche personnalisé (Custom Search Engine - CSE).

Paramètres : Le type de moteur de recherche et le style du formulaire.

Exemple : Le moteur de recherche des Liens du Vin.

La petite croix après le bouton de recherche permet d'effacer le résultat de la recherche.

Le code à insérer dans un gadget HTML / Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant en remplacant le code de la recherche personnalisée. Saisir le code sans retour à la ligne !

Retour au sommaire

Recherche d'Actualités (News)

L'élément Recherche d'actualité permet d'afficher les dernières informations sur un sujet donné.

Paramètres : Le format et l'expression à rechercher.

Exemple : Une recherche d'Actualités sur Google Blogger.

Google Web ELements - News

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Retour au sommaire

Un lecteur de Flux (Reader)

Google Reader, le lecteur de flux de Google permet d'afficher les flux RSS que l on désire suivre. Google Reader permet aussi d'afficher un extrait de ses abonnements sur son Blog. De nombreux Gadgets Google permettent aussi d'afficher un flux sur son Blog. L'élement Reader de Google Web Elements permet d'insérer un extrait des flux partagés sur son Blog.

Paramètres : Le titre de l'élément, le style et le nombre d'entrées à afficher.

Exemple : Mes tags partagés (trucs et astuces pour Blogger).

Le code à insérer dans un gadget HTML/Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant en remplacant les identifiants. Saisir le code sans retour à la ligne !

<div id="readershared"><div></div></div>
<script type="text/javascript">window.GRC_m=function(d){return new GRC(d,document.getElementById("readershared").firstChild);};</script>
<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-en.js"></script>
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/05980836729406198703/state/com.google/broadcast?n=7&callback=GRC_p(%7Bc%3A%22khaki%22%2Ct%3A%22Liens%20partag%C3%A9s%22%2Cs%3A%22true%22%2Cn%3A%22true%22%2Cb%3A%22false%22%2Cw%3A%22true%22%7D)%3Bnew%20GRC_m&t=?"></script><noscript>Google Web Elements - Reader</noscript>

Retour au sommaire

Le Forum (Conversation)

L'élément Forum permet aux lecteurs d'intervenir directement sur le Blog, sans passer par les commentaires.

Paramètres : La taille, le sujet du forum, la portée (limitée au Blog ou ouverte sur le Web).

Exemple : Un Forum sur les Trucs et Astuces pour Blogger.

Google Web Elements - Conversation

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Retour au sommaire

Un Agenda (Calendar)

L'élément Agenda permet d'insérer son planning sur le Blog. L'agenda doit bien entendu être déclaré comme partagé avant l'opération.

Paramètres : L'agenda à afficher, la taille et le mode d'affichage.

Exemple : Mon agenda en mode mensuel.

Google Web Elements - Calendar

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Retour au sommaire

Une Carte (Maps)

Google Maps permet de créer sa propre carte. Placer une carte sur son Blog, demande plusieurs manipulations. L'élément carte permet de géolocaliser une adresse particulière très rapidement.

Paramètres : La taille, le type de vue, l'adresse à géolocaliser et le titre du marqueur.

Exemple : Le Château de Rolle.

Google Web Elements - Maps

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript, en remplacant les paramètres de la carte.

Retour au sommaire

Actualités sur YouTube (YouTube News)

Pour ajouter une Video de YouTube sur son Blog, il suffit d'insérer un tag html object ou d'utiliser un Gadget Google. L'élément YouTube News permet d'ajouter les dernières vidéos d'actualité.

Paramètres : Le fournisseur de News.

Exemples : Les dernières News d'Euronews.

Google Web Elements - YouTube News

Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :

Retour au sommaire

Partager sur Orkut (Orkut Share)

Orkut, le réseau social de Google, ne dispose pas d'outils permettant de créer un bouton Partager sur Orkut.
L'élément Orkut Share comble cette lacune. Il correspond à l'outil Promouvoir d'Orkut.

Paramètres : Le style du bouton, le titre de l'article, le résumé, la vignette à utiliser et l'URL de destination.

Exemple : La promotion de cet article.

Promouvoir sur Orkut...

Le code à insérer dans un gadget HTML/Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant, à saisir le code sans retour à la ligne !

<div id="orkut_share" style="width:100%;">Promouvoir sur Orkut... </div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('orkut.share', '1'); google.setOnLoadCallback(function(){ new google.orkut.share.Button({ style:google.orkut.share.Button.STYLE_MINI, title:unescape('Google%20Web%20ELements'), summary:unescape('How%20to%20add%20Google%20Web%20Elements%20on%20Your%20Site')}).draw('orkut_share'); }, true); </script><noscript>Google Web Elements - Orkut Share</noscript>

Exemple avec le bouton Orkut normal (Orkut Regular) :

Promouvoir sur Orkut...

Retour au sommaire

La Traduction (Translate)

L'élément Traduction permet de traduire la page courante du Blog.

Paramètres : La langue de la page et le choix de l'affichage (pour tous les visiteurs ou seulement pour ceux dont la langue est différente de celle de la page).

Exemple : L'outil traduction pour cette page.

Le code à insérer dans un gadget HTML/Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant, à saisir le code sans retour à la ligne !

<div id="google_translate_element" style="display:block"></div>
<script>function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: "fr"}, "google_translate_element");};</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><noscript>Google Web ELements - Translate</noscript>

Retour au sommaire