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


2008/10/25

Un diaporama dans le corps du message



Paramètrer un Diaporama de Picasa

Plusieurs lecteurs de l'article : Un diaporama pour Blogger ont cherché à incorporer le diaporama dans le corps du message.

Le gadget Diaporama de Blogger s'incorpore dans les éléments de page, mais en utilisant le
Flux Media RSS et la bibliothèque Google Ajax Feed API, l'incorporation du Diaporama dans le corps du message ne pose pas de problème. Il est possible de paramètrer le Diaporama et d'afficher la légende de chaque image.


La bibliothèque Google Ajax Feed API

Incorporer ces bibliothèques entre les balises <head> et </head> (sans retour à la ligne à l'intérieur d'un attribut) :


<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>


Le style du diaporama

Créons une classe gss pour définir les paramètres du Diaporama. Le style peut être placé entre les balises <head> et </head>. Si le style n'est utilisé que pour un seul message, il est possible de
charger dynamiquement celui-ci avec quelques lignes de javascript.

<style type="text/css">
.gss a img {border: 0 none;}
.gss
{
padding: 8px;
margin: auto;
width: 250px;
color: #dddddd;
height: 200px;
background-color: #ccc;
}
</style>

Le Flux Media RSS

C'est la source du Diaporama : un fichier en format xml fourni par l'hébergeur. Dans le cas de Picasa, pour obtenir l'adresse de ce flux il faut se connecter à son compte, ouvrir l'album, puis copier l'adresse indiquée sous RSS :

Flux Media RSS

L'adresse est de la forme suivante :

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


Le javascript

Il faut incorporer le script suivant dans le html du message. J'ai pris l'exemple des Chats de Noiraigue, avec l'aimable permission de Danielle.

<script type="text/javascript">
function load_picasa()
{
var feed_picasa =
"http://picasaweb.google.com/data/feed/base/user/philippe.chappuis/albumid/5241134795635578401?alt=rss&kind=photo&hl=fr";

var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize: GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transitionTime: 1000,
feedLoadCallback: FeedTitle,
transitionCallback: TransitionHandler,
scaleImages : true,
linkTarget: google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(feed_picasa,"chats_noiraigue", options);
}

function TransitionHandler(entry, transitionTime)
{
if (document.getElementById)
{
document.getElementById("image_title").innerHTML = entry.title;
}
else
if (document.all)
{
document.all["image_title"].innerHTML = entry.title;
}
}

function FeedTitle(result)
{
if ( result.error ) { alert("Erreur au chargement des images"); }
else
{
if (document.getElementById)
{
document.getElementById("feed_title").innerHTML = result.feed.title;
}
else if (document.all)
{
document.all["feed_title"].inner = result.feed.title;
}
}
}

google.load("feeds", "1");
google.setOnLoadCallback(load_picasa);

</script>

Quelques explications sur le script

load_picasa contient l'adresse du flux Media RSS dans la variable feed_picasa à saisir sans retour à la ligne. L'objet options contient les paramètres du Diaporama. Le dernier paramètre doit être saisi sans virgule à la fin. La signification des paramètres est donnée dans le guide du programmeur des Google AJAX Feed API.

feedLoadCallback définit le nom de la fonction qui s'exécute à l'ouverture du Diaporama : FeedTitle. Le titre du Diaporama sera placé dans le bloc div d'identifiant "feed_title".

transitionCallback définit la fonction appelée lors du chargement de chaque image : TransitionHandler. La légende de chaque image sera placée dans le bloc div d'identifiant "image_title".

Le diaporama quant à lui sera placé dans le bloc div d'identifiant "chats_noiraigue".

Attention : Le script doit être saisi dans le html du message, au début, et sans retour à la ligne ! Le plus simple est d'utiliser notepad, de coller le code ci-dessus, puis en utilisant Affichage / Sans retour à la ligne, de supprimer tous les retours à la ligne (delete en fin de ligne). Le script à coller dans Blogger doit tenir sur une seule ligne.

Dans le cas contraire, Blogger ajoute un tage <br/> ce qui provoque une erreur, <br/> n'étant pas un code javascript valide.



Le code html

Trois blocs sont utilisés. Ils servent de conteneur au titre du Diaporama, au Diaporama lui-même et à la légende des images. Le style du Diaporama est défini par la classe gss. Le style du titre et des légendes est fixé en ligne par l'attribut style.

<!-- Titre -->
<div style="text-align: center; margin-bottom: 5px;" id="feed_title"></div>

<!-- Diaporama -->
<div id="chats_noiraigue" class="gss" >En cours de chargement...</div>

<!-- Legende -->
<div style="text-align: center; font-weight: bold; margin-top: 5px;" id="image_title"></div>




Le résultat






En cours de chargement...





Utiliser Un Gadget Google

En plaçant le code décrit ci-dessus dans un Gadget Google, l'insertion d'un Diaporama devient très simple. L'article du Blog d'Aide pour Blogger decrit la méthode pour insérer un Gadget Google dans le corps du message.

Des gadgets pour son Blog. Quelques Gadgets à insérer sur son Blog ou son site.

2008/07/26

Mettre ses photos en valeurs

Les cadres pour ses photos

Chardonne - Mont-Pélerin : La carte




Quelques exemples de cadres pour ses photos, en utilisant du CSS in-line, sur le Blog d'Aide pour Blogger, ou sur ce guide :  Comment encadrer ses photos.


Afficher ses photos dans un Diaporama

En utilisant le widget (gadget) Diaporama de Blogger ou en intégrant directement le Flux Media RSS directement sur sa page, grâce aux Google AJAX Feed API. Un exemple, avec la visite chez Henri de Villamont. Des Gadgets Google pour incorporer un diaporama dans le corps du message.

Publier les Flux de ses Diaporamas, avec www.takeslides.com

Avec un Gadget Google contenant un lecteur Flash, il est possible d'insérer une animation Flash dans Google Sites.



Utiliser une Lightbox sur Blogger

Afficher des vignettes sur son blog, et afficher la photo pleine page dans une Lightbox. Découvrir la version 2 pour afficher des ensembles de photos, ou un clone de lightbox, la Slimbox.

2008/03/13

Le siege europeen de Yahoo a Rolle

Rolle se développe

Prévu sur une surface au sol de 7000 mètres carrés, pour 350 employés, la première pierre du siège européen de Yahoo sera posée fin 2008 à
Rolle.

Deux bâtiments seront construits à l'ouest de la ville sur la
propriété de Bellerive.


Rolle - Siège européen de Yahoo

Au coeur de la Côte vaudoise, une prestigieuse entreprise contribuera au développement économique de la région.

2008/02/20

Diaporama Clos Domaines et Chateaux

Un Diaporama avec Photobucket

Ce Diaporama a été réalisé pour l'article du Blog d'aide pour Blogger sur les flux media RSS et leur utilisation dans un Diaporama.

Un cours pour utiliser les flux media RSS sur une page créée avec Google Page Creator. Des exemples de Diaporama.



Crédit photo : Regis Colombo pour l'Association Clos Domaines et Châteaux



D'autres Diaporamas : Les vins du Valais - Présentation en chinois. Henri de Villamont, la visite du Domaine. Grands vins de Bourgogne.

Avec un Gadget Google contenant un lecteur Flash, il est possible d'insérer une animation Flash dans Google Sites.


2008/02/17

Un style pour un seul message

Changer le style d'un seul message

Pour ne pas alourdir le blog avec un style qui ne serait utilisé que par un seul post, il est possible de charger de façon dynamique une feuille de style externe :


<script language="Javascript" type="text/javascript">

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

</script>



A titre d'exemple, un slideshow en CSS, selon l'idée de Stu Nicholls, reprise pour Sliding Photograph Gallery, et que j'ai adapté pour Blogger :


Une galerie horizontale en CSS :


La feuille de style est disponible sur mon site les Liens du Vin


Les photos sont extraites de la série Clos Domaines et Châteaux

Plus d'informations

Un Gadget Google pour afficher une galerie horizontale

2008/01/23

Texte deroulant et opacite

Des effets graphiques simples, avec CSS et javascript pour faire défiler texte et images, et réaliser un effet de fondu-enchaîné entre les images


Une image de fond pour un bloc div

Un complément pour le mode d'emploi des fonds de page.


Changer l'opacité d'un texte ou d'une image

Une introduction écrite pour le Blog d'aide pour Blogger. Une suite de la page Opacité et Transparence.

Une visionneuse simple avec un effet de fondu-enchaîné entre les images. Utiliser setTimeout pour faire varier en continu l'opacité.

Fondu-enchaîné entre les images

Du texte défilant sur une image fixe

Un script javascript pour faire défiler du texte sur une image, grâce à scrollTop.


Rechercher sur le Blog de Prac avec Google CSE