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/01/28

Gadget Blogger pour afficher un Diaporama de Picasa

Gadget Blogger pour afficher un Diaporama de Picasa

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.

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

Gadget Blogger - Diaporama Picasapicasa-slideshow-simple-b.xml




  • Avec un titre et les légendes des photos

Gadget Blogger - Diaporama Picasapicasa-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://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/picasa-slideshow-simple-b.xml

Avec titre et légendes

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/picasa-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


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 :

Diaporama - Domaines Viticoles Suisse



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

Des Gadgets Blogger pour vos Albums de Google+

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

Recadrer automatiquement les images de son Blog

Des Gadgets pour son Blog

2011/01/18

Le Gadget Blogger pour afficher les Vignettes de Photobucket

Le Gadget Blogger pour afficher les Vignettes de Photobucket

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

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

Gadget Blogger - Vignettes Photobucket


Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter ce Gadget à 
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




Gadget Blogger - Vignettes Photobucket
photobucket-thumb-rssfeed.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 du Gadget

Gadget Blogger - Vignettes 
photobucket



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

Vignettes Photobucket


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

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

Gadget Blogger - Les vignettes de Pinterest

D'autres Gadget pour son Site ou son Blog


2011/01/14

Le Gadget Blogger pour afficher les Vignettes de Flickr

Le Gadget Blogger pour afficher les Vignettes de Flickr

Un Gadget Blogger pour afficher les vignettes d'un album Flickr (Photoset).

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

Gadget Blogger - Vignettes Flickr


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

Saisir l'URL du gadget à ajouter (sous la forme http://...) :


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




Gadget Blogger - Vignettes Flickr
flickr-thumbnails-b.xml



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

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


Les paramètres du Gadget

Gadget Blogger - Vignettes Flickr



SET : Identifiant de l'album (photoset) à afficher.

Ouvrir l'album, l'adresse est de cette forme : 

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

72157609076361497 est l'identifiant de l'album.

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 de l'album Swiss Wineries. Vignettes de 36 pixels, avec ombre portée, sur un modèle Picture Window : 

Vignettes Flickr

Un autre exemple

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

Les vignettes de l'album Swiss Wineries. Vignettes de 72 pixels, avec ombre portée.



Gadget Google ou Gadget Blogger

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


Mentions légales

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


Plus d'informations

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

Un Gadget Blogger pour afficher un diaporama de Flickr

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

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

Un Gadget Blogger pour afficher les vignettes d'un Album de Google+

Un Gadget Google pour afficher les vignettes d'un Album de Google+

Gadget Blogger - Les vignettes de Pinterest

D'autres Gadgets pour son Site ou son Blog


2011/01/12

Le Gadger Blogger pour afficher les Vignettes de Picasa Albums Web

Le Gadger Blogger pour afficher les Vignettes de Picasa Albums Web

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.

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

Gadget Blogger - Vignettes Picasa


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



Gadget Blogger - Vignettes Picasapicasa-album-photostream.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 du Gadget

Gadget Blogger - Vignettes Picasa



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 : 

Vignettes Picasa


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 vignettes d'un Album de Facebook

Gadget Blogger - Les vignettes de Pinterest

Recadrer automatiquement les images de son Blog

D'autres Gadgets pour son Site ou son Blog

2011/01/11

Le Gadget Blogger pour afficher les Commentaires récents

Le Gadget Blogger pour afficher les Commentaires récents

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


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.

Gagdet Blogger - Commentaires récents


Ajouter le Gadget, avec ce bouton Add to Blogger

Ajouter ce Gadget à 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/commentaires-recents.xml



Gadget Blogger - Commentaires récentscommentaires-recents.xml



Les paramètres du Gadget

Paramètres - Commentaires récents



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)

TOP : Ouvrir les liens dans la même fenêtre (Oui ou Non, par défaut Non)

ALG : Alignement du texte (left ou justify)

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 : 

Blog de Prac - Commentaires

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




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


Versions et mentions légales

Ancienne version : commentaires-recents.xml. Hébergement sur IG Gadget, obsolet

Gadgets fournis par Google.


Une alternative : partager ses abonnements de Google Reader

Google Reader permet de créer un thème avec un Flux RSS. En s'abonnant au Flux des Commentaires d'un Blog, il est possible de partager ses abonnements.

Par exemple, le thème suivant affiche les derniers commentaires de mes Blogs, en utilisant un Gadget Google : 


Ajouter ce gadget à Google


Plus d'informations

Le Gadget Blogger commentaires récents, en version anglaise

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

Un Gadget Google pour partager ses abonnements de Google Reader

Des Gadgets pour son Blog

Afficher un diaporama avec les derniers messages d'un Blog

2011/01/06

Un mur d'images avec une galerie en xml

Un mur d'images avec une galerie en xml

Un Diaporama en 3D sous la forme d'un mur d'images avec Tiltviewer

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


<iframe
style="width: 560px; height: 430px;"
src="
http://www.gmodules.com/gadgets/ifr?
url=http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml

&up_XML=URL du fichier xml decrivant la galerie
&up_SWF=URL du lecteur Flash (tiltviewer.swf)

Important : Les 2 fichiers *.xml et *.swf doivent être hébergés sur le même Domaine Internet

&up_TIT=titre du diaporama
&up_LNK=lien sur le titre du diaporama

&up_SW=largeur du diaporama
&up_SH=hauteur du diaporama
&up_MAX=la plus grande dimension de la plus grande image du diaporama

&up_TCOL=%23rrggbb couleur du titre
&up_BBOCOL=%23rrggbb couleur externe du fond
&up_BBICOL=%23rrggbb couleur interne du fond

&up_PFCOL=%23rrggbb couleur du cadre des images
&up_PBCOL=%23rrggbb couleur du verso des images

&up_BFCOL=%23rrggbb couleur de l'entourage
&up_BDCOL=%23rrggbb couleur de la bordure
&up_CCOL=%23rrggbb couleur du conteneur
"
allowTransparency="true"
frameborder="0"
scrolling="no">
</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




Ajouter ce gadget a Google


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


Rechercher sur le Blog de Prac avec Google CSE