Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

vendredi 11 septembre 2009

Lire la Suite... suite

Un cadeau pour les 10 ans de Blogger

Intégrer le mécanisme Lire la Suite demandait plusieurs modifications importantes du modèle.

Blogger vient d'intégrer ce mécanisme dans l'éditeur de message.


Pour activer l'insertion d'un saut

- Utiliser Blogger in Draft ou avec la version classique de Blogger, le nouvel éditeur : Outil / Insérer un saut

- Plus simplement, avec l'onglet Modifier le code HTML, il suffit d'insérer le commentaire HTML


<!-- more -->




Pour définir le texte du saut

- Paramètres / Mise en page / Eléments de la page

- Messages du Blog / Modifier


Texte du lien de la page de messages




Problème connu

Depuis janvier 2010, les insertions d'objets Flash (code embed / object) placées avant le "lire la suite..." ne sont pas affichées, dans la version courte du message.

S'agissant de Youtube, il est possible d'utiliser un gadget ou, plus simplement de remplacer le code fournit par YouTube par un tag iframe (à insérer dans le html du message).

Le code fournit par YouTube :


<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>



Le même code dans un iframe :


<iframe src="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" style="320px; height: 265px;" allowTransparency="true" frameborder="0" scrolling="no">Remplacer le code object par un iframe</iframe>




Plus d'informations

- L'article de l'aide de Blogger

- Couper le message : les erreurs fréquentes

mercredi 2 septembre 2009

modération des commentaires (message d'administration)

Bonjour à tous,

En raison des pourriels incessants quoique japonais, j'ai pris la décision (pénible pour vous comme pour les administrateurs...) d'activer la modération des commentaires en attendant une possible intervention de Blogger pour assainir leur truc.

Merci de bien vouloir nous excuser pour ces désagréments. Je crois que vous pouvez éviter la modération de vos commentaires si vous vous abonnez au blog, bouton 'devenir un abonné fidèle' dans la barre supérieure "Blogger".

a+
BB.

mercredi 25 février 2009

Geolocaliser les messages du blog

Le Geotagging pour Blogger

Même si l'insertion d'une carte dans les messages du blog reste une opération simple, il est fastidieux d'ajouter une carte après chaque message si l'on désire géolocaliser son message.

Blogger in draft vient à notre secours en permettant de géolocaliser le message par un simple lien vers une carte de Google Maps.


Modifier le modèle du Blog

S'enregistrer sous Blogger in draft. Cette version Brouillon, ne réalise pas les opérations suivantes qu'il faut (encore) effectuer soi-même.

1 - Effectuer une sauvegarde du modèle, en cliquant sur Télécharger le modèle dans son intégralité.

2 - Modifier le modèle pour enregistrer un espace de noms supplémentaire, l'espace georss



Paramètres / Mise en Page / Modifier le code HTML



Ajouter l'espace de noms georss



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:georss='http://www.georss.org/georss'>



3 - Cliquer sur Développer des modèles de gadgets

4 - Rechercher le pied de message :




<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url'
rel='bookmark' title='permanent link'>
<abbr class='published'
expr:title='data:post.timestampISO8601'>
<data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span

*** INSERER ICI ***

<span class='post-comment-link'>
...



5 - Avant le lien des commentaires (post-comment-link) insérer




<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'>
<data:post.location.name/></a>
</b:if>
</b:if>
<br/>
</span>
6 - Sauver le modèle


Le geotagging des messages


Blogger in draft, geotagging

A partir de l'article de référence, voyons comment géolocaliser un message.

1 - Rester sous la version draft (brouillon), et éditer le message

2 - L'éditeur de message comporte une nouvelle option : Pays/territoire, ajouter un lieu (onglet edition HTML)

Ajouter un lieu

3 - Saisir le lieu géographique en effectuant une recherche, de la même manière que dans la grille de recherche de Google Maps

4 - Effectuer les règlages détaillés (centrage, type de carte, niveau de zoom) et modifier éventuellement le libellé qui apparaîtra en regard du texte Pays/territoire

5 - Enregistrer. On a ainsi saisi la latitude et la longitude du point géographique à associer au message

Pays/territoire


Le résultat

Chaque message géolocalisé va comporter la mention Pays/Territoire et l'indication du lieu géographique.

Le code source du blog comporte un lien vers Google Maps avec les paramètres suivants (exemple, Rolle, Suisse) :


http://maps.google.com/maps?q=Rolle, Suisse@46.4707,6.3360&z=10



Le lien va s'ouvrir dans une fenêtre indépendante, comme dans l'exemple ci-dessous (le pied du message géolocalisé) :

Pays/territoire : Rolle, Suisse

Blogger va modifier les Flux RSS et Atom du blog et ajouter les tags :


<thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">
0
</thr:total>
<georss:point>lat long</georss:point>



Ces tags permettront aux agrégateurs de flux d'associer le message à sa position géographique. Nous allons voir que cela permet de réaliser l'opération inverse, associer un point géographique à un message du blog.




Verifier le nouveau flux avec Google Maps

Le nouveau flux du blog contenant maintenant les coordonnées des points géographiques, nous pouvons l'importer sur une carte de Google Maps

Ouvrir une carte, et cliquer sur Modifier. Choisir l'option Importer et saisir l'adresse du flux RSS du blog :


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



La carte doit comporter tous les géotags définis dans chaque message. Le marqueur donne accès à l'article correspondant du blog.
Nous passons ainsi de la carte sur le blog, à l'inverse, le blog sur la carte !!

Un exemple avec la carte des Découvertes des Liens du Vin :



Limitation

Lorqu'un message est géolocalisé selon la méthode décrite ci-dessus, la géolocalisation ne peut pas être supprimée. Pour l'enlever du message il faut supprimer celui-ci et recréer le message sans la géolocalisation.


Un gadget pour créer le blog sur la carte de façon dynamique

Pour générer une carte Google Maps, avec tous les articles geocodés, Blogger propose le gadget :


http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml



L'insertion de ce gadget se fait avec :


Paramètres / Mise en Page / Eléments de la page / Ajouter gadget



Choisir l'option Ajouter votre propre (gadget) et saisir l'adresse URL du gadget.

Pour ajouter le gadget dans un message, suivre les indications de l'article du blog d'aide.

Pour configurer le gadget, saisir l'adresse du flux RSS du blog


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



Une fois le champ Blog's geoRSS feed URL renseigné, cliquer sur Mettre à jour, saisir à nouveau l'adresse du flux et ajuster la carte

Gadget - geotagging

La carte générée par le gadget positionne les marqueurs en fonction de la géolocalisation des messages du blog.
La bulle d'information du marqueur permet d'ouvrir une fenêtre indépendante avec le message intégral.






Plus d'informations

L'article de référence, Blogger in draft, Geotagging

Placer une carte personnalisée dans le message du blog

Géolocaliser rapidement une adresse avec un Google Web Elements

Insérer une carte sur Google Sites

Les vignes vues du ciel

mardi 30 décembre 2008

Videos de YouTube en Haute Qualite


Pour insérer un lecteur YouTube, il suffit d'insérer un tag iframe, selon les indications données par Youtube. Les paramètres du lecteur peuvent être spécifiés, selon les indications de la documentation. L'insertion par un tag iframe, permet la lecture d'une video sur une tablette (iPad) ne supportant pas le format Flash.

Il est possible d'utiliser un Gadget Google. Le code du gadget peut être placé dans le html du message, ou dans un gadget HTML / Javascript. Les paramètres peuvent être précisés simplement, selon les indications données sur la page du Gadget YouTube.

Par exemple, j ai inséré ci-dessous la vidéo d'un dégustation du Château de Châtagneréaz Grand Cru 2010. Le lecteur est clair, le curseur blanc, la taille 425 x 264, la qualité haute et les contrôles ne s'affichent pas pendant le visionnage.



Ajouter ce Gadget à Google


Le code html à insérer (à saisir sans espaces ni retour à la ligne) : 


<iframe style="width: 430px; height: 270px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/youtube-player.xml
&up_Video=pIeXrj86F3w
&up_Taille=425 x 264
&up_Qualite=HQ720
&up_Theme=Clair
&up_Curseur=Blanc
&up_Plein=Oui
&up_Videosim=Non
&up_Demarrage=Non
&up_Controle=Sans
&up_BCOL=%23558866
&up_CCOL=%23eeeecc"
allowTransparency="true" frameborder="0" scrolling="no">
</iframe>



YouTube - Dégustation Châtagneréaz





Important :  mise à jour d'avril 2012

Les informations ci-dessous sont obsolètes suite à différentes mises à jour de l'API Youtube





Depuis fin 2008, YouTube permet d'enregistrer et de visionner des vidéos en Haute Qualité.

Les formats disponibles :

Les formats YouTube

Visionner une vidéo en Haute Qualité

Pour visionner en Haute Qualité la Vidéo : Dance - Where the Hell is Matt?(2008), il faut indiquer l'adresse normale d'une vidéo YouTube, suivie du paramètre fmt=22 :



Insérer une vidéo en Haute Qualité sur son Blog

YouTube fournit le code suivant à insérer sur son blog (à insérer sans retour à la ligne) :


<object width="445" height="284">
<param name="movie"
value="http://www.youtube.com/v/zlfKdbWwruY
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/zlfKdbWwruY
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="445" height="284">
</embed>
</object>



L'ajout du paramètres fmt=22 ne permet pas d'insérer la version Haute Qualité de la vidéo sur son blog !
Pour celà il faut ajouter un paramètre caché : ap, avec le paramètre fmt=22 URLEncodé . Ce qui donne :


ap=%2526fmt%3D22




Le code à insérer sur le blog devient donc (toujours sans retour à la ligne) :


<object width="445" height="284">
<param name="movie"
value="http://www.youtube.com/v/zlfKdbWwruY
&ap=%2526fmt%3D22

&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/zlfKdbWwruY
&ap=%2526fmt%3D22
&hl=fr
&fs=1
&color1=0x234900&color2=0x4e9e00&border=1"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="445" height="284">
</embed>
</object>



On obtient le résultat suivant (lecteur 356 x 228, bordure verte, texte français) : 







En cas de problèmes

YouTube affiche le message suivant : Désolé, cette vidéo n'est plus disponible (We're sorry, this video is no longer available) si la vidéo n'est pas disponible dans le format indiqué ou si la bande passante est trop faible pour le niveau de qualité demandé. Certains pare-feux limitent également le visionnage en Haute Qualité.


Insérer la Video avec un tag iframe

YouTube autorise depuis juillet 2010 l'insertion d'une video avec un simple tag iframe. L'exemple ci-dessus donne le code html :


<iframe width="445" height="284"
src="http://www.youtube.com/v/zlfKdbWwruY&ap=%2526fmt%3D22&hl=fr&fs=1&color1=0x234900&color2=0x4e9e00&border=1" frameborder="0">Video de youtube</iframe>




Un gadget pour insérer une Video YouTube

Google a développé une API comportant un lecteur Flash. Le gadget suivant utilise ce lecteur et évite l'insertion des codes <object> et <embed> pour afficher un lecteur YouTube sur son blog.

youtube-player.xml



Insérer le Gadget Google lecteur YouTube

Blogger permet facilement l'ajout d'un Gadget dans les éléments de la page : Mise en page / Eléments de la page / Ajouter Gadget / Ajouter votre propre (... Gadget) et saisir l'Url du Gadget à insérer.

Rien n'est prévu pour ajouter un Gadget dans le corps du message. Il faut utiliser la technique décrite dans un message précédent.

Les paramètres du Gadget :


Video : Le code de la Video YouTube, zlfKdbWwruY dans l'exemple ci-dessus
Taille : En pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (223 x 142 force Bordure à non)
Couleurs : gris blanc, noir gris, bleu gris, bleu, vert, orange, rose, violet, rouge
Bordure : oui ou non
Recherche : Grille de recherche YouTube, oui ou non (oui n'est valide que si Videosim est à oui)
Videosim : Videos similaires à la fin de la vidéo, oui ou non
Démarrage : Automatique lors de l'affichage de la page, oui ou non
Qualite : Normal, Haute, Haute (iPod), Très Haute
Plein : oui ou non, autoriser l'affichage plein écran
BoxBcol : Code #rrggbb couleur du fond



Note : Indiquer une taille pour le gadget en fonction de la taille choisie pour la Vidéo (par défaut, 860 x 520)

La comparaison




YouTube - Qualité Normale



YouTube - Qualité Très haute


Plus d'informations

Le Player de YouTube dans un message du Blog

Des Gadgets pour son Blog

Les Actualités sur YouTube, avec un Google Web Elements

Utiliser Le lecteur YouTube avec Google Sites

dimanche 23 novembre 2008

Encadrer ses textes


Un cadre pour ses textes

Avec un peu de CSS (Cascading Style Sheets) il est possible d'encadrer ses textes avec des blocs div


Une boîte de texte

Nous allons créer une boîte de texte, avec un bloc div comprenant 3 blocs encastrés (le titre, le contenu et le pied).

Boîte de texte


Le code html


<div class="textbox">
<div class="textboxtop">Le titre</div>
<div class="textboxcontent">Le contenu</div>
<div class="textboxbottom">Le pied</div>
</div>





Le style CSS

A configurer selon l'aspect que l'on veut donner à sa boîte de texte. L'ordre border: style size color définit le cadre de la boîte. Les autres instructions se comprennent d'elles-mêmes.


.textbox
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
border: solid 2px #de7008;
}

.textboxcontent
{
font-size: 0.75em;
padding: 10px;
}

.textboxtop
{
padding: 5px;
background-color: #f2e9ca;
}

.textboxbottom
{
padding: 5px;
background-color: #f2e9ca;
}




Le résultat

pour centrer la boîte l'encadrer par <div style="text-align: center;"> ... </div>



Viti-Vino *** Liens du Vin ***

Le Blog des Liens du Vin. Le site pour apprécier les vins suisses et découvrir les vins du monde. L'historique du site réalisé avec Google Page Creator (GPC). Les outils Google et le cybermarketing





Des coins arrondis

L'arrondi est réalisé par une image. Le site Cornershop permet de les réaliser en ligne. Définir la couleur de la boîte ainsi que la couleur de la page. Choisir un arrondi de 10 pixels et Transparent = None.

Les coins arrondis - CornerShop

Sauvergarder les 4 images *.gif obtenues. Elles peuvent être hébergées sur Picasa.


La structure des blocs

Le bloc principal comprend 3 blocs div encastrés. Le contenu viendra dans les blocs marqués en jaune.

Coins arrondis - boîte de texte


Le code html


<div class="box">
<div class="boxtop"><div>Le titre</div></div>
<div class="boxcontent">Le contenu</div>
<div class="boxbottom"><div>Le pied</div></div>
</div>





Le style CSS

Il faut reporter dans les classes CSS boxtop, boxtop div, boxbottom et boxbottom div les 4 images *.gif des coins arrondis.


.box
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
}

.boxtop
{
background: url(URL/ne.gif) no-repeat right top;
}

.boxtop div
{
background: url(URL/nw.gif) no-repeat left top;
height: 10px;
padding: 5px;
}

.boxbottom
{
background: url(URL/se.gif) no-repeat right bottom;
}

.boxbottom div
{
background: url(URL/sw.gif) no-repeat left bottom;
height: 10px;
padding: 5px;
}

.boxcontent
{
font-size: 0.75em;
padding: 10px;
}





Le résultat


Annuaire du Vin

Annuaire du Vin avec Google Sites. Les outils Google et le cybermarketing duVin.



Faire flotter sa boîte de texte

Une boîte de texte flottante est un bloc div affiché à gauche ou à droite d'un bloc de texte qui s'enroule autour du bloc.


Un exemple

*** Flux Media RSS ***

Des gadgets pour afficher un Diaporama à partir du Flux Media RSS de Picasa, Photobucket, Flickr et Yahoo News. Incorporer ces diaporamas dans le corps du message - l'article du blog d'aide pour Blogger


Le bloc div ci-contre est flottant à gauche. Il suffit d'ajouter dans le style du bloc style="float:left;". La marge entre le bloc flottant et le texte (marge de droite pour un bloc flottant à gauche) se définit dans le style du bloc flottant.
Pour stopper le flottement, créer un paragraphe avec style="clear:both;".
Si le texte en regard du bloc flottant est plus long que la hauteur du bloc, il s'écoule sous le bloc. Le bloc encadré donne ainsi l'impression de flotter sur le texte.



Modifier le style du blog

Pour incorporer ces nouvelles clauses de style dans le blog, 3 façons

1. Créer une feuille de style externe, qu'il faut héberger ailleurs que chez Blogger, et insérer l'appel de cette feuille entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)


<link href="URL/mon_style.css" type="text/css" rel="stylesheet">



2. Modifier le style du blog et créer une clause style entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)


<style type="text/css">
les clauses de style
</style>



3. Si le style ne s'applique qu'à un seul message, il est possible d'appliquer la clause de style en utilisant un petit code javascript qui va charger le style lors de l'affichage du message. C'est la méthode retenue pour ce billet, j'ai chargé la feuille de style externe avec ce petit javascript :


<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'URL/mon_style.css';
cssNode.media = 'screen';
cssNode.title = 'une feuille de style pour 1 post';
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>




Ce script peut être placé au debut du message. Il faut saisir le code sans retour à la ligne (sinon Blogger incorpore la balise <br/> )

Plus d'informations

Créer ses coins arrondis en ligne avec CornerShop

Arrondir ses Photos en ligne avec RoundPic

Les codes couleurs en ligne avec ColorSchemer

Un style pour un seul message, une explication sur le Blog Viti-Vino

Encadrer ses photos, quelques astuces sur le Blog d'Aide pour Blogger


mercredi 19 novembre 2008

Placer des Gadgets dans les éléments de la page

Eléments de la page

Selon le template Blogger utilisé, les éléments de la page ne comportent pas de gadgets (anciennement appelés widgets) dans l'en-tête ou avant et après les messages du blog.

Eléments de la page

Ajouter des gadgets dans l'en-tête

1. Paramètres / Mise en Page / Modifier le code HTML

2. Avant toute correction, faire une copie du template en cliquant sur le lien Télécharger le modèle dans son intégralité

3. Cocher l'option Développer des modèles de gadget

4. Rechercher dans le code html :



<b:section class='header' id='header' showaddelement='no'>



5. Remplacer par :



<b:section class='header' id='header' showaddelement='yes'>



6. Les nouveaux éléments de la page :

Gadgets dans l'en-tête


Ajouter des gadgets avant ou après les messages du blog

1. Rechercher dans le code html :



<b:section class='main' id='main' showaddelement='no'>



2. Remplacer par :



<b:section class='main' id='main' showaddelement='yes'>



3. Les nouveaux éléments de la page :

Gadgets avant ou après les messages


Les attributs optionnels



<b:section... maxwidgets='n' growth='vertical' ou growth='horizontal' ...>

maxwidgets : n est le nombre maximum de gadgets acceptés dans la section. Pas de limite si l'attribut ne figure pas

growth : Indique comment sont placés les gadgets, l'un sous l'autre (vertical - la valeur par défaut) ou l'un à côté de l'autre (horizontal)



Plus d'informations

Placer des Gadgets Google dans le corps du message blog. Un gadget Blogger (widget) peut contenir un Gadget Google.

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Les applications Google sur son Blog, avec les Google Web Elements.

L'aide de Blogger : Balises d'éléments de page pour la fonctionnalité de mise en page


samedi 15 novembre 2008

Inserer un Gadget Google dans le corps du message

Gadget Google

Si Blogger permet facilement l'ajout de Gadget dans les éléments de la page, rien n'est prévu pour ajouter un gadget dans le corps du message.

Un Gadget Google est une page xml dont le code exécutable est hébergé par Google. Ce code reçoit les paramètres du Gadget définis par l'utilisateur.

Sur la page HTML qui contient le gadget, celui-ci est encapsulé dans une balise <iframe> dont l'attribut src (source) donne l'adresse du Gadget avec ses paramètres.

Cette encapsulation est réalisée par Blogger lorsque l'utilisateur ajoute le Gadget dans les éléments de la page. Certaines pages encapsulent le gadget avec un script Javascript.

Malheureusement cette méthode est déconseillée avec Blogger, l'insertion du code entre les balises <script> et </script> devant être réalisée sans retour à la ligne (sinon Blogger insère des balises <br/> qui ne sont pas valides en Javascript - pour le cas où l'option Convertir les sauts de ligne est à Oui).


Où trouver des Gadgets Google

Le répertoire de Google en recense plus de 50'000 (état fin 2008). A la même date l'Unofficial Google Modules en compte plus de 10'000.

Sur un Blog ou une page Web visitée, un Gadget est généralement suivi du bouton Ajouter à Google (Add to Google) :

Ajouter à Google


Un exemple

A la suite de l'article Un Diaporama pour Blogger, j'ai développé un Gadget Google qui regroupe tout le code nécessaire à l'affichage d'un Diaporama dans le corps du message.

Admettons que l'on veuille insérer dans le corps du message le gadget : Diaporama Picasa. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.


Obtenir le code du gadget

1. Ouvrir iGoogle (Mon Google) et cliquer sur Ajouter des Modules, puis sur Ajouter un flux ou un gadget et saisir l'adresse du gadget :


http://URL/nomdugadget.xml



Ajouter un gadget
ou cliquer sur le bouton Ajouter à Google si vous vous trouvez sur une page qui contient le gadget désiré.

Ajouter à Google

2. Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option à propos de ce gadget :

Barre de titre du gadget
A propos ... du gadget

3. Dans la rubrique Pour webmasters, choisir l'option Insérer ce gadget

Insérer ce gadget

4. Ajuster le gadget à la dimension désirée, ignorer les paramètres d'affichage, mais définir les paramètres du Gadget :

Paramètres d'affichage

Paramètres du gadget

5. Cliquer sur obtenir le code. On obtient un script javascript, avec les paramètres URL encodés :



<script src="hebergeur?url=adresse_gadget&amp;parametres ... parametres&amp;w=xxx&amp;h=yyy&amp;title=titre-gadget...output=js"></script>





hébergeur : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr

adresse_gadget : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml

paramètres ... paramètres : Les paramètres du Gadget, sous la forme de couple up_nom=valeur séparés par le caractère & (ampersand - et commercial) URL encodé par &amp;

w=xxx h=yyy : Les dimensions du Gadget, w pour width (largeur) et h pour height (hauteur).

&amp;title=titre-gadget...output=js : la fin de la source, à ignorer !




Convertir le script en <iframe>



<iframe src="hebergeur?url=adresse_gadget&amp;parametres ... parametres" width="xxx" height="yyy" allowTransparency="true" frameborder="0" scrolling="no"></iframe>





width="xxx" : La largeur du iframe

height="yyy" : la hauteur du iframe

allowTransparency="true" : La couleur de fond de la page hôte prime sur celle du iframe

frameborder="0" : pas de bord

scrolling="no" : pas d'ascenseurs




Le résultat

Intégrons cette iframe sur ce blog, avec un tag <div style="text-align: center;"> pour centrer le cadre (saisie sans retour à la ligne) :




<div style="text-align:center;"><iframe src="http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit
&url=http%3A%2F%2Fhosting.gmodules.com
%2Fig%2Fgadgets%2Ffile%2F108621208120033273647
%2Fpicasa-gadget-blog.xml
&up_File=http%3A%2F%2Fpicasaweb.google.fr
%2Fdata%2Ffeed%2Fbase
%2Fuser%2Fphilippe.chappuis
%2Falbumid
%2F5008507738518598193
%3Fkind%3Dphoto%26alt%3Drss
%26authkey%3D3wuzt3CsXf0%26hl%3Dfr
&up_Link=http%3A%2F%2Fwww.tendance9.com
&up_Titre=tendance9%20-%20light%20wine&up_Textcol=%23f00
&up_TextBcol=%23558866
&up_Bordercol=%23f00
&up_SlideBcol=%23eeeecc
&up_BoxBcol=%23558866
" height="342" width="398" allowTransparency="true" frameborder="0" scrolling="no">URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div>



Et nous obtenons le Diaporama :




Plus d'informations

Placer des Gadgets Blogger (widgets) dans les éléments de la page

Un container pour placer une animation Flash sur son Blog

Créer un Gadget Google

Un Diaporama pour Picasa, Photobucket, Flickr et Yahoo News (Media RSS)

Lire un Diaporama en Flash, pour oublier la balise <embed>

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Ajouter une carte Google Maps dans ses messages.

Ajouter des Gadgets iGoogle sur son Site


Copyright photos : tendance9 et Cave de Jolimont SA