Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2011/12/12

Webdoc - Partagez vos passions autrement

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

Webdoc
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 : 



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

Webdoc - code embarqué

<iframe title="webdoc" width="500" height="840"
src="http://www.webdoc.com/embed/C4FD782C-46A0-0001-CD85-1180CEF01631" frameborder="0" scrolling="no"></iframe>


Webdoc devient urturn

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

En savoir plus

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

2011/08/24

Gadget Blogger pour insérer une image sonore

Gadget Blogger pour insérer une image sonore

Une utilisation du lecteur Flash Dewplayer pour jouer un son lors du survol d'une image avec la souris

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

Le Gadget

  • Insérer une image sonore

Gadget Blogger - Image sonoreimage-sonore-b.xml


Ajouter le Gadget sur son Blog

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

Image sonore

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




Les paramètres du Gadget

  • Image sonore


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

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

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




Les caractéristiques du Gadget

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


Un exemple

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






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



2011/07/28

Des Gadgets Blogger pour Google+

Des Gadgets Blogger pour Google+

Des Gadgets Google pour afficher le flux d'un utilisateur de Google+, un moteur de recherche sur Google+ et un Badge avec les statistiques.

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

Google+ Partagez le Web comme vous le vivez


Les Gadgets

  • Moteur de recherche sur Google+

Gadget Blogger - Moteur de Recherche sur Google+google-plus-search-b.xml

Ajouter ce Gadget à Blogger


  • Un Badge avec les Statistiques Google+

Gadget Blogger - Statistiques Google+google-plus-statistics-b.xml

Ajouter ce Gadget à Blogger


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

Gadget Blogger - Le Flux RSS d'un utilisateur de Google+google-plus-feed-b.xml

Ajouter ce Gadget à Blogger



Ajouter le Gadget sur son Blog

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



Moteur de recherche sur Google+

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

Un Badge avec les Statistiques Google+

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

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

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

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

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




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

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


Les paramètres des Gadgets

  • Moteur de recherche sur Google+


PUSER : lien sur le texte Google+

Par exemple le profil Google+ d'un utilisateur : 

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

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




  • Un Badge avec les Statistiques Google+


GID : l'identifiant Google+ de l'utilisateur

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

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

115854656993758258488 est l'dentifiant de l'utilisateur

CCOL : #rrggbb couleur du conteneur, ou transparent




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


GID : l'identifiant Google+ de l'utilisateur

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

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

115854656993758258488 est l'dentifiant de l'utilisateur

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

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




Des exemples

Les Gadgets sur un modèle Picture Window

Gadgets Blogger pour Google+

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

Le Moteur de recherche



Mes Statistiques de Google+



Mon Flux sur Google+



Le Flux de Max Cutts sur Google+





Plus d'informations

Des Gadgets Google pour Google+

Un badge Google+ sur son Blog

Les Flux RSS

Les statistiques Google+

Gadget Google - Partager ses abonnements de Google Reader

Des Gadgets Blogger pour vos Albums de Google+

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

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

2011/05/09

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

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

Un Gadget Blogger pour insérer le lecteur Dewplayer. Il permet de visionner une vidéo Flash (*.flv)

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

Le Gadget

  • Lecteur Dewtube

Gadget Blogger - Lecteur Dewtubedewtube-b.xml

Ajouter ce Gadget à Blogger



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 :

Video Bad Boy



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é

2011/05/02

Lecteur intégrable pour afficher une video Facebook

Lecteur intégrable pour afficher une video Facebook

Un Gadget Blogger pour insérer une vidéo de Facebook

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

Le Gadget


Lecteur intégrable pour video Facebookfacebook-video-player-b.xml

Ajouter ce Gadget à Blogger



Ajouter le Gadget sur son Blog

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

Lecteur Video

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




Les paramètres du Gadget

  • Lecteur Video


ID : identifiant de la video

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

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

3701337574015 est l'identifiant de la video

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

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




Caractéristiques du gadget

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


Des exemples

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




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









Plus d'informations

Le site de Facebook

Un Gadget Google pour afficher une vidéo de Facebook

Le lecteur Dewtube pour afficher une video *.flv

Afficher des animations en Flash avec un lecteur standard

Videos de YouTube en haute qualité

Les vignettes d'un Album de Facebook sur son Blog

D'autres Gadgets pour son Site ou son Blog

2011/04/30

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

Des lecteurs simples pour jouer un fichier mp3 sur son Blog

En utilisant un Gadget Blogger, il devient très simple de jouer un son (*.mp3) sur son Blog.

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

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


Les Gadgets


Dewplayer - lecteur simpledewplayer-b.xml




Dewplayer - lecteur avec contrôle du volumedewplayer-vol-b.xml



  • Lecteur Dewplayer avec lecture de plusieurs fichiers son

Dewplayer - lecteur avec lecture de plusieurs fichiers sondewplayer-multi-b.xml



  • Lecteur Google audio de Gmail

Google audio player (Gmail)google-audio-b.xml



  • Lecteur Google audio de Google Reader

Google audio player (Google Reader)google-audio-step-b.xml




Ajouter le Gadget sur son Blog

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

Lecteur Dewplayer

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

Lecteur Dewplayer avec contrôle du volume

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

Lecteur Dewplayer avec lecture de plusieurs fichiers

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

Lecteur Google audio (Gmail)

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

Lecteur Google audio (Google Reader)

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




Les paramètres des Gadgets

  • Lecteur Dewplayer


MP3 : url du fichier *.mp3 à jouer

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

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


  • Lecteur Dewplayer avec contrôle du volume


MP3 : url du fichier *.mp3 à jouer

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

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


  • Lecteur Dewplayer avec lecture de plusieurs fichiers


MP3S : url des fichiers *.mp3 à jouer

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

Exemple : son1.mp3%7Cson2.mp3

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

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


  • Lecteur Google audio (Gmail)


MP3 : url du fichier *.mp3 à jouer

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

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


  • Lecteur Google audio (Google Reader)


MP3 : url du fichier *.mp3 à jouer

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

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




Les caractéristiques des gadgets

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


Des exemples

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
















Plus d'informations

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

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

Dewplayer, le site

Des Gadgets Google pour insérer le lecteur Dewplayer

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

Un Gadget Blogger pour insérer une image sonore

Un Gadget Google pour insérer une image sonore

Fichiers joints et Podcasting avec Blogger

2011/04/01

Afficher son blog avec les vues dynamiques

Afficher son blog avec les vues dynamiques

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

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


La vue dynamique de son Blog


http://NOMDUBLOG.blogspot.com/view




Activer la vue dynamique

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

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


La vue barre de défilement (sidebar)


Vue dynamique - sidebar



La vue planche d'images (flipcard)


vue dynamique - flipcard



La vue mosaïque (mosaic)


Vue dynamique - mosaic



La vue instantané (snapshot)


Vue dynamique - snapshot



La vue ruban temporel (timeslide)


Vue dynamique - timeslide



La vue magazine


Vue dynamique - magazine



La vue classique (classic)


Vue dynamique - 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.

2011/03/20

Configurer le Gadget Suivre par Mail

Configurer le Gadget Suivre par Mail

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

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

Gadget Blogger : 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.

Suivre le Blog par e-mail


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

Formulaire de confirmation Feedburner



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 : 

Formulaire de confirmation Feedburner



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

2011/02/27

Afficher une feuille Excel sur son Blog - Google Viewer

Afficher une feuille Excel sur son Blog - Google Viewer

Le lecteur de document de Google, Google Viewer permet de visionner des fichiers *.pdf, *.tif et *.ppt. Depuis le 18 février 2011, le lecteur de Google peut afficher 12 formats supplémentaires. Il est désormais possible d'afficher un fichier *.psd ainsi que les fichiers Excel, *.xls et *.xlsx.

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

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


Afficher un fichier Adobe Photoshop

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


Adresse du fichier *.psd

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

Code iframe pour intégrer le lecteur

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




Le résultat




Le cas d'une feuille Excel

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


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



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

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 :

Publier en tant que page Web


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

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

Code du Google Web Elements

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



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




Une astuce

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



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

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

Code du iframe

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

Plage à afficher

Cellules A1 à B17 : range=A1%3AB17




Le Résultat

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



Plus d'informations

Le Blog de Google Docs

Google Drive et Blogger - Améliorer son Blog

Les Google Web Elements

Google Viewer

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

Fichiers joints et Podcasting avec Blogger

2011/02/22

Les derniers messages d'un Blog sous forme de Diaporama

Les derniers messages d'un Blog sous forme de Diaporama

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

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


Les deux variantes du Gadget

  • Affichage de l'image à gauche du texte

Gadget Blogger - Diaporama derniers messageslast-post-slideshow-b.xml

Ajouter ce Gadget à Blogger


  • Version verticale, image centrée en haut du gadget

Gadget Blogger - Diaporama derniers messageslast-post-slideshow-v-b.xml

Ajouter ce Gadget à Blogger



Ajouter le Gadget sur son Blog

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

Image à gauche

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

Version verticale, image centrée en haut du gadget

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




Les paramètres des Gadgets

  • Image à gauche


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

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

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

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

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

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

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

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

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

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

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

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



  • Version verticale, image centrée en haut du gadget


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

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

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

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

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

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

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

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

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

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

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

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



Les caractéristiques des gadgets

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


Des exemples

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

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






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






Gadget Google ou Gadget Blogger

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


Plus d'informations

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

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

Diaporama Pinterest avec un Gadget Blogger

Diaporama Picasa avec un Gadget Blogger

Diaporama Photobucket avec un Gadget Blogger

Diaporama Flickr avec un Gadget Blogger

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

Afficher des Diaporamas sur Google Sites

Des Gadgets pour son Blog

2011/02/19

Gadget Blogger pour afficher un Diaporama Flickr

Gadget Blogger pour afficher un Diaporama Flickr

Les Gadgets Blogger permettent d'afficher un Diaporama d'un Photostream (ensemble d'images) d'un utilisateur de Flickr.

Les Gadgets Blogger permettent d'afficher un Diaporama de toutes les images d'un utilisateur (Photostream) de Flickr. 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. Ensemble d'images d'un utilisateur

Gadget Blogger - Diaporama Flickrflickr-ph-slideshow-simple-b.xml



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


Gadget Blogger - Diaporama Flickrflickr-ph-slideshow-b.xml



  • Avec un titre et les légendes des photos. Ensemble d'images sélectionnées par des tags


Gadget Blogger - Diaporama Flickrflickr-tg-slideshow-b.xml




Ajouter le Gadget sur son Blog

Par Présentation / Gadget personnalisé. Saisir l'URL du gadget à ajouter (sous la forme http://...) :



Sans titre, ensemble d'images d'un utilisateur

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/flickr-ph-slideshow-simple-b.xml

Avec titre et légendes, ensemble d'images d'un utilisateur

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/flickr-ph-slideshow-b.xml

Avec titre et légendes, ensemble d'images sélectionnées par tags

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/flickr-tg-slideshow-b.xml




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

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


Les paramètres des Gadgets

  • Sans titre, ensemble d'images d'un utilisateur (Photostream)


UID : l'identifiant de l'utilisateur.

Ouvrir le compte Flickr, afficher le Photostream et noter l'URL, par exemple : https://www.flickr.com/photos/prac53
prac53 : est le nom de l'utilisateur
Le site idGettr donne l'identifiant Flickr d'un utilisateur, à partir du nom de celui-ci.

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 d'un utilisateur (Photostream)


UID : l'identifiant de l'utilisateur.

Ouvrir le compte Flickr, afficher le Photostream et noter l'URL, par exemple : https://www.flickr.com/photos/prac53
prac53 : est le nom de l'utilisateur
Le site idGettr donne l'identifiant Flickr d'un utilisateur, à partir du nom de celui-ci.

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.





  • Avec titre et légendes, ensemble d'images sélecxtionnées par tags


TGS : liste de tags séparés par une virgule.

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.






Les caractéristiques des gadgets

  • Le flux RSS de Flickr est limité à 20 images
  • Flickr a supprimé le Flux RSS d'un Album fin 2013. Pour afficher le diaporama d'un Album de Flickr, il faut insérer un tag iframe dans le html du Blog
  • 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.

  • Les 20 dernières photos avec les tags switzerland et wine




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

5 secondes pour ajouter un diaporama de Flickr

Diaporama des derniers messages avec un gadget Blogger

Diaporama des dernières images de Pinterest 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


Rechercher sur le Blog de Prac avec Google CSE