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.




2008/12/26

Google Maps dans les messages du blog

Placer une carte personnalisée sur son blog

Une carte issue de Google Maps

Google Maps permet d'ajouter simplement une carte sur son blog, en fournissant le code d'un iframe à incorporer :


<iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ch/maps/ms?
hl=fr
&ie=UTF8
&msa=0
&msid=102376698569738400439.00000111d2005a39e06c2
&t=h
&s=AARTsJoERmiSUDc8L4YqP7WO7U9ZWdGQFw
&ll=46.461098,6.3950
&spn=0.020693,0.036455
&z=14
&output=embed">
</iframe>








Les paramètres du iframe peuvent être adaptés.



Une carte personnalisée

Il est possible de personnaliser une carte en utilisant les API de Google Maps. Malheureusement, il faut obtenir une clé API propre à son site ou son blog.

En insérant un Gadget Google, il n'est pas nécessaire d'obtenir une clé API. En suivant la technique décrite sur le Blog d'Aide pour Blogger, l'insertion d'une carte personnalisée est très simple. J'utilise le gadget suivant :



400 x 620 (max)

google-maps-api-blog.xml



Le résultat, la carte de Chamoson (Valais) :




Une carte statique



Une carte statique est l'image d'une carte. L'assistant de Google permet de créer rapidement une carte :


Chamoson Valais Suisse


Pour afficher une carte statique sur son blog, il faut indiquer la clé API de ce blog.

Plus d'informations

Géolocaliser les messages du blog. Le blog sur la carte.

Insérer une carte avec les Google Web Elements

Des gadgets pour son Blog.

Insérer un gadget dans le corps du message.

2008/12/21

Des gadgets pour son blog (2)

La suite de l'article Des Gadgets pour son Blog





Un Diaporama de
Photobucket, à partir du flux média RSS.

Il suffit d'indiquer l'URL du flux média comme valeur du paramètre File :


http://feed266.photobucket.com/albums/ii244/prac53/henri-de-villamont/feed.rss





Ajouter ce gadget à Google

photobucket-gadget.xml






Les News de Yahoo


Yahoo publie un Flux Media RSS avec les photos de ses News. Il suffit d'indiquer la catégorie désirée comme paramètre :




Ajouter ce gadget à Google

yahoo-news-gadget.xml






Un diaporama en flash de
Slide.com

A partir du code fournit par slide.com, conserver les valeurs des attributs data et value :


Data : http://widget-6d.slide.com/widgets/slideticker.swf

Value : cy=ms&il=1&channel=2738188573457868909&site=widget-6d.slide.com



Ce qui permet de définir le paramètre File du gadget :


http://widget-6d.slide.com/widgets/slideticker.swf?cy=ms&il=1&channel=2738188573457868909&site=widget-6d.slide.com






Ajouter ce gadget à Google


flash_slideshow.xml







Plus d'informations


La première partie de l'article (fichiers MP3 et Vidéos)

Insérer Un container pour placer une animation Flash sur son Blog

Les gadgets sur Google Sites

Créer son propre gadget

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

Insérer un gadget dans le corps du message

Les vignettes d'un album Picasa sur son Blog



© Copyright photos : Regis Columbo, Clos Domaines et Châteaux et Henri de Villamont SAS


Des gadgets pour son blog (1)

Quelques gadgets

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.

Blogger permet d'ajouter très simplement un gadget dans les éléments de la page (Paramètres / Mise en page / Eléments de la page / Ajouter un gadget).

Blogger propose une vingtaine de gadgets (liste de blog, diaporama, archives, conteneur pour javascript, etc...). Il est possible d'ajouter son propre gadget en utilisant le lien Ajouter votre propre (...gadget). Il suffit d'indiquer l'adresse URL du gadget.


Pour ajouter un gadget dans le corps du message, il faut insérer un tag iframe dans le code HTML du message. Le Blog d'aide pour Blogger donne toutes les indications nécessaires pour définir la source du iframe à partir de l'adresse du gadget.

Fichiers audio - Lecteur MP3



Le lecteur flash Dewplayer, un lecteur MP3 pour le Web :



Ajouter ce gadget à Google


flash_dewplayer.xml




MP3 Google Reader : un lecteur MP3 de Google (Flash), disponible à cette adresse :


https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf


Pour l'utiliser sur son blog, un simple Gadget Google suffit. Comme paramètre du gadget, donner l'adresse du fichier MP3, et la couleur du container : 


<iframe
src="http://www.gmodules.com/ig/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio.xml
&up_File=https://sites.google.com/site/annuairevin/files/carl_orff_carmina_o_fortuna.mp3&up_CCOL=%23f6f6f6
&up_FlashWidth=400&up_FlashHeight=27" style="width: 410px; height: 37px;"
allowTransparency="true" frameborder="0" scrolling="no">Google Audio Player</iframe>







google-audio_player.xml





ODEO : Un lecteur Flash.

Le gadget offre le choix entre 2 présentations (skin). Indiquer l'URL du fichier MP3 comme paramètre :








odeo-flash-player.xml





La video

En utilisant un lecteur flash, on peut incorporer une video sans utiliser les balises <object> et <embed>.

Un exemple avec Reuters, qui donne comme code :


<object type="application/x-shockwave-flash" data="http://static.reuters.com/resources/flash/include_video.swf?edition=US&videoId=94837" width="422" height="346"><param name="wmode" value="transparent" /><param name="movie" value="http://www.reuters.com/resources/flash/include_video.swf?edition=US&videoId=94837" /><embed src="http://www.reuters.com/resources/flash/include_video.swf?edition=US&videoId=94837" type="application/x-shockwave-flash" wmode="transparent" width="422" height="346"></embed></object>



L'attribut data , utilisé comme paramètre File du gadget suffit pour visionner la video :



Ajouter ce gadget à Google


flash_video.xml





Une video en format *.flv.

Le lecteur Flash Dewtube permet de lire une video flash :




Ajouter ce gadget à Google

flash_slideshow.xml




Le même gadget peut être utilisé pour intégrer une Playlist de YouTube :

YouTube donne un code à insérer :


<object width='425' height='366'>
<param name='movie'
value='http://www.youtube.com/cp/nnnn...nnn='></param>
<param name='wmode' value='transparent'></params>
<embed src='http://www.youtube.com/cp/vnnnn...nnnn='
type='application/x-shockwave-flash' wmode='transparent' width='425' height='366'>
</embed>
</object>



L'attribut src donne la valeur du paramètre File du gadget.




Ajouter ce gadget à Google

flash_slideshow.xml








© Copyright photos : Regis Columbo, Clos Domaines et Châteaux et Philippe Chappuis



Rechercher sur le Blog de Prac avec Google CSE