tag:blogger.com,1999:blog-42109347244847894562024-02-19T10:20:19.143+01:00Blog d Aide pour BloggerUn Blog en français d aide et de conseils pour Blogger. Trucs et astuces pour son Blog. Les outils Google pour personnaliser son Blog et améliorer son référencement.Anonymoushttp://www.blogger.com/profile/03493000388301801592noreply@blogger.comBlogger40125tag:blogger.com,1999:blog-4210934724484789456.post-49696730920627956022012-04-28T22:28:00.001+02:002012-04-28T22:39:57.428+02:00Un diaporama avec les derniers Pins de Pinterest<a href="http://pinterest.com/prac53/" target="_blank" title="Pinterest - Prac53">Pinterest</a> est un réseau social qui permet
d'<strong><em>épingler</em></strong> (Pins) des photos, classées sur plusieurs <strong><em>tableaux</em></strong> (Boards).
<br/><br/>
Le Réseau publie un <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> des images d'un <a href="http://feeds.feedburner.com/pinterest-prac53" target="_blank" title="Flux RSS Prac53">utilisateur</a> ou des images d'un seul <a href="http://feeds.feedburner.com/pinterest-prac53-favorite-recipes" target="_blank" title="Pinterest prac53 - Favorites recipe">tableau</a>.
<br/><br/>
<strong>Inserer un Gadget Blogger sur son Blog</strong>
<br/><br/>
La méthode est décrite sur le <a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Diaporama Pinterest sur son Blog">Blog de Prac</a>. Le Gadget Blogger ne peut pas être inséré dans le corps d'un message.
<br/><br/>
<strong>Inserer un Gadget Google dans le corps du message</strong>
<br/><br/>
Un Gadget Google peut être placé dans le html d'un message ou dans un gadget HTML / Javascript. Le Gadget est inséré par un <strong><em>tag iframe</em></strong>. Insérons le <a href="http://www.liens-du-vin.ch/pinterest-slideshow-script.htm" target="_blank" title="Diaporama Pinterest">Gadget avec titre et légendes des images</a>.
<br/><br/>
<iframe style="width: 380px; height: 300px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow.xml&up_USER=prac53&up_PWH=347&up_PHT=188&up_LNK=http://pinterest.com/prac53&up_TIT=Pinterest%20-
%20Prac&up_DTime=&up_TTime=&up_RND=Yes&up_CLP=Yes&up_NAB=Yes&up_TCOL=%23000080&up_LCOL=%23000080&up_SCOL=%23ffffe1&up_BCOL=%23558866&up_CCOL=%23eeeecc" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Pinterest avec titre - http://www.liens-du-vin.ch/pinterest-slideshow-script.htm</iframe>
<br/><br/>
<center><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/pinterest-slideshow.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Diaporama Pinterest - pinterest-slideshow.xml"><img alt="Ajouter ce Gadget à Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce Gadget à Google" border="0" height="17" width="104"></a></center>
<br/><br/>
Le code utilisé, à coller sans blanc ni retour à la ligne :
<br/><br/>
<div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;">
<br/>
<iframe style="width: 380px; height: 300px;"<br/>
src="http://www.gmodules.com/gadgets/ifr<br>
?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow.xml<br/>
&up_USER=prac53<br/>
&up_PWH=347<br/>
&up_PHT=188<br/>
&up_LNK=http://pinterest.com/prac53<br/>
&up_TIT=Pinterest%20-%20Prac<br/>
&up_DTime=<br/>
&up_TTime=<br/>
&up_RND=Yes<br/>
&up_CLP=Yes<br/>
&up_NAB=Yes<br/>
&up_TCOL=%23000080<br/>
&up_LCOL=%23000080<br/>
&up_SCOL=%23ffffe1<br/>
&up_BCOL=%23558866<br/>
&up_CCOL=%23eeeecc"<br/>
allowTransparency="true" frameborder="0" scrolling="no"><br/>
</iframe><br/>
<br/>
</div>
<br/><br/>
<strong>Plus d'informations</strong>
<br/><br/>
<a href="http://pinterest.com/" target="_blank" title="Pinterest">Le site de Pinterest</a>
<br/><br/>
<a href="http://pinterest.com/tomatejoyeuse/tout-pinterest-en-francais/" target="_blank" title="Les trucs de Tomate Joyeuse sur Pinterest">Les trucs de Tomate Joyeuse sur Pinterest</a>
<br/><br/>
<a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Le Gadget Blogger">Le Gadget Blogger</a>
<br/><br/>
<a href="http://www.liens-du-vin.ch/pinterest-slideshow-script.htm" target="_blank" title="Gadget Google">Le Gadget Google</a>
<br/><br/>
<a href="http://viti-vino.blogspot.com/2012/04/suivre-pins-site-pinterest.html" target="_blank" title="Suivre les Pins de son Site ou de son Blog">Suivre les Pins de son Site ou de son Blog</a>
<br/><br/>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-4210934724484789456.post-80154208445843965332011-03-02T21:17:00.047+01:002011-03-02T22:56:22.741+01:00Conserver vos vignettes !Depuis début mars 2011, on observe dans le monde Blogger que les vignettes ne s'affichent plus, ou partiellement, dans les gadgets :<br /><br /><ul><li>Messages les plus consultés, avec image miniature (vignette)</li><li>Les derniers messages consultés avec vignette</li><li>Liste des Blogs (Blogroll), avec vignette de l'élément le plus récent</li></ul><br /><strong>Un peu d'histoire</strong><br /><br />En <strong>septembre 2008</strong>, <a href="http://code.blogger.com/2008/09/feeds-now-include-media-rss-thumbnails.html" target="_blank" title="Vignette - Thumbnail dans le Flux de Blogger">Blogger a introduit une vignette</a> dans le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> des Blogs. Selon la spécification <a href="http://search.yahoo.com/mrss/" target="_blank" title="Media RSS">Media RSS</a>, cela consiste à créer un élément xml <strong>media:thumbnail</strong> dans le Flux Atom et RSS du Blog. Par exemple :<br /><br /><div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /><media:thumbnail<br />xmlns:media='http://search.yahoo.com/mrss/'<br />url='<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t5XNEplCK1bdKqFRuRwSergbFV_6LsYLEupc_foOkyifOrcZYeV2c-WDbLjkGVYwPNHS_78Z_uAR2ozPzyxta7qN43ZutbwkdxrU-TerNPfq0MppCnVFfzn7z7qttz_IZa3MjkOPdJ8/s72-c/last-post-slideshow-screen.jpg" target="_blank" title="Vignette 72x72 - media:thumbnail">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t5XNEplCK1bdKqFRuRwSergbFV_6LsYLEupc_foOkyifOrcZYeV2c-WDbLjkGVYwPNHS_78Z_uAR2ozPzyxta7qN43ZutbwkdxrU-TerNPfq0MppCnVFfzn7z7qttz_IZa3MjkOPdJ8/s72-c/last-post-slideshow-screen.jpg</a>' height='72' width='72'/><br /><br /></div><br /><br />Cet élément définit une image de 72 x 72 pixels, créée automatiquement à partir de la première image du message, et hébergée par <a href="http://picasaweb.google.com/" target="_blank" title="Picasa Albums Web">Picasa Albums Web</a>.<br /><br />En janvier 2011, l'accès à <a href="http://googlesystem.blogspot.com/2011/01/picasa-web-adds-https-support.html" target="_blank" title="Picasa en accès https">Picasa se fait par une connexion sécurisée</a>. Cela entraîne, début mars 2011, une modification des adresses (URL) des images issues de Picasa.<br /><br /><br /><strong>Une image placée sur le Blog à partir du disque dur</strong><br /><br />L'image est hébergée dans l'album <b>Picasa Albums Web</b> associé automatiquement au Blog.<br /><br /><center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s400/02_Martheray.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 323px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s400/02_Martheray.jpg" alt="Domaine du Martheray - Image depuis disque dur" title="Domaine du Martheray - Image depuis disque dur" id="BLOGGER_PHOTO_ID_5579588390305228482" border="0" /></a></center><br /><br />L'adresse de l'image :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s400/02_Martheray.jpg" target="_blank" title="Domaine du Martheray - Image depuis disque dur">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s400/02_Martheray.jpg</a><br /><br /></div><br /><br />L'adresse de la vignette (thumbnail) dans le <a href="http://aide-blogger-fr.blogspot.com/feeds/posts/default" target="_blank" title="Flux du Blog d'Aide pour Blogger">Flux du Blog d'Aide pour Blogger :<br /><br /></a><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><a href="http://aide-blogger-fr.blogspot.com/feeds/posts/default" target="_blank" title="Flux du Blog d'Aide pour Blogger"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s72-c/02_Martheray.jpg" target="_blank" title="vignette / thumbnail 72x72 du Flux Media RSS">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtK2H-EwdLMRLYBt0G0ltQlUK4lu2xVkWSbasd9iCVaJ7EbIuhx197N6rbl9fKzFZXO9WynKdIV6u6sjUWqfrqkabjyXg2TgWybVwL3GgkF14G6gNkuH1Lymn9NwOkJShhg8hteDwdV8/s72-c/02_Martheray.jpg</a><br /><br /></div><br /><br /><strong>Une image placée sur le Blog à partir d'un album de Picasa Albums Web</strong><br /><br />L'insertion de l'image se fait à partir de l'<a href="http://mestrucspourblogger.blogspot.com/2010/09/nouvelle-interface-dinsertion-dimage.html" target="_blank" title="Insertion d'images">onglet rédiger</a>, en utilisant le <strong>Nouvel Editeur de Blogger</strong>. Celui-ci permet d'ouvrir un album Picasa et de sélectionner les images à insérer.<br /><br />L'adresse de l'image :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s400/02_Martheray.jpg" target="_blank" title="Domaine du Martheray - Image depuis album Picasa"><span style="color: rgb(0, 153, 0); font-weight: bold;">https</span>://lh3.<span style="color: rgb(0, 153, 0); font-weight: bold;">googleusercontent.com</span>/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg</a><br /><br /></div><br /><br />C'est une adresse avec une <a href="http://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank" title="https - connexion sécurisée">connexion sécurisée</a>, sur le Domaine <strong>googleusercontent.com</strong>.<br /><br /><span style="font-weight: bold; font-style: italic; color: rgb(255, 0, 0);">Blogger ne va pas générer de vignette (situation mars 2011)</span><span style="font-weight: bold; font-style: italic; color: rgb(255, 0, 0);"> dans le Flux Atom et RSS du Blog !</span><br /><br /><br />Une astuce pour permettre à Blogger de créer la vignette<br /><br />Remplacer :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /><span style="color: rgb(0, 153, 0); font-weight: bold;">https</span>://lh3.<span style="color: rgb(0, 153, 0); font-weight: bold;">googleusercontent.com</span>/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg<br /><br /></div><br /><br />par cette adresse :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s400/02_Martheray.jpg" target="_blank" title="Domaine du Martheray - Image depuis album Picasa"><span style="color: rgb(0, 153, 0); font-weight: bold;">http</span>://lh3.<span style="color: rgb(0, 153, 0); font-weight: bold;">ggpht.com</span>/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg</a><br /><br /></div><br /><br />Blogger va alors générer la vignette suivante :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s72-c/02_Martheray.jpg" target="_blank" title="Domaine du Martheray - vignette depuis Picasa">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s72-c/02_Martheray.jpg</a><br /><br /></div><br /><br /><center><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 72px; height: 72px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeEYVfWgXGmgN_jQJTsAQi1NhJ3-BZUPbHQ2Ilanr5-R0EPmJgxxsdiR5OcVhWptEQOlA7JMaNT08Z5LxcXqF6NbigMSwnZzfzb9l7Tn7GFJ5KPiIT3GuZbVy6oJ2T18ejqCoMQI9YW0/s72-c/02_Martheray.jpg" alt="Domaine du Martheray - Vignette pour Media RSS" title="Domaine du Martheray - Vignette pour Media RSS" border="0" /></center><br /><br /><strong>Conclusion</strong><br /><br />Vérifier l'adresse de la première image d'un message (issue d'un album Picasa), et remplacer <b>https://...googleusercontent.com...</b> par <b>http://...ggpht.com...</b>. Blogger va créer le Flux avec une vignette qui sera affichée par les abonnés à votre Flux.<br /><br /><strong>Gadget de remplacement</strong><br /><br />Le <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger Diaporama des derniers messages d'un Blog">Gadget Blogger Diaporama des derniers messages d'un Blog</a> n'est pas affecté par ces problèmes. Il n'utilise pas la vignette contenue dans le Flux du Blog.<br /><br /><strong>Plus d'informations</strong><br /><br /><a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Le Flux Media RSS">Le Flux Media RSS</a><br /><br /><strong>© Photos</strong><br /><br /><a href="http://www.c-d-c.ch" target="_blank" title="Association Clos Domaines et Châteaux">Association Clos Domaines et Châteaux</a><br /><br/>Unknownnoreply@blogger.com17tag:blogger.com,1999:blog-4210934724484789456.post-83896037885286050942011-01-05T21:38:00.013+01:002011-03-11T22:38:59.613+01:00Ses photos Flickr sur un mur d'imagesLe <a href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank" title="Gadget Diaporama de Blogger">gadget Diaporama de Blogger</a> permettant d'afficher les images d'un <strong>compte Flickr</strong> utilise un <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a>. Il existe de nombreux prestataires tiers qui proposent un <strong>Diaporama en Flash</strong>.<br /><br /><a href="http://www.simpleviewer.net/tiltviewer/" target="_blank" title="Tiltviewer">Tiltviewer</a> permet d'afficher un mur d'images. (<span lang="en"><i>To tilt</i></span><i> : pencher, incliner</i>).<br />Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash <strong>tiltviewer.swf</strong>.<br /><br />L'insertion du diaporama dans un message du blog ou un gadget html / javascript est grandement simplifiée en utilisant un <a href="http://sites.google.com/site/annuairevin/test-page/google-gadget-google-sites" target="_blank" title="Gadget Google">Gadget Google</a>.<br /><br /><br /><strong>Url du gadget</strong><br /><br /><center><a href="http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml" target="_blank" title="Images de Flickr avec Tiltviewer"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 200px; height: 165px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPNTampkSUUQZwJBfi3okWEMWcO9CRQdjo5r2wc4M-360W44jzJhMfeYY6uipVj-OVRXRuN-Ok_g8ALZmbNNaGVhaPNOT9Eu8MR8qBu4VM9sUv-0eRxCqV4jtB_YLChmt2DitWyCD9uM/s400/tiltviewer-screen.png" title="Images de Flickr avec Tiltviewer" alt="Images de Flickr avec Tiltviewer" id="BLOGGER_PHOTO_ID_5558806565474869698" border="0" /></a><span style="font-size:78%;"><a href="http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml" target="_blank" title="Images de Flickr avec Tiltviewer">tiltviewer-flickr.xml</a></span></center><br /><br /><br /><strong>Insertion du gadget</strong><br /><br />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 <strong>iframe</strong> ou la source du <strong>script</strong>, il faut utiliser la <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Insérer un gadget dans le corps du message">méthode décrite dans ce message du Blog d'Aide pour Blogger</a>.<br /><br />Pour ce gadget, les codes sont donnés sur la page <a href="http://www.liens-du-vin.ch/galerie-flickr-tiltviewer.htm" target="_blank" title="Diaporama Flickr avec Tiltviewer">Diaporama Flickr avec Tiltviewer</a>.<br /><br /><br /><strong>Le tag iframe</strong><br /><br />A saisir sans espace ni retour à la ligne :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br /><iframe<br />style="width: 440px; height: 390px;"<br />src="http://www.gmodules.com/gadgets/ifr?<br />url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml<br />&up_UID=User ID, l'identifiant utilisateur de Flickr<br /><br />Utiliser <a href="http://idgettr.com/" target="_blank" title="IdGettr">IdGettr</a> pour trouver l'identifiant<br /><br />&up_TIT=Titre du diaporama<br />&up_LNK=URL du lien sur le titre<br /><br />&up_SW=Largeur en pixels du diaporama<br />&up_SH=Hauteur en pixels du diaporama<br /><br />&up_TCOL=%23rrggbb couleur du titre<br />&up_BBOCOL=%23rrggbb couleur externe du fond<br />&up_BBICOL=%23rrggbb couleur interne du fond<br /><br />&up_PFCOL=%23rrggbb couleur du cadre des images<br />&up_PBCOL=%23rrggbb couleur du verso des images<br />&up_BFCOL=%23rrggbb couleur de l'entourage<br />&up_BDCOL=%23rrggbb couleur du cadre<br />&up_CCOL=%23rrggbb couleur du conteneur<br />"<br />allowTransparency="true"<br />frameborder="0" scrolling="no"><br /></iframe><br /><br /></div><br /><br /><br /><strong>Affichage plein écran</strong><br /><br />Faire un clic droit, puis choisir <span style="font-style: italic;">Full screen</span>.<br /><br /><br /><strong>Un exemple</strong><br /><br />J'utilise le code suivant pour afficher les photos de mon compte <a href="http://www.flickr.com/prac53" title="Flickr">Flickr</a> :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br /><iframe style="width: 440px; height: 390px;"<br />src="<br />http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml<br /><br />&up_UID=<span style="color: rgb(255, 0, 0);">42038249@N00</span><br /><br />&up_TIT=<span style="color: rgb(255, 0, 0);">Clos%20Domaines%20et%20Ch%C3%A2teaux</span><br />&up_LNK=<span style="color: rgb(255, 0, 0);">http://www.liens-du-vin.ch/vision_cdc.htm</span><br /><br />&up_SW=420<br />&up_SH=360<br />&up_TCOL=%23<span style="color: rgb(255, 0, 0);">112233</span><br />&up_BBOCOL=%23<span style="color: rgb(255, 0, 0);">eeeecc</span><br />&up_BBICOL=%23<span style="color: rgb(255, 0, 0);">112233</span><br />&up_PFCOL=%23<span style="color: rgb(255, 0, 0);">558866</span><br />&up_PBCOL=%23<span style="color: rgb(255, 0, 0);">bbbbbb</span><br />&up_BFCOL=%23<span style="color: rgb(255, 0, 0);">eeeecc</span><br />&up_BDCOL=%23<span style="color: rgb(255, 0, 0);">558866</span><br />&up_CCOL=%23<span style="color: rgb(255, 0, 0);">eeeecc</span><br />"<br />allowTransparency="true"<br />frameborder="0"<br />scrolling="no">Gadget Google - Les photos de Flickr sur un mur d'images</iframe><br /><br /></div><br /><br /><center><iframe style="width: 415px; height: 390px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml&up_UID=42038249%40N00&up_TIT=Clos%20Domaines%20et%20Ch%C3%A2teaux&up_LNK=http%3A%2F%2Fwww.liens-du-vin.ch%2Fvision_cdc.htm&up_SW=400&up_SH=360&up_TCOL=%23112233&up_BBOCOL=%23eeeecc&up_BBICOL=%23112233&up_PFCOL=%23558866&up_PBCOL=%23bbbbbb&up_BFCOL=%23eeeecc&up_BDCOL=%23558866&up_CCOL=%23eeeecc" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Les photos de Flickr sur un mur d'images</iframe></center><br /><br /><br /><strong>Plus d'informations</strong><br /><br /><a href="http://viti-vino.blogspot.com/2011/01/mur-images-galerie-xml.html" target="_blank" title="Un mur d'images avec une galerie en xml">Un mur d'images avec une galerie en xml</a><br /><br /><a href="http://www.liens-du-vin.ch/flickr-thumbnails.htm" target="_blank" title="Les vignettes d'un ensemble de photos de Flickr">Les vignettes d'un ensemble de photos de Flickr avec un Gadget Google</a><br /><br /><a href="http://viti-vino.blogspot.com/2011/01/vignettes-flickr.html" target="_blank" title="Les vignettes d'un ensemble de photos de Flickr">Les vignettes d'un ensemble de photos de Flickr avec un Gadget Blogger</a><br /><br /><a href="http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.html" target="_blank" title="Un diaporama de Flickr sur son Blog">Un Diaporama de Flickr sur son Blog</a><br /><br /><a href="http://viti-vino.blogspot.com/2010/12/galerie-horizontale-images-accordeon.html" target="_blank" title="Galerie horizontale de photos affichées en accordéon">Galerie horizontale de photos affichées en accordéon</a><br /><br /><a href="http://aide-blogger-fr.blogspot.com/2010/03/vignettes-album-picasa.html" target="_blank" title="Les vignettes d'un album Picasa sur son Blog">Les vignettes d'un album Picasa sur son Blog</a><br /><br /><a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Insérer un gadget dans le corps du message">Insérer un gadget dans le corps du message</a><br /><br /><a href="http://www.simpleviewer.net/tiltviewer/" target="_blank" title="Tiltviewer, le site">Tiltviewer, le site</a><br /><br /><br /><strong>Crédit photos</strong><br /><br /><a href="http://www.c-d-c.ch" target="_blank" title="Association Clos Domaines et Châteaux">Association Clos Domaines et Châteaux</a>Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-4210934724484789456.post-91459985533676773282010-10-03T20:16:00.010+02:002011-04-09T21:02:11.422+02:00Deux nouveautés de Google pour la rentrée<strong>Guide SEO</strong><br /><br />Google publie une nouvelle version de son guide <strong>Optimiser son site pour les moteurs de recherche</strong>. Cette version s'enrichit d'un glossaire et de nombreuses références vers les outils Google. Un nouveau chapitre est entièrement consacré à l'optimisation d'un site pour les téléphones mobiles.<br />Ce guide apporte un complément indispensable à l'article du Blog d'Aide : <a href="http://aide-blogger-fr.blogspot.com/2007/11/ameliorer-la-visibilite-de-son-blog.html" target="_blank" title="Améliorer la visibilité de son Blog">Améliorer la visibilité de son Blog</a><br /><br /><center><a href="http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf" target="_blank" title="Search Engine Optimization Starter Guide"><img src="http://www.liens-du-vin.ch/_pic062/googlebot.png" title="Search Engine Optimization Starter Guide" alt="Search Engine Optimization Starter Guide" border="0" /></a><br /><span style="font-size:85%;"><a href="http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf" target="_blank" title="Search Engine Optimization Starter Guide">Search Engine Optimization Starter Guide</a></span></center><br /><br />La <a href="http://www.google.fr/webmasters/docs/search-engine-optimization-starter-guide-fr.pdf" target="_blank" title="Guide SEO de Google">version française du Guide SEO de Google</a> (*.pdf)<br /><br /><strong><span lang="en">Google Shortener</span></strong><br /><br />Depuis le 1er octobre, <a href="http://goo.gl/" target="_blank" title="Google URL Shortener">Google URL Shortener</a> permet de créer une adresse URL raccourcie, ainsi qu'un <strong>Code QR</strong>. Le <a href="http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html" target="_blank" title="Code Qr (Quick response">Code QR (Quick Response)</a> est un code à deux dimensions permettant à un téléphone mobile d'atteindre directement une adresse URL en photographiant le code.<br /><br />Pour insérer le <strong>Code QR</strong> sur son Blog, il fallait utiliser les codes de <a href="http://code.google.com/intl/fr/apis/chart/docs/making_charts.html" title="Google Chart API" target="_blank">Google Chart API</a>, ce qui n'était pas toujours simple.<br /><br />Avec <strong>Google URL Shortener</strong>, il suffit de se connecter avec son compte Google sur <a href="http://goo.gl/" target="_blank" title="Google URL Shortener">goo.gl</a>, de créer le raccourci et d'adjoindre <strong>.qr</strong> à l'adresse courte pour obtenir l'image sur son Blog.<br /><br /><strong>En pratique</strong><br /><br />Nous voulons raccourcir l'Url suivante, créée avec <a href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html" target="_blank" title="Google Maps">Google Maps</a> :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br />maps.google.ch/maps/ms?hl=fr<br />&ie=UTF8<br />&t=h<br />&msa=0<br />&msid=102376698569738400439.00049087972194c5318f2<br />&ll=46.325831,6.962242&<br />spn=0.082979,0.145912<br />&z=12<br />&output=embed<br /><br /></div><br /><br /><strong>Google URL Shortener</strong> nous donne l'URL raccourcie suivante :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br /><strong>goo.gl/0hvD</strong><br /><br /></div><br /><br />Et le Code QR s'obtient en ajoutant <strong>.qr</strong> à cette adresse :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br />goo.gl/0hvD<strong>.qr</strong><br /><br /></div><br /><br />Nous pouvons maintenant afficher le Code QR avec un simple tag img :<br /><br /><div style="background: none repeat scroll 0% 0% infobackground;"><br /><img src="<strong>http://goo.gl/0hvD.qr</strong>" style="border: 1px solid #000; padding: 5px;" alt="QR code - Google Maps - Badouxthèque" title="QR code - Google Maps - Badouxthèque" /><br /><br /></div><br /><br /><center><img src="http://goo.gl/0hvD.qr" style="border: 1px solid rgb(0, 0, 0); padding: 5px;" alt="QR code - Google Maps - Badouxthèque" title="QR code - Google Maps - Badouxthèque" /></center><br /><br /><strong>En savoir plus</strong><br /><br />A titre d'illustration, les 2 liens ci-dessous sont affichés avec le code QR et l'URL courte fournie par goo.gl.<br /><br /><strong>URL longue</strong> : <a href="http://googlewebmastercentral.blogspot.com/2010/09/seo-starter-guide-updated.html" target="_blank" title="Webmaster Central Blog">http://googlewebmastercentral.blogspot.com/2010/09/seo-starter-guide-updated.html</a><br /><br /><strong>URL courte</strong> : <a href="http://goo.gl/q0zK" target="_blank" title="Webmaster Central Blog">http://goo.gl/q0zK</a><br /><br /><strong>Code QR</strong> : <a href="http://goo.gl/q0zK.qr" target="_blank" title="Code QR - http://goo.gl/q0zK.qr">http://goo.gl/q0zK.qr</a><br /><br /><center><img src="http://goo.gl/q0zK.qr" style="border: 1px solid rgb(0, 0, 0); padding: 5px;" alt="QR code - Webmaster Central Blog" title="QR code - Webmaster Central Blog" /></center><br /><br /><br /><strong>URL longue</strong> : <a href="http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html" target="_blank" title="Placer un code QR sur son Blog">http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html</a><br /><br /><strong>URL courte</strong> : <a href="http://goo.gl/ToAQ" target="_blank" title="Placer un code QR sur son Blog">http://goo.gl/ToAQ</a><br /><br /><strong>Code QR</strong> : <a href="http://goo.gl/ToAQ.qr" target="_blank" title="Code QR - http://goo.gl/ToAQ.qr">http://goo.gl/ToAQ.qr</a><br /><br /><center><img src="http://goo.gl/ToAQ.qr" style="border: 1px solid rgb(0, 0, 0); padding: 5px;" alt="Placer un code QR sur son Blog" title="QR Code - Placer un code QR sur son Blog" /></center>Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-4210934724484789456.post-7585089009305016862010-03-19T12:53:00.000+01:002010-03-19T12:53:23.211+01:00Comment insérer un module d'alerte email dans bloggerBonjour à tous, <br />
<br />
J'ai créé il y a quelques temps pour mon blog personnel un tutoriel pour ajouter un module d'alerte email auquel les lecteurs peuvent s'abonner pour recevoir les dernières mises à jour. Je trouvais que c'était assez indispensable pour faciliter le suivi.<br />
<br />
J'ai pensé que cette info pouvait intéresser d'autres bloggeurs :) <br />
<br />
Nouvellement contributrice sur ce blog d'aide, je souhaitais le partager avec vous.<br />
<br />
Seulement, comme l'article est déjà fait, j'avoue qu'il m'est plus simple de vous mettre un lien vers mon blog que de devoir récupérer toutes les photos et les ré-uploader (je peux copier/coller le texte mais pas les photos...).<br />
<br />
Je sais que ça n'est pas le plus pratique donc je m'en excuse d'avance et si quelqu'un sait comment transférer un article d'un blog à un autre sans devoir ré-uploader toutes les photos (il y en a souvent beaucoup dans un tutoriel), ça pourrait faire l'objet d'un prochain post ? <br />
<br />
D'ici là, voici le tutoriel en question : <a href="http://copinedebile.blogspot.com/2010/03/tutoriel-comment-inserer-un-module.html">ici</a><br />
<br />
Enjoy !Copine Débilehttp://www.blogger.com/profile/01488463216966059709noreply@blogger.com8tag:blogger.com,1999:blog-4210934724484789456.post-34890690271271651082010-03-03T22:24:00.024+01:002012-07-17T21:38:32.334+02:00Les Vignettes d'un Album Picasa sur son Blog<a href="http://picasaweb.google.com/home" title="Picasa Albums Web" target="_blank">Picasa Albums Web</a> est l'hébergeur de photos associé à Blogger. Les photos d'un album peuvent s'afficher dans un <a href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank" title="Diaporama">Diaporama</a>, ou s'afficher sous forme de <span style="font-weight:bold;">vignettes<span style="font-style:italic;"></span></span> (thumbnails).<br /><br /><br /><span style="font-weight:bold;">Le Gadget Google</span><br /><br />Le <a href="http://spreadsheets.google.com/ccc?key=0AoyfJJJSNrfucC1EZVdQaG85U3FtWVJLdE12bC1ESkE&hl=fr" target="_blank" title="Gadget Google">Gadget Google</a>, <a href="http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml" target="_blank" title="Vignettes Picasa">Vignettes Picasa</a>, affiche les vignettes d'un album Picasa ou les dernières images ajoutées à un compte Picasa. <br /><br /><center><a href="http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml" target="_blank" title="Vignettes Picasa"><img src="http://www.liens-du-vin.ch/_pic062/picasa-thumbnails-thumb.png" style="border: 0px;" alt="Vignetts Picasa" title="Vignettes Picasa" /></a></center> <br /><br />Pour insérer ce Gadget sur son Blog, il faut utiliser la technique décrite dans l'<a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Un Gadget dans le corps du message">article du Blog d'Aide</a>, qui permet d'insérer le Gadget dans le corps du message ou dans la colonne des gadgets. Le code html à insérer est un <a href="http://www.w3schools.com/TAGS/tag_iframe.asp" target="_blank" title="iframe">iframe</a>. Pour le placer dans le corps du message, il suffit de copier le code en utilisant l'onglet <i>Modifier le code HTML</i>, pour l'insérer dans la colonne des gadgets, il faut copier le code dans un <i>gadget HTML / Javascript</i>.<br /><br /><br /><span style="font-weight:bold;">Le code du iframe</span><br /><br />Le code doit être saisi sans retour à la ligne.<br /><br /><div style="background: infobackground;"><br /><iframe style="width: <span style="color: #c00">300</span>px; height: <span style="color: #c00">210</span>px;"<br />src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml<br />&up_USR=<span style="color: #c00">utilisateur Picasa</span><br />&up_AID=<span style="color: #c00">identifiant album Picasa</span><br /><br />Pour trouver ces 2 valeurs. ouvrir un album, et prendre l'URL qui est marquée <strong>RSS</strong>. L 'adresse indique clairement <b>/user/</b> et <b>/albumid/</b><br /><br />&up_NBC=<span style="color: #c00">Nombre de vignettes à afficher (1 - 200)</span><br />&up_SIZE=<span style="color: #c00">Largeur des vignettes (32 à 160 pixels)</span><br /><br />&up_SIZE=<span style="color: #c00">Hauteur des vignettes (32 à 160 pixels)</span>. Par défaut les vignettes sont à l'échelle de l'image originale (<i>uncropped</i>)<br /><br />&up_SHA=<span style="color: #c00">Ombre portée (Yes - No)</span><br /><br />&up_CLP=<span style="color: #c00">Ouvrir l'image sur un clic (Yes - No)</span><br /><br />&up_URL=<span style="color: #c00">URL du lien sur le titre</span><br />&up_TITLE=<span style="color: #c00">Texte du titre</span><br /><br />&up_LCOL=%23<span style="color: #c00">rrggbb couleur du lien</span><br />&up_BCOL=%23<span style="color: #c00">rrggbb couleur de la bordure</span><br />&up_BKCOL=%23<span style="color: #c00">rrggbb couleur du fond</span><br />&up_CCOL=%23<span style="color: #c00">rrggbb couleur du conteneur</span>"<br />allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Vignettes Picasa</iframe><br /><br /></div><br /><br /><span style="font-weight:bold;">Les paramètres</span><br /><br />Dimensions du gadget : à ajuster en fonction du nombre de vignettes à afficher.<br /><br />Utilisateur et identifiant de l'album : pour obtenir le <i>nom d'utilisateur</i> et <i>l'identifiant</i> de l'album, ouvrir l'album Picasa. Rechercher le lien <b>RSS</b> (colonne de droite, une fois l'album Picasa ouvert). Celui-ci est de cette forme :<br /><br /><div style="background: infobackground;"><br />http://picasaweb.google.com/data/feed/base/user<br />/<span style="color: #c00">utilisateur Picasa</span><br />/albumid/<span style="color: #c00">identifiant album Picasa</span><br />?alt=rss&kind=photo&hl=fr<br /><br /></div><br />Couleurs : utiliser le code couleur rrggbb. <br /><br /><br /><span style="font-weight:bold;">Des exemples</span><br /><br />L'album Picasa <a href="http://picasaweb.google.com/philippe.chappuis/ClosDomainesEtChateauxLaNoblesseDesVinsSuisses" target="_blank" title="Clos Domaines et Châteaux - La noblesse des vins suisses">Clos Domaines et Châteaux - La noblesse des vins suisses</a>, affiché en utilisant le code suivant : (à saisir sans espaces ni retours à la ligne)<br /><br /><div style="background: infobackground;"><br /><iframe style="width: 305px; height: 385px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml<br />&up_USR=philippe.chappuis<br />&up_AID=5297196325809923457<br />&up_NBC=20<br />&up_SIZE=72<br />&up_SHA=Y<br />&up_CLP=Y<br />&up_URL=http://www.c-d-c.ch<br />&up_TITLE=Clos+Domaines+et+Châteaux<br />&up_LCOL=%23558866<br />&up_BCOL=%23558866<br />&up_BKCOL=%23eeeecc<br />&up_CCOL=%23eeeecc"<br />allowTransparency="true" frameborder="0"<br />scrolling="no">Gadget Google - Vignettes Picasa - Album Clos Domaines et Châteaux</iframe><br /><br /></div><br /><br /><center><iframe style="width: 320px; height: 420px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml&up_USR=philippe.chappuis&up_AID=5297196325809923457&up_NBC=20&up_SIZE=72&up_SHA=Y&up_URL=http://www.c-d-c.ch&up_TITLE=Clos+Domaines+et+Châteaux&up_LCOL=%23558866&up_BCOL=%23558866&up_BKCOL=%23eeeecc&up_CCOL=%23eeeecc" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Vignettes Picasa - Album Clos Domaines et Châteaux</iframe></center><br />
<div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml" style="border: none; text-decoration: none;" target="_blank" title="Ajouter Vignettes Picasa"><img alt="Ajouter ce gadget a Google" src="http://prac-gadget.googlecode.com/svn/branches/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" width="104"></a></div>
<br /><br />Les 30 dernières images ajoutées à mon <a href="http://picasaweb.google.com/philippe.chappuis" target="_blank" title="Compte Picasa">compte Picasa</a> : <br /><br /><center><iframe height="294" width="320" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml&up_USR=philippe.chappuis&up_AID=&up_NBC=30&up_SIZE=36&up_HSIZE=36&up_SHA=Y&up_URL=http%3A%2F%2Fwww.liens-du-vin.ch&up_TITLE=Liens%20du%20Vin&up_LCOL=%23558866&up_BCOL=%23558866&up_BKCOL=%23eeeecc&up_CCOL=%23eeeecc">Gadget Google - Les vignettes d'un compte Picasa</iframe></center><br />
<div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/picasa-thumbnails.xml" style="border: none; text-decoration: none;" target="_blank" title="Ajouter Vignettes Picasa"><img alt="Ajouter ce gadget a Google" src="http://prac-gadget.googlecode.com/svn/branches/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" width="104"></a></div>
<br /><br /><span style="font-weight:bold;">Plus d'informations</span><br /><br /><a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-picasa.html" target="_blank" title="Gadget Blogger - Vignettes Picasa">Afficher les vignettes d'un album Picasa avec un Gadget Blogger</a>.<br /><br />Utiliser un script ou un iframe pour afficher les <a href="http://www.liens-du-vin.ch/picasa-photostream-gadget-script.htm" target="_blank" title="vignettes d'un album Picasa">vignettes d'un Album Picasa</a> sur son Blog.<br /><br />Avec un Gadget Google, afficher les <a href="http://www.liens-du-vin.ch/flickr-thumbnails.htm" target="_blank" title="vignettes de Flickr">vignettes d'un ensemble de photos (Photostream) Flickr</a> sur son Blog.<br /><br />Afficher les <a href="http://viti-vino.blogspot.com/2011/01/vignettes-flickr.html" target="_blank" title="vignettes de Flickr">vignettes d'un ensemble de photos (Photostream) Flickr</a> sur son Blog, avec un Gadget Blogger.<br /><br />Placer un <a href="http://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Diaporama de Picasa">Diaporama de Picasa</a> sur son Blog, en utilisant un code iframe.<br /><br />Un gadget Google pour afficher des <a href="http://viti-vino.blogspot.com/2010/12/galerie-horizontale-images-accordeon.html" target="_blank" title="Photos en accordéon dans une galerie horizontale">photos en accordéon dans une galerie horizontale</a>.<br /><br />Le <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" title="Flux Media RSS" target="_blank">Flux Media RSS pour afficher un Diaporama</a> (anglais).Unknownnoreply@blogger.com26tag:blogger.com,1999:blog-4210934724484789456.post-90416123182368789432010-01-10T20:21:00.026+01:002014-09-28T18:10:09.598+02:00Jouer un fichier *.mp3 sur son Blog<strong>Jouer un Mp3 sur son Blog</strong><br /><br />Pour insérer un son sur son Blog, il faut un lecteur Flash qui <b><i>joue le fichier *.mp3</i></b>. Il faut donc héberger un lecteur Flash en plus des fichiers *.mp3.<br />Pour mémoire, Blogger n'offre pas d'hébergement de fichiers.<br /><br /><strong>L'hébergement gratuit</strong><br /><br /><a href="http://sites.google.com/" target="_blank" title="Google Sites">Google Sites</a> autorise l'hébergement (gratuit) de fichiers Flash (*.mp3) ainsi que de fichiers son (*.mp3). La limite d'un compte gratuit est de 100 Mégas. Les fichiers doivent être téléchargés dans une <a href="http://sites.google.com/support/bin/answer.py?hl=fr&answer=98360" target="_blank" title="Utilisation de pages classeur">Page Classeur (File Cabinet)</a>. Une restriction cependant, les fichiers doivent être utilisés sur un Blog hébergé sur un <span style="font-weight:bold;">Domaine Internet Google</span> (Blogger). <br /><br /><strong>Les lecteurs Dewplayer</strong><br /><br /><a href="http://www.alsacreations.fr/dewplayer" target="_blank" title="Alsacréations - Dewplayer">Alsacréations</a> a développé plusieurs lecteurs Flash.<br />Le fichier *.zip disponible en téléchargement contient tous les modèles, pour utiliser le modèle <em><strong>Classic</strong></em> par exemple, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : <br /><br /><div style="background: infobackground;"><br /><object type="application/x-shockwave-flash" <br />data="http://<span style="color: #c00">URL</span>/dewplayer.swf"<br />width="220" height="20" id="dewplayer" name="dewplayer"><br /><param name="movie" value="http://<span style="color: #c00">URL</span>/dewplayer.swf" /><br /><param name="flashvars" value="mp3=http://<span style="color: #c00">URL</span>/<span style="color: #c00">son</span>.mp3" /><br /></object><br /><br/></div><br /><br />Le résultat (<em>Carl Orff, Carmina Burana, O Fortuna</em>) : <br /><br />
<center><br />
<object type="application/x-shockwave-flash" data="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/dewplayer.swf" width="220" height="20" id="dewplayer" name="dewplayer"><param name="movie" value="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/dewplayer.swf" /><param name="flashvars" value="mp3=https://sites.google.com/site/annuairevin/files/carl_orff_carmina_o_fortuna.mp3" /></object></center>
<br /><br /><br /><strong>Le lecteur audio de Google</strong><br /><br />C'est le lecteur intégré dans <a href="http://mail.google.com" target="_blank" title="Google Mail">Google Mail</a> : <br /><br /><div style="background: infobackground;"><br />https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf<br /><br /></div><br /><br />Pour l'utiliser, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : <br /><br /><div style="background: infobackground;"><br /><object data="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf?audioUrl=http://<span style="color: #c00">URL</span>/<span style="color: #c00;">son</span>.mp3"<br />width="220" height="25" type="application/x-shockwave-flash"><br /><param value="transparent" name="wmode"/><br /><param value="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf?audioUrl=http://<span style="color: #c00;">URL</span>/<span style="color: #c00;">son</span>.mp3" <br />name="movie"/><br /></object><br/><br /></div><br /><br />Le résultat (<em>Bach BWV 243, Gloria Patri</em>) : <br /><br />
<center><br /><object data="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf?audioUrl=https://sites.google.com/site/annuairevin/files/bach_243_gloria_patri.mp3" width="220" height="25" type="application/x-shockwave-flash"><param value="transparent" name="wmode"/><param value="https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio.swf?audioUrl=https://sites.google.com/site/annuairevin/files/bach_243_gloria_patri.mp3" name="movie" /></object></center>
<br /><br /><strong>Le lecteur multi-média de Google</strong><br /><br />Le lecteur multi-média de <a href="http://www.google.fr/reader/" target="_blank" title="Google Reader - lecteur multi-media">Google Reader</a> est disponible à l'adresse suivante : <br /><br /><div style="background: infobackground;"><br />https://googledrive.com/host/0B4yfJJJSNrfubzNjVFhHVm94TGM/google-audio-step.swf<br /><br /><br /></div><br /><br />Pour l'utiliser, nous allons l'appeler avec un <a href="http://sites.google.com/site/annuairevin/playing-sounds-in-google-sites" target="_blank" title="Gadget Google">Gadget Google</a>, selon la technique décrite dans le <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Blog d'Aide pour Blogger">Blog d'Aide pour Blogger</a>, en utilisant le Gadget suivant : <br /><br />
<center><br /><a href="https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step.xml" target="_blank" title="Google - lecteur audio"><img alt="google-audio-step.xml" src="http://www.liens-du-vin.ch/_pic061/odeo-flash-screen.png" style="border-width:0px;width:120px;height:90px;" title="google-audio-step.xml" /></a><br /><a href="https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step.xml" target="_blank" title="Google Gadget - Google Audio Player"><font size="1">google-audio-step.xml</font></a></center><br /><br />Le code du <a href="http://www.w3schools.com/TAGS/tag_iframe.asp" target="_blank" title="iframe">iframe</a> à saisir dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : <br /><br />
<div style="background: infobackground;"><br />
<iframe style="width: 350px; height: 26px;"<br/>
src="http://www.gmodules.com/gadgets/ifr?<br/>
url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step.xml<br/>
&up_MP3=<span style="color: #cc0000;">URL fichier mp3</span><br/>
&up_START=No<br/>
&up_CCOL=%23eeeecc"<br/>
allowTransparency="true" frameborder="0" scrolling="no"></iframe><br/>
<br/></div>
<br /><br />Le résultat (<em>Mozart, Requiem Dies Irae</em>) : <br /><br /><center><br />
<iframe style="width: 350px; height: 26px;" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-audio-step.xml&up_MP3=https://sites.google.com/site/annuairevin/files/mozart_req_dies_irae.mp3&up_START=No&up_CCOL=%23eeeecc" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Lecteur multimédia de Google - http://www.liens-du-vin.ch/google-audio_player-script.htm</iframe>
<br /></center>
<br /><br /><strong>Plus d'informations</strong><br /><br />
<a href="http://www.liens-du-vin.ch/flash_dewplayer-script.htm" target="_blank" title="Les lecteurs Flash de Dewplayer">Les Lecteurs Flash de Dewplayer pour jouer des fichiers *.mp3</a>
<br /><br />
<a href="http://viti-vino.blogspot.com/2010/01/fichiers-joints-podcasting-blogger.html" target="_blank" title="Podcasting et fichiers joints sur Blogger">Podcasting et fichiers joints sur Blogger</a>
<br /><br /><a href="http://viti-vino.blogspot.ch/p/gadgets.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a>
<br /><br />
<a href="http://www.liens-du-vin.ch/odeo-gadget-script.htm" target="_blank" title="Un Gadget Google pour ajouter le lecteur Flash d'ODEO">Un Gadget Google pour ajouter le lecteur Flash d'ODEO</a><br /><br /><a href="http://sites.google.com/site/annuairevin/playing-sounds-in-google-sites" target="_blank" title="Des lecteurs multi-media pour son Site ou son Blog">Des lecteurs multi-média pour son Site ou son Blog (anglais)</a><br /><br /><a href="http://www.liens-du-vin.ch/sonoriser-images.htm" target="_blank" title="Sonoriser ses images avec Dewplayer">Sonoriser ses images avec Dewplayer</a> <br /><br /><a href="http://www.liens-du-vin.ch/playing-mp3-files.html" target="_blank" title="Une playlist sur son Site ou son Blog">Une Playlist sur son Site ou son Blog (anglais)</a><br /><br /><a href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Trucs et astuces pour Google Sites">Trucs et astuces pour Google Sites (anglais)</a><br /><br/> <br/>Unknownnoreply@blogger.com54tag:blogger.com,1999:blog-4210934724484789456.post-4210202909105189522009-09-11T17:55:00.008+02:002010-01-20T01:03:33.220+01:00Lire la Suite... suite<strong>Un cadeau pour les 10 ans de Blogger</strong><br /><br />Intégrer le mécanisme <a href="http://aide-blogger-fr.blogspot.com/2008/03/afficher-une-partie-du-message.html" target="_blank" title="Lire la suite...">Lire la Suite</a> demandait plusieurs modifications importantes du modèle.<br /><br /><a href="http://buzz.blogger.com/2009/09/you-might-as-well-jump.html" target="_blank" title="Lire la Suite...">Blogger vient d'intégrer ce mécanisme</a> dans l'éditeur de message. <br /><br /><br /><strong>Pour activer l'insertion d'un saut</strong><br /><br />- Utiliser <a href="http://draft.blogger.com" target="_blank" title="Blogger in Draft">Blogger in Draft</a> ou avec la version classique de Blogger, le nouvel éditeur : Outil / <em>Insérer un saut</em> <br /><br />- Plus simplement, avec l'onglet <em>Modifier le code HTML</em>, il suffit d'insérer le commentaire HTML<br /><br /><div style="background-color: infobackground;"><br/><!-- more --><br/><br/></div><br /><br /><br /><strong>Pour définir le texte du saut</strong><br /><br />- Paramètres / Mise en page / Eléments de la page<br /><br />- Messages du Blog / Modifier<br /><br /><div style="background-color: infobackground;"><br/>Texte du lien de la page de messages<br/><br/></div><br /><br /><br /><span style="font-weight:bold;">Problème connu</span><br /><br />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.<br /><br />S'agissant de <a href="http://www.youtube.com" title="Youtube" target="_blank">Youtube</a>, il est possible d'<a href="http://aide-blogger-fr.blogspot.com/2008/12/videos-de-youtube-en-haute-qualite.html" target="_blank" title="YouTube un gadget pour afficher ses videos">utiliser un gadget</a> ou, plus simplement de remplacer le code fournit par YouTube par un tag iframe (à insérer dans le html du message).<br /><br />Le code fournit par YouTube :<br /><br /><div style="background: infobackground;"><br /><object width="<span style="color:#c00;">320</span>" height="<span style="color:#c00;">265</span>"><param name="movie" value="<span style="color:#c00;">http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b</span>"></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><br /><br /></div><br /><br />Le même code dans un iframe :<br /><br /><div style="background: infobackground;"><br /><iframe src="<span style="color:#c00;">http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b</span>" style="<span style="color:#c00;">320</span>px; height: <span style="color:#c00;">265</span>px;" allowTransparency="true" frameborder="0" scrolling="no">Remplacer le code object par un iframe</iframe><br /><br /></div><br /><br /><br /><strong>Plus d'informations</strong><br /><br />- <a href="http://www.google.com/support/blogger/bin/answer.py?answer=154172" target="_blank" title="Creating 'After the jump' summaries">L'article de l'aide de Blogger</a><br /><br />- <a href="http://bloggerstop.net/2009/09/blogger-read-more-sidebar-errors-fixed.html" target="_blank" title="Errors Fixed - Blogger Jump Break (Truncated Posts) ">Couper le message : les erreurs fréquentes</a>Unknownnoreply@blogger.com24tag:blogger.com,1999:blog-4210934724484789456.post-13364993843349888552009-09-02T16:03:00.003+02:002009-09-02T16:08:30.328+02:00modération des commentaires (message d'administration)Bonjour à tous,<br /><br />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.<br /><br />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".<br /><br />a+<br />BB.Anonymoushttp://www.blogger.com/profile/03493000388301801592noreply@blogger.com7tag:blogger.com,1999:blog-4210934724484789456.post-18767798875260477192009-02-25T22:33:00.025+01:002009-12-21T22:52:48.663+01:00Geolocaliser les messages du blog<strong>Le Geotagging pour Blogger<br /></strong><br />Même si l'insertion d'une <a title="carte dans les messages du blog" href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html" target="_blank">carte dans les messages du blog</a> reste une opération simple, il est fastidieux d'ajouter une carte après chaque message si l'on désire <strong>géolocaliser son message</strong>.<br /><br /><a title="Blogger in draft" href="http://draft.blogger.com/" target="_blank">Blogger in draft</a> vient à notre secours en permettant de géolocaliser le message par un simple lien vers une carte de <a title="Google Maps" href="http://maps.google.ch/" target="_blank">Google Maps</a>.<br /><br /><br /><strong>Modifier le modèle du Blog</strong><br /><br />S'enregistrer sous <a title="Blogger in draft" href="http://draft.blogger.com/" target="_blank">Blogger in draft</a>. Cette version <strong><em>Brouillon</em></strong>, ne réalise pas les opérations suivantes qu'il faut (encore) effectuer soi-même.<br /><br />1 - Effectuer une sauvegarde du modèle, en cliquant sur <strong><em>Télécharger le modèle dans son intégralité</em></strong>.<br /><br />2 - Modifier le modèle pour enregistrer un <a title="espace de noms georss" href="http://xmlfr.org/documentations/tutoriels/050912-0001" target="_blank">espace de noms</a> supplémentaire, l'espace <strong>georss</strong><br /><br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><strong>Paramètres / Mise en Page / Modifier le code HTML</strong><br /></span><br /></div><br /><br />Ajouter l'espace de noms <strong><span style="color:#ff0000;">georss</span></strong><br /><br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html expr:dir='data:blog.languageDirection'<br />xmlns='http://www.w3.org/1999/xhtml'<br />xmlns:b='http://www.google.com/2005/gml/b'<br />xmlns:data='http://www.google.com/2005/gml/data'<br />xmlns:expr='http://www.google.com/2005/gml/expr' <span style="color:#ff0000;"><strong>xmlns:georss='http://www.georss.org/georss'</strong></span>><br /></span><br /></div><br /><br />3 - Cliquer sur <strong><em>Développer des modèles de gadgets</em></strong><br /><br />4 - Rechercher le pied de message :<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><pre><br /><div class='post-footer'><br /> <div class='post-footer-line post-footer-line-1'><br /><br /><span class='post-author vcard'><br /> <b:if cond='data:top.showAuthor'><br /> <data:top.authorLabel/><br /> <span class='fn'><br /> <data:post.author/><br /> </span><br /> </b:if><br /></span><br /><br /><span class='post-timestamp'><br /> <b:if cond='data:top.showTimestamp'><br /> <data:top.timestampLabel/><br /> <b:if cond='data:post.url'><br /> <a class='timestamp-link' expr:href='data:post.url'<br /> rel='bookmark' title='permanent link'><br /> <abbr class='published'<br /> expr:title='data:post.timestampISO8601'><br /> <data:post.timestamp/></abbr></a><br /> </b:if><br /> </b:if><br /></span<br /><br /> <span style="color:#ff0000;"><strong>*** INSERER ICI ***</strong></span><br /><br /><span class='post-comment-link'><br />...<br /></pre><br /></div><br /><br /><p></p>5 - Avant le lien des commentaires (post-comment-link) insérer<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><pre><br /><span class='post-location'><br /><b:if cond='data:top.showLocation'><br /><b:if cond='data:post.location'><br /><data:postLocationLabel/><br /><a expr:href='data:post.location.mapsUrl' target='_blank'><br /> <data:post.location.name/></a><br /></b:if><br /></b:if><br /><br/><br /></span><br /> </pre></div>6 - Sauver le modèle<br /><br /><br /><strong>Le geotagging des messages</strong><br /><br /><br /><p><a title="Blogger in draft, geotagging" href="http://bloggerindraft.blogspot.com/2008/12/new-feature-geotagging.html" target="_blank"><img title="Blogger in draft, geotagging" style="DISPLAY: block; MARGIN: auto; WIDTH: 176px" alt="Blogger in draft, geotagging" src="http://www.liens-du-vin.ch/_pic061/blogger-draft.jpg" /></a><br /><br />A partir de <a title="Blogger in draft, geotagging" href="http://bloggerindraft.blogspot.com/2008/12/new-feature-geotagging.html" target="_blank">l'article de référence</a>, voyons comment géolocaliser un message.<br /><br />1 - Rester sous la version <span lang="eng">draft</span> (brouillon), et éditer le message<br /><br />2 - L'éditeur de message comporte une nouvelle option : <strong><em>Pays/territoire, ajouter un lieu</em></strong> (onglet edition HTML)<br /><br /><img title="Ajouter un lieu" style="DISPLAY: block; MARGIN: auto; WIDTH: 220px" alt="Ajouter un lieu" src="http://www.liens-du-vin.ch/_pic061/georss-localisation.jpg" /><br /><br />3 - Saisir le lieu géographique en effectuant une recherche, de la même manière que dans la grille de recherche de <a title="Google Maps - recherche" href="http://maps.google.ch/" target="_blank">Google Maps</a><br /><br />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<br /><br />5 - Enregistrer. On a ainsi saisi la latitude et la longitude du point géographique à associer au message<br /><br /><img title="Pays/territoire" style="DISPLAY: block; MARGIN: auto; WIDTH: 225px" alt="Pays/territoire" src="http://www.liens-du-vin.ch/_pic061/georss-pays.jpg" /><br /></p><p><br /><strong>Le résultat</strong><br /><br />Chaque message géolocalisé va comporter la mention Pays/Territoire et l'indication du lieu géographique.<br /><br />Le code source du blog comporte un lien vers Google Maps avec <a title="paramètres de Google Maps" href="http://mapki.com/index.php?title=Google_Map_Parameters" target="_blank">les paramètres</a> suivants (exemple, Rolle, Suisse) :<br /></p><div style="BACKGROUND: infobackground"><br />http://maps.google.com/maps?q=Rolle, Suisse@46.4707,6.3360&z=10<br /><br /></div><br /><br />Le lien va s'ouvrir dans une fenêtre indépendante, comme dans l'exemple ci-dessous (le pied du message géolocalisé) :<br /><br /><a title="Pays/territoire : Rolle, Suisse" href="http://maps.google.com/maps?q=Rolle%2C+Suisse%4046.47073405889666%2C6.336021423339844&z=10" target="_blank"><img title="Pays/territoire : Rolle, Suisse" style="DISPLAY: block; MARGIN: auto; WIDTH: 343px" alt="Pays/territoire : Rolle, Suisse" src="http://www.liens-du-vin.ch/_pic061/message-geolocalisation.jpg" /></a><br /><br />Blogger va modifier les <a title="Flux RSS et Atom" href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank">Flux RSS et Atom</a> du blog et ajouter les tags :<br /><br /><div style="BACKGROUND: infobackground"><br /><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0"><br />0<br /></thr:total><br /><georss:point>lat long</georss:point><br /><br /></div><p><br /><br />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.</p><p><br /><br /><br /><strong>Verifier le nouveau flux avec Google Maps</strong><br /><br />Le nouveau flux du blog contenant maintenant les coordonnées des points géographiques, nous pouvons l'importer sur une carte de Google Maps<br /><br />Ouvrir une carte, et cliquer sur <strong>Modifier</strong>. Choisir l'option <strong>Importer</strong> et saisir l'adresse du flux RSS du blog :<br /></p><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><strong>http://<span style="color:#ff0000;">NOMDUBLOG</span>.blogspot.com/feeds/posts/default?alt=rss<br /></strong></span><br /></div><br /><br />La carte doit comporter tous les géotags définis dans chaque message. Le marqueur donne accès à l'article correspondant du blog.<br />Nous passons ainsi de la carte sur le blog, à l'inverse, <strong>le blog sur la carte</strong> !!<br /><br />Un exemple avec la carte des <a title="Le blog des Découvertes des Liens du Vin" href="http://viti-vino-feed.blogspot.com/" target="_blank">Découvertes des Liens du Vin</a> : <br /><br /><div style="width:260px; height: 45px; margin: auto; border: solid 1px red; text-align: center;"><br/><a title="Le blog sur la carte" href="http://maps.google.ch/maps/ms?hl=fr&ie=UTF8&msa=0&msid=102376698569738400439.000463b10fb9176d79800&ll=46.626806,6.080933&spn=2.165383,3.587036&z=8" target="_blank">Le Blog sur la carte</a><br/> </div><br /><br /><strong>Limitation</strong><br /><br />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.<br /><br /><br /><p><strong>Un gadget pour créer le blog sur la carte de façon dynamique</strong><br /><br />Pour générer une carte Google Maps, avec tous les articles geocodés, Blogger propose le gadget : </p><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><strong>http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml</strong></span><br /><br /></div><br /><br />L'insertion de ce gadget se fait avec :<br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><strong>Paramètres / Mise en Page / Eléments de la page / Ajouter gadget</strong><br /></span><br /></div><br /><br />Choisir l'option <strong><em>Ajouter votre propre (gadget)</em></strong> et saisir l'adresse URL du gadget.<br /><br />Pour ajouter le <a title="Gadget dans le message" href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank">gadget dans un message</a>, suivre les indications de l'article du blog d'aide.<br /><br />Pour configurer le gadget, saisir l'adresse du flux RSS du blog<br /><br /><div style="BACKGROUND: infobackground"><br /><strong><span style="font-family:arial;font-size:85%;">http://<span style="color:#ff0000;">NOMDUBLOG</span>.blogspot.com/feeds/posts/default?alt=rss</span><br /></strong><br /></div><br /><br />Une fois le champ Blog's geoRSS feed URL renseigné, cliquer sur <strong><em>Mettre à jour</em></strong>, saisir à nouveau l'adresse du flux et ajuster la carte<br /><br /><img title="Gadget - geotagging" style="DISPLAY: block; MARGIN: auto; WIDTH: 390px" alt="Gadget - geotagging" src="http://www.liens-du-vin.ch/_pic061/georss-gadget.jpg" /><br /><br />La carte générée par le gadget positionne les marqueurs en fonction de la géolocalisation des messages du blog.<br />La bulle d'information du marqueur permet d'ouvrir une fenêtre indépendante avec le message intégral.<br /><br /><div style="MARGIN: auto; WIDTH: 390px"><br /><img height="1" src="http://gmodules.com/ig/rgp?synd=blogger&lang=fr&source=http%3A%2F%2Fviti-vino-feed.blogspot.com%2F&n=1&url1=http%3A%2F%2Fhosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-blogmap.xml" width="1" /><br /><iframe id="1" style="DISPLAY: block; WIDTH: 95%" name="1" src="http://1.blogger.gmodules.com/gadgets/ifr?container=blogger&mid=1&v=edb8b37cde0f73209e76adefcd64af&lang=fr&country=FR&view=default&up_feedUrl=http%3A%2F%2Fviti-vino-feed.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&up_height=250&url=http%3A%2F%2Fhosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-blogmap.xml&mid=1&parent=http%3A%2F%2Fviti-vino-feed.blogspot.com%2F" frameborder="0" height="250"><br /></iframe><br /></div><br /><br /><strong>Plus d'informations</strong><br /><br />L'article de référence, <a title="Blogger in draft Geotagging" href="http://bloggerindraft.blogspot.com/2008/12/new-feature-geotagging.html" target="_blank">Blogger in draft, Geotagging</a><br /><br />Placer une <a title="Une carte personnalisée dans le message du blog" href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html" target="_blank">carte personnalisée dans le message du blog</a><br /><br />Géolocaliser rapidement une adresse avec un <a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html#maps" target="_blank" title="Google Web Elements - Maps">Google Web Elements</a> <br /><br />Insérer une <a title="Insérer une carte sur Google Sites" href="http://sites.google.com/site/annuairevin/integrating-google-maps" target="_blank">carte sur Google Sites</a><br /><br />Les <a title="Les vignes vues du ciel" href="http://www.liens-du-vin.ch/_winemap/index.asp" target="_blank">vignes vues du ciel</a>Unknownnoreply@blogger.com21tag:blogger.com,1999:blog-4210934724484789456.post-59161604686965414952008-12-30T14:59:00.033+01:002012-04-28T20:58:30.063+02:00Videos de YouTube en Haute Qualite<br/>
Pour insérer un lecteur YouTube, il suffit d'insérer un tag <strong><em>iframe</em></strong>, selon les indications données par <a href="http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html" titile="iframe - YouTube" target="_blank">Youtube</a>. Les paramètres du lecteur peuvent être spécifiés, selon les indications de la <a href="https://developers.google.com/youtube/player_parameters" target="_blank" title="Player Youtube - Paramètre">documentation</a>. L'insertion par un tag iframe, permet la lecture d'une video sur une tablette (iPad) ne supportant pas le format Flash.
<br><br>
Il est possible d'utiliser un <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Gadget Google">Gadget Google</a>. Le code du gadget peut être placé dans le html du message, ou dans un gadget HTML / Javascript. Les <b>paramètres</b> peuvent être précisés simplement, selon les indications données sur la page du <a href="http://www.liens-du-vin.ch/youtube-player-script.htm" target="_blank" title="gadget YouTube">Gadget YouTube</a>.
<br><br>
Par exemple, j ai inséré ci-dessous la vidéo d'un dégustation du <a href="http://www.chatagnereaz.ch" target="_blank" title="Château de Châtagneréaz">Château de Châtagneréaz Grand Cru 2010</a>. 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.
<br/><br/>
<center><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">Gadget Google - Lecteur YouTube - http://www.liens-du-vin.ch/youtube-player-script.htm</iframe>
<br/><br/>
<a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/youtube-player.xml" style="border: none; text-decoration: none;" target="_blank" title="Player YouTube - youtube-player.xml"><img alt="Ajouter ce Gadget à Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Add this gadget to Google" border="0" height="17" width="104"></a></center>
<br/><br/>
Le code html à insérer (à saisir sans espaces ni retour à la ligne) :
<br/><br/>
<div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;">
<br/>
<iframe style="width: 430px; height: 270px;"<br/>
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/youtube-player.xml<br/>
&up_Video=<strong>pIeXrj86F3w</strong><br/>
&up_Taille=425 x 264<br/>
&up_Qualite=HQ720<br/>
&up_Theme=Clair<br/>
&up_Curseur=Blanc<br/>
&up_Plein=Oui<br/>
&up_Videosim=Non<br/>
&up_Demarrage=Non<br/>
&up_Controle=Sans<br/>
&up_BCOL=%23558866<br/>
&up_CCOL=%23eeeecc"<br/>
allowTransparency="true" frameborder="0" scrolling="no"><br/>
</iframe><br/>
<br/>
</div>
<br/><br/>
<center>
<a href="http://www.youtube.com/watch?v=pIeXrj86F3w" target="_blank" title="Château de Châtagneréaz 2010"><img src="http://img.youtube.com/vi/pIeXrj86F3w/default.jpg" title="YouTube - Dégustation Châtagneréaz" alt="YouTube - Dégustation Châtagneréaz"></a>
</center>
<br/><br/>
<hr>
<br/><br/>
<div style="color: #cc0000;">
<strong>Important : </strong> mise à jour d'avril 2012<br/><br/>
Les informations ci-dessous sont <strong>obsolètes</strong> suite à différentes mises à jour de l'<a href="https://developers.google.com/youtube/iframe_api_reference" target="_blank" title="IFrame API">API Youtube</a>
</div>
<br/><br/>
<hr>
<br/><br/>
Depuis fin 2008, <span style="font-weight:bold;">YouTube</span> permet d'enregistrer et de visionner des vidéos en <span style="font-weight:bold;">Haute Qualité</span>.<br /><br /><strong>Les formats disponibles :</strong><br /><br /><img title="Les formats YouTube" style="DISPLAY: block; MARGIN: auto; WIDTH: 409px" alt="Les formats YouTube" src="http://www.liens-du-vin.ch/_pic061/youtube-quality.jpg" /><br /><br /><strong>Visionner une vidéo en Haute Qualité</strong><br /><br />Pour visionner en Haute Qualité la Vidéo : <a title="Dance - Where the Hell is Matt (2008) ?" href="http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22" target="_blank">Dance - Where the Hell is Matt?(2008)</a>, il faut indiquer l'adresse normale d'une vidéo YouTube, suivie du paramètre fmt=22 :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><a href="http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22">http://www.youtube.com/watch?v=<span style="color: rgb(255, 102, 0);"><strong>zlfKdbWwruY</strong></span>&<strong><span style="color: rgb(0, 153, 0);">fmt=22</span></strong></a><br /><br /></div><br /><br /><strong>Insérer une vidéo en Haute Qualité sur son Blog</strong><br /><br />YouTube fournit le code suivant à insérer sur son blog (à insérer sans retour à la ligne) :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><object width="445" height="284"><br /><param name="movie"<br />value="http://www.youtube.com/v/<strong><span style="color: rgb(255, 102, 0);">zlfKdbWwruY</span></strong><br />&hl=fr<br />&fs=1<br />&color1=0x234900&color2=0x4e9e00&border=1"></param><br /><param name="allowFullScreen" value="true"></param><br /><param name="allowscriptaccess" value="always"></param><br /><embed<br />src="http://www.youtube.com/v/<strong><span style="color: rgb(255, 102, 0);">zlfKdbWwruY</span></strong><br />&hl=fr<br />&fs=1<br />&color1=0x234900&color2=0x4e9e00&border=1"<br />type="application/x-shockwave-flash"<br />allowscriptaccess="always" allowfullscreen="true"<br />width="445" height="284"><br /></embed><br /></object><br /><br /></div><br /><br />L'ajout du paramètres <span style="color: rgb(0, 153, 0);"><strong>fmt=22</strong></span> ne <strong>permet pas</strong> d'insérer la version Haute Qualité de la vidéo sur son blog !<br />Pour celà il faut ajouter un paramètre caché : <strong><span style="color: rgb(255, 0, 0);">ap</span></strong>, avec le paramètre <strong><span style="color: rgb(0, 153, 0);">fmt=22</span></strong> <a title="URLEncode" href="http://www.albionresearch.com/misc/urlencode.php" target="_blank">URLEncodé</a> . Ce qui donne :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><strong><span style="color: rgb(255, 0, 0);">ap</span></strong>=%2526<strong><span style="color: rgb(0, 153, 0);">fmt%3D22<br /></span></strong><br /><br /></div><br /><br />Le code à insérer sur le blog devient donc (toujours sans retour à la ligne) :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><object width="445" height="284"><br /><param name="movie"<br />value="http://www.youtube.com/v/<strong><span style="color: rgb(255, 102, 0);">zlfKdbWwruY<br /></span>&<span style="color: rgb(255, 0, 0);">ap=%2526fmt%3D22</span></strong><span style="color: rgb(255, 0, 0);"> </span><br />&hl=fr<br />&fs=1<br />&color1=0x234900&color2=0x4e9e00&border=1"></param><br /><param name="allowFullScreen" value="true"></param><br /><param name="allowscriptaccess" value="always"></param><br /><embed<br />src="http://www.youtube.com/v/<strong><span style="color: rgb(255, 102, 0);">zlfKdbWwruY<br /></span></strong>&<strong><span style="color: rgb(255, 0, 0);">ap=%2526fmt%3D22</span></strong><br />&hl=fr<br />&fs=1<br />&color1=0x234900&color2=0x4e9e00&border=1"<br />type="application/x-shockwave-flash"<br />allowscriptaccess="always" allowfullscreen="true"<br />width="445" height="284"><br /></embed><br /></object><br /><br /></div><br /><br />On obtient le résultat suivant (lecteur 356 x 228, bordure verte, texte français) : <br /><br /><div style="text-align: center;"><br /><object height="228" width="356"><param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY&ap=%2526fmt%3D22&hl=fr&fs=1&color1=0x234900&color2=0x4e9e00&border=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><br /><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" height="228" width="356"></embed></object><br /></div><br /><div align="center"><span style="font-size:85%;"><a title="Dancing - Video YouTube Haute Qualité (fmt=22)" href="http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22" target="_blank">Dancing - Video YouTube Haute Qualité (fmt=22)</a></span></div><br /><br /><strong>En cas de problèmes</strong><br /><br />YouTube affiche le message suivant : <i><b>Désolé, cette vidéo n'est plus disponible</b></i> (<span lang="en"><i><b>We're sorry, this video is no longer available</b></i></span>) 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é. <br /><br /><br /><strong>Insérer la Video avec un tag iframe</strong><br /><br /><a href="http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html" target="_blank" title="YouTube - iframe">YouTube autorise</a> depuis juillet 2010 l'insertion d'une video avec un simple tag iframe. L'exemple ci-dessus donne le code html :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><iframe width="445" height="284" <br />src="http://www.youtube.com/v/<b><span style="color: rgb(255, 102, 0);">zlfKdbWwruY&ap=%2526fmt%3D22</span></b>&hl=fr&fs=1&color1=0x234900&color2=0x4e9e00&border=1" frameborder="0">Video de youtube</iframe><br /><br /></div><br /><br /><br /><strong>Un gadget pour insérer une Video YouTube</strong><br /><br />Google a développé une <a title="Google Gadget - API Flash" href="http://code.google.com/intl/fr/apis/gadgets/docs/legacy/ui.html" target="_blank">API comportant un lecteur Flash</a>. Le gadget suivant utilise ce lecteur et évite l'insertion des codes <object> et <embed> pour afficher <a title="YouTube Embedded Player Parameters" href="http://code.google.com/intl/eng-USA/apis/youtube/player_parameters.html" target="_blank">un lecteur YouTube</a> sur son blog.<br /><br /><div style="text-align: center;"><a title="youtube-player.xml" style="border: 0px none ;" href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/youtube-player.xml" target="_blank"><img title="youtube-player.xml" style="border: 0px none ; width: 120px; height: 90px;" alt="youtube-player.xml" src="http://www.liens-du-vin.ch/_pic061/youtube-player-thumb.png" /></a></div><br /><div style="text-align: center;margin-top:5px;" ><a title="Haute Qualité - lecteur YouTube" href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/youtube-player.xml" target="_blank"><span style="font-size:78%;">youtube-player.xml</span></a><span style="font-size:85%;"></span></div><br /><br /><strong>Insérer le Gadget Google lecteur YouTube </strong><br /><br />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.<br /><br />Rien n'est prévu pour ajouter un Gadget dans le corps du message. Il faut utiliser la <a title="Insérer un gadget dans le corps du message" href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank">technique décrite dans un message précédent</a>.<br /><br />Les paramètres du Gadget :<br /><br /><div style="background: infobackground none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br /><strong>Video</strong> : Le code de la Video YouTube, <span style="color: rgb(255, 102, 0);"><strong>zlfKdbWwruY</strong></span> dans l'exemple ci-dessus<br /><strong>Taille</strong> : 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)<br /><strong>Couleurs</strong> : gris blanc, noir gris, bleu gris, bleu, vert, orange, rose, violet, rouge<br /><strong>Bordure</strong> : oui ou non<br /><strong>Recherche</strong> : Grille de recherche YouTube, oui ou non (oui n'est valide que si Videosim est à oui)<br /><strong>Videosim</strong> : Videos similaires à la fin de la vidéo, oui ou non<br /><strong>Démarrage</strong> : Automatique lors de l'affichage de la page, oui ou non<br /><strong>Qualite</strong> : Normal, Haute, Haute (iPod), Très Haute<br /><strong>Plein</strong> : oui ou non, autoriser l'affichage plein écran<br /><strong>BoxBcol</strong> : Code #rrggbb couleur du fond<br /><br /></div><br /><br /><strong>Note</strong> : Indiquer une taille pour le gadget en fonction de la taille choisie pour la Vidéo (par défaut, 860 x 520)<br /><br /><span style="font-weight:bold;">La comparaison</span><br /><br /><center><br /><br /><iframe style="width: 425px; height: 270px;" src="http://141.gmodules.com/ig/ifr?mid=141&synd=open&url=http%3A%2F%2Fhosting.gmodules.com/ig/gadgets/file/108621208120033273647%2Fyoutube-player.xml&up_Video=zlfKdbWwruY&up_Taille=425%20x%20264&up_Couleurs=vert&up_Bordure=non&up_Recherche=non&up_Videosim=non&up_Demarrage=non&up_Qualite=Normal&up_Plein=oui&up_BoxBcol=%23eeeecc" allowtransparency="true" scrolling="no" frameborder="0">YouTube - Qualité normale</iframe></center><br /><center style="font-size: 0.9em;">YouTube - Qualité Normale</center><br /><center><br /><iframe style="width: 425px; height: 270px;" src="http://59.gmodules.com/ig/ifr?mid=59&synd=open&url=http%3A%2F%2Fhosting.gmodules.com/ig/gadgets/file/108621208120033273647%2Fyoutube-player.xml&up_Video=zlfKdbWwruY&up_Taille=425%20x%20264&up_Couleurs=vert&up_Bordure=non&up_Recherche=non&up_Videosim=non&up_Demarrage=non&up_Qualite=Tr%C3%A8s%20haute&up_Plein=oui&up_BoxBcol=%23eeeecc&h=270&w=425" allowtransparency="true" scrolling="no" frameborder="0" >YouTube - Qualité Très haute</iframe></center><br /><center style="font-size: 0.9em;">YouTube - Qualité Très haute</center><br /><br /><strong>Plus d'informations</strong><br /><br />Le <a href="http://www.liens-du-vin.ch/youtube-player-script.htm" target="_blank" title="Player de YouTube dans un message du Blog">Player de YouTube dans un message du Blog</a><br /><br /><a title="Des Gadgets pour son Blog" href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank">Des Gadgets pour son Blog</a><br /><br />Les Actualités sur YouTube, avec un <a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html#youtube_news" target="_blank" title="Google Web Elements - YouTube News">Google Web Elements</a><br /><br />Utiliser <a title="Le lecteur YouTube avec Google Sites" href="https://sites.google.com/site/annuairevin/inserting-youtube-player" target="_blank">Le lecteur YouTube avec Google Sites</a><br /><br/>Unknownnoreply@blogger.com9tag:blogger.com,1999:blog-4210934724484789456.post-65589201808960126842008-11-23T17:55:00.021+01:002009-05-31T17:22:50.648+02:00Encadrer ses textes<script language="Javascript" type="text/javascript">var cssNode = document.createElement('link');cssNode.type = 'text/css';cssNode.rel = 'stylesheet';cssNode.href = 'http://www.liens-du-vin.ch/style-box.css';cssNode.media = 'screen';cssNode.title = 'une feuille de style pour 1 post';document.getElementsByTagName("head")[0].appendChild(cssNode);</script><br /><strong>Un cadre pour ses textes</strong><br /><br />Avec un peu de CSS (<span lang="en">Cascading Style Sheets</span>) il est possible d'encadrer ses textes avec des blocs div<br /><br /><br /><strong>Une boîte de texte</strong><br /><br />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).<br /><br /><img title="Boîte de texte" style="DISPLAY: block; MARGIN: auto; WIDTH: 243px" alt="Boîte de texte" src="http://www.liens-du-vin.ch/_pic061/textbox.jpg" /><br /><br /><br /><strong>Le code html</strong><br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><div class="<span style="color:#cc0000;"><strong>textbox</strong></span>"><br /><div class="<span style="color:#cc0000;"><strong>textboxtop</strong></span>"><strong>Le titre</strong></div><br /><div class="<span style="color:#cc0000;"><strong>textboxcontent</strong></span>"><strong>Le contenu</strong></div><br /><div class="<span style="color:#cc0000;"><strong>textboxbottom</strong></span>"><strong>Le pied</strong></div><br /></div><br /></span><br /><br /></div><br /><br /><br /><strong>Le style CSS</strong><br /><br />A configurer selon l'aspect que l'on veut donner à sa boîte de texte. L'ordre<strong><em> border: style size color</em></strong> définit le cadre de la boîte. Les autres instructions se comprennent d'elles-mêmes.<br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><span style="color:#cc0000;"><strong>.textbox</strong></span><br />{<br />background-color: #f5e39e;<br />font-weight: bold;<br />width: 360px;<br />color: #000;<br />text-align: center;<br /></span><span style="font-family:arial;"><span style="font-size:85%;"><strong>border: solid 2px #de7008;<br /></strong>}<br /><br /><span style="color:#cc0000;"><strong>.textboxcontent</strong></span><br />{<br />font-size: 0.75em;<br />padding: 10px;<br />}<br /><br /><span style="color:#cc0000;"><strong>.textboxtop<br /></strong></span>{<br />padding: 5px;<br />background-color: #f2e9ca;<br />}<br /><br /><span style="color:#cc0000;"><strong>.textboxbottom</strong></span><br />{<br />padding: 5px;<br />background-color: #f2e9ca;<br />}<br /><br /></div></span></span><br /><br /><br /><strong>Le résultat</strong><br /><br />pour centrer la boîte l'encadrer par <div style="text-align: center;"> ... </div><br /><br /><div style="TEXT-ALIGN: center"><br /><div class="textbox"><br /><div class="textboxtop">Viti-Vino *** Liens du Vin ***</div><br /><div class="textboxcontent">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</div><br /><div class="textboxbottom"><a title="Les Découvertes des Liens du Vin" href="http://viti-vino.blogspot.com/" target="_blank">Les Liens du Vin</a></div><br /></div><br /></div><br /><br /><strong>Des coins arrondis</strong><br /><br />L'arrondi est réalisé par une image. Le site <a title="CornerShop - Arrondis pour bloc div" href="http://wigflip.com/cornershop/" target="_blank">Cornershop</a> 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 <span lang="en">Transparent = None</span>.<br /><br /><img title="Les coins arrondis - CornerShop" style="DISPLAY: block; MARGIN: auto; WIDTH: 413px" alt="Les coins arrondis - CornerShop" src="http://www.liens-du-vin.ch/_pic061/cornershop.jpg" /><br /><br />Sauvergarder les 4 images *.gif obtenues. Elles peuvent être hébergées sur Picasa.<br /><br /><br /><strong>La structure des blocs</strong><br /><br />Le bloc principal comprend 3 blocs div encastrés. Le contenu viendra dans les blocs marqués en jaune.<br /><br /><img title="Coins arrondis - boîte de texte" style="DISPLAY: block; MARGIN: auto; WIDTH: 249px" alt="Coins arrondis - boîte de texte" src="http://www.liens-du-vin.ch/_pic061/textbox-arrondi.jpg" /><br /><br /><br /><strong>Le code html</strong><br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><div class="<span style="color:#cc0000;"><strong>box</strong></span>"><br /><div class="<span style="color:#cc0000;"><strong>boxtop</strong></span>"><div><strong>Le titre</strong></div></div><br /><div class="<span style="color:#cc0000;"><strong>boxcontent</strong></span>"><strong>Le contenu</strong></div><br /><div class="<span style="color:#cc0000;"><strong>boxbottom</strong></span>"><div><strong>Le pied</strong></div></div><br /></div><br /></span><br /><br /></div><br /><br /><br /><strong>Le style CSS</strong><br /><br />Il faut reporter dans les classes CSS boxtop, boxtop div, boxbottom et boxbottom div les <span style="color:#009900;"><strong>4 images *.gif</strong></span> des coins arrondis.<br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;"><span style="font-size:85%;"><span style="color:#cc0000;"><strong>.box<br /></strong></span>{<br />background-color: #f5e39e;<br />font-weight: bold;<br />width: 360px;<br />color: #000;<br />text-align: center;<br />}<br /><br /><span style="color:#cc0000;"><strong>.boxtop</strong></span><br />{<br />background: url(<span style="color:#009900;"><strong>URL/ne.gif</strong></span>) no-repeat right top;<br />}<br /><br /><span style="color:#cc0000;"><strong>.boxtop div</strong></span><br />{<br />background: url(<span style="color:#009900;"><strong>URL/nw.gif</strong></span>) no-repeat left top;<br />height: 10px;<br />padding: 5px;<br />}<br /><br /></span></span><span style="font-family:arial;"><span style="font-size:85%;"><span style="color:#cc0000;"><strong>.boxbottom<br /></strong></span>{<br />background: url(<span style="color:#009900;"><strong>URL/se.gif</strong></span>) no-repeat right bottom;<br />}<br /><br /></span></span><span style="font-family:arial;"><span style="font-size:85%;"><span style="color:#cc0000;"><strong>.boxbottom div<br /></strong></span>{<br />background: url(<span style="color:#009900;"><strong>URL/sw.gif</strong></span>) no-repeat left bottom;<br />height: 10px;<br />padding: 5px;<br />}<br /><br /><span style="color:#cc0000;"><strong>.boxcontent</strong></span><br />{<br />font-size: 0.75em;<br />padding: 10px;<br />}<br /></span></span><br /><br /></div><br /><br /><br /><strong>Le résultat</strong><br /><br /><div style="text-align: center;"><br /><div class="box" style="width: 220px;"><div class="boxtop"><div>Annuaire du Vin</div></div><br /><div class="boxcontent">Annuaire du Vin avec Google Sites. Les outils Google et le cybermarketing duVin.</div><div class="boxbottom"><div><a href="http://sites.google.com/site/annuairevin/Home" target="_blank" title="Annuaire du Vin">Google Sites : Annuaire du Vin</a></div></div></div><br /></div><br /><br /><strong>Faire flotter sa boîte de texte</strong><br /><br />Une boîte de texte <em><strong>flottante</strong></em> est un bloc div affiché à gauche ou à droite d'un bloc de texte qui <em>s'enroule</em> autour du bloc.<br /><br /><br /><strong>Un exemple</strong><br /><br /><div class="textbox" style="FLOAT: left; MARGIN-BOTTOM: 2px; MARGIN-RIGHT: 10px; width: 200px;"><div class="textboxtop">*** Flux Media RSS ***</div><br /><div class="textboxcontent">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 <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Blog aide pour Blogger">blog d'aide pour Blogger</a></div><br /><div class="textboxbottom"><a title="Les Diaporamas" href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank">Gadget Google</a></div><br /></div>Le bloc div ci-contre est <i><strong>flottant à gauche</strong></i>. Il suffit d'ajouter dans le style du bloc <b>style="float:left;"</b>. 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.<br />Pour stopper le flottement, créer un paragraphe avec <b>style="clear:both;"</b>.<br />Si le texte en regard du bloc flottant est plus long que la hauteur du bloc, il <i>s'écoule</i> sous le bloc. Le bloc encadré donne ainsi l'impression de <i>flotter</i> sur le texte. <div style="CLEAR: both"></div><br /><br /><br /><strong>Modifier le style du blog</strong><br /><br />Pour incorporer ces nouvelles clauses de style dans le blog, 3 façons<br /><br /><strong>1.</strong> Créer une <strong><em>feuille de style externe</em></strong>, 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)<br /><br /><div style="BACKGROUND: infobackground"><br /><link href="<span style="color:#009900;"><strong>URL/mon_style.css</strong></span>" type="text/css" rel="stylesheet"><br /><br /></div><br /><br /><strong>2.</strong> 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)<br /><br /><div style="BACKGROUND: infobackground"><br /><style type="text/css"><br /><span style="color:#009900;"><strong>les clauses de style</strong></span><br /></style><br /><br /></div><br /><br />3. Si le <a title="Style pour un seul message" href="http://viti-vino.blogspot.com/2008/02/un-style-pour-un-seul-message.html" target="_blank">style ne s'applique qu'à un seul message</a>, 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 <a title="Feuille de style externe - Modèle boîte de texte" href="http://www.liens-du-vin.ch/style-box.css" target="_blank">feuille de style externe</a> avec ce petit javascript :<br /><br /><div style="BACKGROUND: infobackground"><br /><span style="font-family:arial;font-size:85%;"><script language="Javascript" type="text/javascript"><br />var cssNode = document.createElement('link');<br />cssNode.type = 'text/css';<br />cssNode.rel = 'stylesheet';<br />cssNode.href = '<span style="color:#009900;"><strong>URL/mon_style.css</strong></span>';<br />cssNode.media = 'screen';<br />cssNode.title = 'une feuille de style pour 1 post';<br />document.getElementsByTagName("head")[0].appendChild(cssNode);<br /></script><br /></span><br /><br /></div><br /><br />Ce script peut être placé au debut du message. Il faut saisir le code sans retour à la ligne (sinon Blogger incorpore la balise <br/> )<br /><br /><strong>Plus d'informations</strong><br /><br />Créer ses coins arrondis en ligne avec <a href="http://wigflip.com/cornershop/" target="_blank" title="Coins arrondis">CornerShop</a><br /><br />Arrondir ses Photos en ligne avec <a href="http://www.roundpic.com/" target="_blank" title="Photos - coins arrondis">RoundPic</a><br /><br />Les codes couleurs en ligne avec <a href="http://www.colorschemer.com/online.html" target="_blank" title="Codes couleurs">ColorSchemer</a><br /><br />Un style pour un seul message, une explication sur le <a href="http://viti-vino.blogspot.com/2008/02/un-style-pour-un-seul-message.html" target="_blank" title="Style pour un seul message">Blog Viti-Vino</a><br /><br />Encadrer ses photos, quelques astuces sur le <a href="http://aide-blogger-fr.blogspot.com/2008/07/des-cadres-pour-ses-photos-de-vacances.html" target="_blank" title="Blog Aide pour Blogger">Blog d'Aide pour Blogger</a><br /><br /><br/>Unknownnoreply@blogger.com21tag:blogger.com,1999:blog-4210934724484789456.post-4783995920336532562008-11-19T22:54:00.012+01:002009-12-21T22:54:46.992+01:00Placer des Gadgets dans les éléments de la page<strong>Eléments de la page</strong><br /><br />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.<br /><br /><img title="Eléments de la page" style="DISPLAY: block; MARGIN: auto; WIDTH: 400px" alt="Eléments de la page" src="http://www.liens-du-vin.ch/_pic061/elements-page.jpg" /><br /><br /><strong>Ajouter des gadgets dans l'en-tête<br /></strong><br /><strong>1.</strong> Paramètres / Mise en Page / Modifier le code HTML<br /><br /><strong>2.</strong> Avant toute correction, faire une copie du template en cliquant sur le lien <strong><em>Télécharger le modèle dans son intégralité</em></strong><br /><br /><strong>3.</strong> Cocher l'option <strong><em>Développer des modèles de gadget</em></strong><br /><br /><strong>4.</strong> Rechercher dans le code html :<br /><br /><div style="BACKGROUND: infobackground"><br /><br /><<span style="color:#ff6600;"><strong>b:section class='header'</strong></span> id='header' showaddelement='<strong><span style="color:#009900;">no</span></strong>'><br /><br /></div><br /><br /><strong>5.</strong> Remplacer par :<br /><br /><div style="BACKGROUND: infobackground"><br /><br /><b:section class='header' id='header' showaddelement='<span style="color:#cc0000;"><strong>yes</strong></span>'><br /><br /></div><br /><br /><strong>6.</strong> Les nouveaux éléments de la page :<br /><br /><img title="Gadgets dans l'en-tête" style="DISPLAY: block; MARGIN: auto; WIDTH: 400px" alt="Gadgets dans l'en-tête" src="http://www.liens-du-vin.ch/_pic061/gadget-en-tete.jpg" /><br /><br /><br /><strong>Ajouter des gadgets avant ou après les messages du blog</strong><br /><br /><strong>1.</strong> Rechercher dans le code html :<br /><br /><div style="BACKGROUND: infobackground"><br /><br /><<span style="color:#ff6600;"><strong>b:section class='main'</strong></span> id='main' showaddelement='<strong><span style="color:#009900;">no</span></strong>'><br /><br /></div><br /><br /><strong>2.</strong> Remplacer par :<br /><br /><div style="BACKGROUND: infobackground"><br /><br /><b:section class='main' id='main' showaddelement='<span style="color:#cc0000;"><strong>yes</strong></span>'><br /><br /></div><br /><br /><strong>3.</strong> Les nouveaux éléments de la page :<br /><br /><img title="Gadgets avant ou après les messages" style="DISPLAY: block; MARGIN: auto; WIDTH: 400px" alt="Gadgets avant ou après les messages" src="http://www.liens-du-vin.ch/_pic061/gadget-messages.jpg" /><br /><br /><br /><strong>Les attributs optionnels</strong><br /><br /><div style="BACKGROUND: infobackground"><br /><br /><b:section... <span style="color:#ff6600;"><strong>maxwidgets='n'</strong></span> <span style="color:#ff6600;"><strong>growth='vertical'</strong></span> ou <span style="color:#ff6600;"><strong>growth='horizontal'</strong></span> ...><br /><br /><strong><span style="color:#ff6600;">maxwidgets :</span></strong> n est le nombre maximum de gadgets acceptés dans la section. Pas de limite si l'attribut ne figure pas<br /><br /><strong><span style="color:#ff6600;">growth :</span></strong> 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)<br /></div><br /><br /><br /><strong>Plus d'informations</strong><br /><br />Placer des <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Gadgets Google dans le corps du message blog">Gadgets Google dans le corps du message blog</a>. Un gadget Blogger (widget) peut contenir un Gadget Google.<br /><br />Des <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Gadgets pour son Blog ou son Site</a>. Des lecteurs MP3, des videos et des diaporamas.<br /><br />Les applications Google sur son Blog, avec les <a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html" target="_blank" title="Google Web Elements">Google Web Elements</a>. <br /><br />L'aide de Blogger : <a href="http://help.blogger.com/bin/answer.py?answer=46888&hl=fr" target="_blank" title="Balises d'éléments de page">Balises d'éléments de page</a> pour la fonctionnalité de mise en page<br /><br /><br>Unknownnoreply@blogger.com51tag:blogger.com,1999:blog-4210934724484789456.post-44828697892324456512008-11-15T22:23:00.028+01:002012-07-17T11:44:16.163+02:00Inserer un Gadget Google dans le corps du message<strong>Gadget Google</strong><br /><br />Si Blogger permet facilement l'ajout de Gadget dans les éléments de la page, rien n'est prévu pour <strong>ajouter un gadget dans le corps du message</strong>.<br /><br />Un <strong>Gadget Google</strong> 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.<br /><br />Sur la page HTML qui contient le gadget, celui-ci est encapsulé dans une <strong>balise <iframe></strong> dont l'<strong>attribut src</strong> (source) donne l'adresse du Gadget avec ses paramètres.<br /><br />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.<br /><br />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 <em>Convertir les sauts de ligne </em>est à <em>Oui</em>).<br /><br /><br /><strong>Où trouver des Gadgets Google<br /></strong><br />Le <a title="Répertoire des Gadgets Google" href="http://www.google.com/ig/directory?hl=fr&synd=open" target="_blank">répertoire de Google </a>en recense plus de 50'000 (état fin 2008). A la même date l'<span lang="eng"><a title="Unofficial Google Modules" href="http://googlemodules.com/" target="_blank">Unofficial Google Modules</a></span> en compte plus de 10'000.<br /><br />Sur un Blog ou une page Web visitée, un <strong>Gadget</strong> est généralement suivi du bouton Ajouter à Google (<span lang="en">Add to Google</span>) :<br /><br /><p><img title="Ajouter à Google" style="DISPLAY: block; MARGIN: auto; WIDTH: 104px" alt="Ajouter à Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" /><br /><br /><br /><strong>Un exemple</strong><br /><br />A la suite de l'article <a title="Un Diaporama pour Blogger" href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank">Un Diaporama pour Blogger</a>, j'ai développé un <strong>Gadget Google</strong> qui regroupe tout le <a title="Le code du Diaporama" href="http://viti-vino.blogspot.com/2008/10/un-diaporama-dans-le-corps-du-message.html" target="_blank">code nécessaire</a> à l'affichage d'un Diaporama dans le corps du message.<br /><br />Admettons que l'on veuille insérer dans le corps du message le gadget : <strong><a title="Gadget Diaporama Picasa" href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml" target="_blank">Diaporama Picasa</a></strong>. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.<br /><br /><br /><strong>Obtenir le code du gadget</strong><br /><br /><strong>1.</strong> Ouvrir <strong>iGoogle</strong> (Mon Google) et cliquer sur <em>Ajouter des Modules</em>, puis sur <em>Ajouter un flux ou un gadget</em> et saisir l'adresse du gadget :<br /></p><div style="BACKGROUND: infobackground"><br />http://URL/nomdugadget.xml<br /><br /></div><br /><br /><img title="Ajouter un gadget" style="DISPLAY: block; MARGIN: auto; WIDTH: 156px" alt="Ajouter un gadget" src="http://www.liens-du-vin.ch/_pic061/ajouter-gadget.jpg" /><br />ou cliquer sur le bouton <strong>Ajouter à Google</strong> si vous vous trouvez sur une page qui contient le gadget désiré.<br /><br /><a title="Diaporama Picasa Web Albums" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://fusion.google.com/add?moduleurl=http%3A//hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml" target="_blank"><img title="Ajouter à Google" style="DISPLAY: block; MARGIN: auto; WIDTH: 104px" alt="Ajouter à Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" /></a><br /><br /><strong>2. </strong>Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option <strong>à propos de ce gadget</strong> :<br /><br /><img title="Barre de titre du gadget" style="DISPLAY: block; MARGIN: auto; WIDTH: 114px" alt="Barre de titre du gadget" src="http://www.liens-du-vin.ch/_pic061/titre-gadget.jpg" /><br /><img title="A propos ... du gadget" style="DISPLAY: block; MARGIN: auto; WIDTH: 220px" alt="A propos ... du gadget" src="http://www.liens-du-vin.ch/_pic061/a-propos-gadget.jpg" /><br /><br /><strong>3.</strong> Dans la rubrique <strong>Pour webmasters</strong>, choisir l'option <strong>Insérer ce gadget</strong><br /><br /><img title="Insérer ce gadget" style="DISPLAY: block; MARGIN: auto; WIDTH: 270px" alt="Insérer ce gadget" src="http://www.liens-du-vin.ch/_pic061/inserer-gadget.jpg" /><br /><br />4. Ajuster le gadget à la dimension désirée, ignorer les <strong>paramètres d'affichage</strong>, mais <strong>définir les paramètres du Gadget</strong> :<br /><br /><img title="Paramètres d'affichage" style="DISPLAY: block; MARGIN: auto; WIDTH: 252px" alt="Paramètres d'affichage" src="http://www.liens-du-vin.ch/_pic061/affichage-gadget.jpg" /><br /><br /><img title="Paramètres du gadget" style="DISPLAY: block; MARGIN: auto; WIDTH: 332px" alt="Paramètres du gadget" src="http://www.liens-du-vin.ch/_pic061/parametres-gadget.jpg" /><br /><br /><strong>5. </strong>Cliquer sur <strong>obtenir le code</strong>. On obtient un script javascript, avec les <a title="URL encode" href="http://www.albionresearch.com/misc/urlencode.php" target="_blank">paramètres URL encodés</a> :<br /><br /><div style="BACKGROUND: infobackground"><br /><br /><strong><script src="<span style="color:#009900;">hebergeur?url=adresse_gadget&amp;parametres ... parametres&amp;</span><span style="color:#ff6600;">w=xxx&amp;h=yyy</span><span style="color:#cc0000;">&amp;title=titre-gadget...output=js</span>"></script></strong><br /><br /></div><br /><br /><div style="BACKGROUND: infobackground"><br /><br /><span style="color:#009900;"><strong>hébergeur</strong></span> : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr<br /><br /><span style="color:#009900;"><strong>adresse_gadget</strong></span> : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml<br /><br /><span style="color:#009900;"><strong>paramètres ... paramètres</strong></span> : Les paramètres du Gadget, sous la forme de couple <span style="color:#009900;"><strong>up_nom=valeur</strong></span> séparés par le caractère & (ampersand - et commercial) URL encodé par &amp;<br /><br /><span style="color:#ff6600;"><strong>w=xxx h=yyy</strong></span> : Les dimensions du Gadget, w pour <span lang="eng">width</span> (largeur) et h pour <span lang="eng">height</span> (hauteur).<br /><br /><span style="color:#cc0000;"><strong>&amp;title=titre-gadget...output=js</strong></span> : la fin de la source, à ignorer !<br /><br /></div><br /><br /><br /><strong>Convertir le script en <iframe></strong><br /><br /><div style="BACKGROUND: infobackground"><br /><br /><iframe src="<span style="color:#009900;"><strong>hebergeur?url=adresse_gadget&amp;parametres ... parametres</strong></span>" width="<span style="color:#ff6600;"><strong>xxx</strong></span>" height="<span style="color:#ff6600;"><strong>yyy</strong></span>" allowTransparency="true" frameborder="0" scrolling="no"></iframe><br /><br /></div><br /><br /><div style="BACKGROUND: infobackground"><br /><br /><strong>width="<span style="color:#ff6600;">xxx</span>"</strong> : La largeur du iframe<br /><br /><strong>height="<span style="color:#ff6600;">yyy</span>"</strong> : la hauteur du iframe<br /><br /><strong>allowTransparency="true"</strong> : La couleur de fond de la page hôte prime sur celle du iframe<br /><br /><strong>frameborder="0"</strong> : pas de bord<br /><br /><strong>scrolling="no"</strong> : pas d'ascenseurs<br /><br /></div><br /><br /><br /><strong>Le résultat</strong><br /><br />Intégrons cette iframe sur ce blog, avec un tag <div style="text-align: center;"> pour centrer le cadre (saisie sans retour à la ligne) :<br /><p></p><div style="BACKGROUND: infobackground"><br /><br /><br /><div style="text-align:center;"><iframe src="<span style="color:#009900;"><strong>http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit<br />&url=http%3A%2F%2Fhosting.gmodules.com<br />%2Fig%2Fgadgets%2Ffile%2F108621208120033273647<br />%2Fpicasa-gadget-blog.xml<br />&up_File=http%3A%2F%2Fpicasaweb.google.fr<br />%2Fdata%2Ffeed%2Fbase<br />%2Fuser%2Fphilippe.chappuis<br />%2Falbumid<br />%2F5008507738518598193<br />%3Fkind%3Dphoto%26alt%3Drss<br />%26authkey%3D3wuzt3CsXf0%26hl%3Dfr<br />&up_Link=http%3A%2F%2Fwww.tendance9.com<br />&up_Titre=tendance9%20-%20light%20wine&up_Textcol=%23f00<br />&up_TextBcol=%23558866<br />&up_Bordercol=%23f00<br />&up_SlideBcol=%23eeeecc<br />&up_BoxBcol=%23558866</strong></span>" height="<span style="color:#ff6600;"><strong>342</strong></span>" width="<strong><span style="color:#ff6600;">398</span></strong>" <strong>allowTransparency="true" frameborder="0" scrolling="no"</strong>>URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div><br /><br /></div><br /><br />Et nous obtenons le Diaporama :<br /><br /><div style="TEXT-ALIGN: center"><iframe src="http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit&url=http%3A//hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-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" frameborder="0" width="398" scrolling="no" height="342">URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div><p><br /><br /><br /><strong>Plus d'informations </strong><br /><br />Placer des <a title="Gadgets Blogger (widgets) dans les éléments de la page" href="http://aide-blogger-fr.blogspot.com/2008/11/placer-des-gadgets-dans-les-lments-de.html" target="_blank">Gadgets Blogger (widgets) dans les éléments de la page</a><br /><br /><a title="Un container pour placer une animation Flash sur son Blog" href="http://www.liens-du-vin.ch/flash_container-script.htm" target="_blank">Un container pour placer une animation Flash sur son Blog</a><br /><br />Créer un <a title="Créer un Gadget Google" href="http://www.google.com/intl/fr/apis/gadgets/index.html" target="_blank">Gadget Google</a><br /><br />Un Diaporama pour <a title="Picasa, Photobucket, Flickr et Yahoo News" href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank">Picasa, Photobucket, Flickr et Yahoo News</a> (Media RSS)<br /><br />Lire un <a title="Diaporama en Flash" href="http://sites.google.com/site/annuairevin/flash-reader" target="_blank">Diaporama en Flash</a>, pour oublier la balise <embed><br /><br />Des <a title="Des Gadgets pour son Blog" href="http://viti-vino.blogspot.ch/p/gadgets.html" target="_blank">Gadgets pour son Blog ou son Site</a>. Des lecteurs MP3, des videos et des diaporamas.<br /><br /><a title="Ajouter une carte Google Maps dans ses messages" href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html" target="_blank">Ajouter une carte Google Maps</a> dans ses messages.<br /><br />
<a title="Ajouter des Gadgets iGoogle sur son Site" href="https://sites.google.com/site/annuairevin/inserting-gadget-igoogle" target="_blank">Ajouter des Gadgets iGoogle sur son Site</a><br /><br />
</p><div style="font-height: 0.8em"><br />Copyright photos : <a title="tendance9" href="http://www.tendance9.com/" target="_blank">tendance9</a> et <a title="Cave de Jolimont SA" href="http://www.cave-jolimont.ch/" target="_blank">Cave de Jolimont SA</a></div>Unknownnoreply@blogger.com23tag:blogger.com,1999:blog-4210934724484789456.post-52178113731182631122008-11-05T22:06:00.000+01:002010-11-05T22:19:30.996+01:00Message annuléUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-4210934724484789456.post-36777698333536837972008-10-24T23:02:00.014+02:002009-05-31T17:37:59.869+02:00Un WebClip pour son BlogUn <em><strong>WebClip</strong></em> est une icône de 57 par 57 pixels affichée sur la page des favoris de l'<a href="http://www.apple.com/fr/iphone" target="_blank" title="iPhone">iPhone</a>. C'est pour l'écran tactile (<span lang="en">Apple-touch</span>) l'équivalent de la <a href="http://aide-blogger-fr.blogspot.com/2007/09/crer-sa-propre-favicon.html" target="_blank" title="Une favicon pour son blog">favicon</a> de la barre d'adresse d'un navigateur classique.<br /><br /><a href="http://www.apple.com/fr/iphone" title="iPhone - Apple" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 186px; height: 297px;" src="http://www.liens-du-vin.ch/_pic06/iphone.jpg" border="0" alt="iPhone - Apple" title="iPhone - Apple" /></a><br /><br /><br /><strong>L'image</strong><br /><br />Un carré de 57 par 57 pixels qui est traditionnellement appelé <em><strong>apple-touch-icon.png</strong></em>.<br /><br /><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 57px; height: 57px;" src="http://www.liens-du-vin.ch/apple-touch-icon.png" border="0" alt="apple-touch-icon.png" title="apple-touch-icon.png" /><br/><br /><br />Comme Blogger n'est pas un hébergeur, il faut enregistrer cette image sur un site qui accepte le format png.<br /><br /><strong>Reconnaissance automatique de l'icône</strong><br /><br />Il faut informer le navigateur de la présence de l'icône (activation de la reconnaissance automatique - <span lang="en">auto-discovery</span>). Pour cela, placer une balise <link> dans l'en-tête du blog, entre les tags <head> et </head>.<br /><br /><div style="BACKGROUND: infobackground"><br /><link rel="apple-touch-icon" <br />href="http://HEBERGEUR/apple-touch-icon.png" type="image/png" /><br /><br /></div><br /><br /><strong>Safari</strong><br /><br /><a href="Safari http://fr.wikipedia.org/wiki/Safari_(logiciel)" target="_blank" title="Safari">Safari</a>, le système d'exploitation qui équipe l'iPhone, se charge lui-même de créer l'arrondi sur le WebClip et d'ajouter les effets de transparence.<br /><br /><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 57px; height: 57px;" src="http://www.liens-du-vin.ch/_pic06/apple-touch-icon-rc.png" border="0" alt="Apple Touch Icon" title="Apple Touch Icon" /><br /><br /><br /><strong>Article connexe</strong><br /><br />Une <a href="http://aide-blogger-fr.blogspot.com/2007/09/crer-sa-propre-favicon.html" target="_blank" title="Une favicon pour son blog">favicon pour son blog</a>.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-4210934724484789456.post-29669382896412463112008-07-26T22:19:00.018+02:002013-03-30T21:14:44.606+01:00Des cadres pour ses photos de vacances<strong>Un cadre semi-transparent</strong><br /><br /><br />En jouant sur <a title="Opacité et transparence - Appliquer un filtre" href="http://aide-blogger-fr.blogspot.com/2007/12/opacite-et-transparence-appliquer-un.html" target="_blank"><b>l'opacité et la transparence</b></a>, d'un bloc <strong><em>div</em></strong>, nous allons créer un <strong><em>cadre semi-transparent</em></strong>.<br /><br />Un bloc extérieur va recevoir la photo comme <em><strong>image de fond</strong></em> et le bloc intérieur, sans contenu, servira à définir la <strong><em>bordure</em></strong>.<br /><br /><div style="BACKGROUND: infobackground"><br /><div style="width: <strong><span style="color:#33cc00;">320</span></strong>px; height: <strong><span style="color:#33cc00;">210</span></strong>px;<br />margin: auto; padding: 0;<br />background-image: url(<span style="color:#cc0000;"><strong>URL de l'image</strong></span>);<br />border: 1px solid #000;"><div style="width: <strong><span style="color:#33cc00;">300</span></strong>px; height: <span style="color:#33cc00;"><strong>190</strong></span>px;<br />border: <strong><span style="color:#33cc00;">10</span></strong>px solid #fff;<br />filter:alpha opacity=50);<br />-moz-opacity:.50;opacity:.50;<br />-khtml-opacity: 0.5;"> </div> </div><br /><br /></div><br /><br /><strong>Important</strong><br /><br />La saisie des 2 blocs doit se faire sans retour à la ligne.<br />La dimension de l'image est de 320 par 210, pour une bordure de 10.<br />Le bloc interne fait donc 320 - 2 * 10 = 300 par 210 - 2 * 10 = 190.<br /><br /><div title="Château de Chardonne" style="BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: rgb(0,0,0) 1px solid; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(http://www.liens-du-vin.ch/_pic06/chateau-chardonne.jpg); PADDING-BOTTOM: 0px; MARGIN: auto; BORDER-LEFT: rgb(0,0,0) 1px solid; WIDTH: 320px; PADDING-TOP: 0px; BORDER-BOTTOM: rgb(0,0,0) 1px solid; HEIGHT: 210px"><div style="BORDER-RIGHT: #fff 10px solid; BORDER-TOP: #fff 10px solid; FILTER: alpha (opacity=50); BORDER-LEFT: #fff 10px solid; WIDTH: 300px; BORDER-BOTTOM: #fff 10px solid; HEIGHT: 190px; moz-opacity: .50; opacity: .50; khtml-opacity: 0.5"></div></div><p style="FONT-SIZE: 0.8em; TEXT-ALIGN: center"><a title="Chardonne - Mont-Pélerin : La carte" href="http://www.liens-du-vin.ch/_winemap/maps-chardonne.htm" target="_blank">Chardonne - Mont-Pélerin : La carte</a></p><br /><br /><strong>Un cadre doré</strong><br /><br /><br />Un seul bloc <strong><em>div</em></strong> contenant l'image. Le cadre est réalisé par la propriété <strong><em>bordure</em></strong>. La couleur dorée, <strong><em>gold</em></strong> correspond au code couleur <em><strong>#ffd700</strong></em>.<br /><br /><div style="BACKGROUND: infobackground"><br /><div style="margin: auto; width: <strong><span style="color:#33cc00;">332</span></strong>px; height: <strong><span style="color:#33cc00;">222</span></strong>px; border:1px solid #000; background: #ffd700;"><a href="URL du lien" target="_blank"<br />title="titre du lien"<br />style="background-color: transparent;<br />border: 0 none; text-decoration: none;"><img src="<strong><span style="color:#cc0000;">URL de l'image</span></strong>" style="width: <strong><span style="color:#33cc00;">320</span></strong>px; height: <strong><span style="color:#33cc00;">210</span></strong>px; border: <strong><span style="color:#33cc00;">6</span></strong>px solid #ffd700;" title="titre de l'image" alt="texte alternatif image" /></a></div><br /><br /></div><br /><br /><strong>Important</strong><br /><br />La saisie du bloc doit se faire sans retour à la ligne.<br />La dimension de l'image est de 320 par 210, pour une bordure de 6.<br />Le bloc fait donc 320 + 2 * 6 = 332 par 210 + 2 * 6 = 222.<br />Pour certain template de Blogger, ajouter margin 0; et padding: 0; dans le style de l'image (*).<br /><br />
<div style="border: #000 1px solid; background: #ffd700; margin: auto; width: 332px; height: 222px;"><a title="Château de Chardonne" style="border: none; background-color: transparent; text-decoration: none;" href="http://www.liens-du-vin.ch/_wine-pictures/label-chateau-chardonne.htm" target="_blank"><img title="Château de Chardonne - le vin" style="border: #ffd700 6px solid; width: 320px; height: 210px; margin:0; padding: 0;" alt="Château de Chardonne - le vin" src="http://www.liens-du-vin.ch/_pic06/chateau-chardonne.jpg" /></a></div><p style="FONT-SIZE: 0.8em; TEXT-ALIGN: center"><a title="Chardonne - Mont-Pélerin : La carte" href="http://www.liens-du-vin.ch/_winemap/maps-chardonne.htm" target="_blank">Chardonne - Mont-Pélerin : La carte</a></p>
<br /><br /><br /><strong>Un cadre façon Polaroid</strong><br /><br /><br />Un bloc <strong><em>div</em></strong> externe contenant la photo et un bloc <strong><em>div</em></strong> pour le bas, simulant la bande papier du polaroid.<br /><br /><div style="BACKGROUND: infobackground"><br /><div style="width: <strong><span style="color:#33cc00;">320</span></strong>px; margin: auto; padding: <strong><span style="color:#33cc00;">15</span></strong>px;<br />background-color: #eeeecc; border: 1px solid black;<br />text-align: center; font-size: 0.75em;"><a href="URL lien sur l'image" title="titre du lien dur l'image" target="_blank"<br />style="border: 0 none; text-decoration: none; background-"><br /><img style="width: <strong><span style="color:#33cc00;">320</span></strong>px; height: <strong><span style="color:#33cc00;">210</span></strong>px; border: 1px solid black;"<br />src="<span style="color:#cc0000;"><strong>URL image</strong></span>" title="titre image" alt="texte alternatif image" /></a><div style="margin: <span style="color:#000000;">10</span>px auto <span style="color:#000000;">10</span>px auto; "><br /><a href="URL titre" target="_blank" title="titre"<br />style="border: 0 none ; text-decoration: none;">Titre</a></div></div><br /><br /></div><br /><br /><strong>Important </strong><br /><strong></strong><br />La saisie des 2 blocs doit se faire sans retour à la ligne.<br />La dimension de l'image est de 320 par 210, pour une bordure de 15. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).<br /><br /><div style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: black 1px solid; PADDING-LEFT: 15px; FONT-SIZE: 0.75em; PADDING-BOTTOM: 15px; MARGIN: auto; BORDER-LEFT: black 1px solid; WIDTH: 320px; PADDING-TOP: 15px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #eeeecc; TEXT-ALIGN: center"><a title="Château de Chardonne - le vin" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_wine-pictures/label-chateau-chardonne.htm" target="_blank"><img style="padding: 0; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 320px; BORDER-BOTTOM: black 1px solid; HEIGHT: 210px" src="http://www.liens-du-vin.ch/_pic06/chateau-chardonne.jpg" /></a> <div style="MARGIN: 10px auto"><a title="Chardonne - Mont-Pélerin - La carte" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_winemap//maps-chardonne.htm" target="_blank" alt="Chardonne - Mont-Pélerin - La carte">Chardonne - Mont-Pélerin - La carte</a></div></div><br /><br /><br /><strong>Un cadre double </strong><br /><br /><br />Un seul bloc <strong><em>div</em></strong> contenant la photo.<br />C'est la <strong><em>bordure</em></strong> du bloc qui fait office de cadre.<br /><br /><div style="BACKGROUND: infobackground"><br /><div style="border: medium double #558866; padding: <strong><span style="color:#33cc00;">6</span></strong>px; background: #eeeecc;<br />width: <strong><span style="color:#33cc00;">320</span></strong>px; margin: auto; text-align: center; font-size:11px; font-weight: bold; color: #a90707;">Titre de l'image<br/><br/><a href="URL lien sur l'image" title="titre du lien sur l'image" style="border: 0 none; text-decoration: none;" target="_blank"><img src="<strong><span style="color:#cc0000;">URL image</span></strong>" style="border: 1px solid #000; width: <strong><span style="color:#33cc00;">320</span></strong>px; height: <strong><span style="color:#33cc00;">210</span></strong>px; margin: 3px 0;" title="titre image" alt="texte alternatif image" /></a><br/><br/><a href="URL lien" title="titre du lien" target="_blank" style="border: 0 none ; text-decoration: none;">Lien</a></div><br /></div><br /><br /><strong>Important</strong><br /><br />La saisie du bloc doit se faire sans retour à la ligne.<br />La dimension de l'image est de 320 par 210, pour une bordure latérale de 6. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).<br /><br /><br /><div style="BORDER-RIGHT: #558866 double; PADDING-RIGHT: 6px; BORDER-TOP: #558866 double; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #eeeecc; PADDING-BOTTOM: 6px; MARGIN: auto; BORDER-LEFT: #558866 double; WIDTH: 320px; COLOR: #a90707; PADDING-TOP: 6px; BORDER-BOTTOM: #558866 double; TEXT-ALIGN: center">Château de Chardonne<a title="Château de Chardonne - le vin" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_wine-pictures/label-chateau-chardonne.htm" target="_blank"><img title="Château de Chardonne - le vin" style="padding: 0; BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN: 3px 0px; BORDER-LEFT: #000 1px solid; WIDTH: 320px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 210px" alt="Château de Chardonne - le vin" src="http://www.liens-du-vin.ch/_pic06/chateau-chardonne.jpg" /></a><br /><br /><a title="Chardonne - Mont-Pélerin - La carte" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_winemap/maps-chardonne.htm" target="_blank">Chardonne - Mont-Pélerin - La carte</a></div><br /><br /><br /><strong>(*) : Les corrections spécifiques, selon le template de Blogger utilisé</strong><br /><br /><br />Il s'agit de corriger le style du message qui spécifie le style par défaut d'une image, par exemple pour ce blog :<br /><br /><div style="BACKGROUND: infobackground"><br />.post img<br />{<br />margin-top:0;<br />margin-right:0;<br />margin-bottom:5px;<br />margin-left:0;<br />padding:4px; <br />border:1px solid #bbbbbb;<br />}<br /><br /></div><br /><br /><strong>Afficher ses photos sur Blogger</strong><br /><br />Le gadget (widget) <a title="Diaporama" href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank">Diaporama</a> de Blogger et les <a title="Flux Media RSS" href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank">Flux Media RSS</a><br /><br />Une <a title="Lightbox (slimbox) pour afficher ses images" href="http://aide-blogger-fr.blogspot.com/2008/01/une-lightbox-pour-afficher-ses-images.html" target="_blank">ligthbox (slimbox) pour afficher ses images</a><br /><br /<strong>Encadrer ses textes</strong><br /><br />Un article du <a href="http://aide-blogger-fr.blogspot.com/2008/11/encadrer-ses-textes.html" target="_blank" title="Encadrer ses textes - Blog d'Aide pour Blogger">Blog d'Aide pour Blogger</a><br /><br /><strong>En savoir plus</strong><br /><br /><a href="http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html" target="_blank" title="Utiliser box-shadow pour ombrer ses blocs">Utiliser box-shadow pour ombrer ses blocs</a><br /><br /><strong>Crédit </strong><br /><br />Photos, <a title="Regis Colombo" href="http://www.diapo.ch/" target="_blank">Regis Colombo</a> et <a title="Clos Domaines et Châteaux" href="http://www.liens-du-vin.ch/_winemap/maps-clos-domaines-chateaux.htm" target="_blank">Clos Domaines et Châteaux</a><br /><br /><br/>Unknownnoreply@blogger.com14tag:blogger.com,1999:blog-4210934724484789456.post-40960970595811183882008-06-23T21:16:00.016+02:002009-05-31T17:40:08.251+02:00Un filtre de couleur pour ses photos noir blancEn complément de l'article <a title="Opacité et transparence" href="http://aide-blogger-fr.blogspot.com/2007/12/opacite-et-transparence-appliquer-un.html" target="_blank"><em>Opacité et transparence - Appliquer un filtre</em></a>, une petite astuce pour appliquer un filtre de couleur à ses photos noir blanc.<br /><br />Rappelons que le <strong>taux d'opacité</strong> varie de 0 à 100 sous Internet Explorer et de 0.0 à 1.0 sous Firefox. Une opacité de 80% filtre 20% de lumière.<br /><br /><strong>1. L'image de base<br /></strong><br />Utilisons l'image de base comme fond d'un bloc div :<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><div<br />style="width: <span style="color:#cc0000;"><strong><em>240</em></strong></span>px; height: <strong><em><span style="color:#cc0000;">207</span></em></strong>px;<br />background-image: url(<span style="color:#cc0000;"><strong>URL image de base</strong></span>)"><br /></div><br /><br /></div><br /><br />240px et 207px étant les dimensions de l'image originale. On obtient :<br /><br /><br /><div style="BACKGROUND-IMAGE: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); MARGIN: auto; WIDTH: 240px; HEIGHT: 207px"><br /></div><br /><br /><br /><strong>2. L'application du filtre<br /></strong><br />Sous Internet Explorer, il faut appliquer un <strong>filtre alpha</strong>, et utiliser l'instruction<strong> opacity</strong> sous Firefox<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><div<br />style="width: <span style="color:#cc0000;"><strong><em>240</em></strong></span>px; height: <strong><em><span style="color:#cc0000;">207</span></em></strong>px; filter:alpha(opacity=80);opacity:.80;<br />background-image: url(<span style="color:#cc0000;"><strong>URL image de base</strong></span>)"></div><br /><br /></div><br /><br /><br /><div style="FILTER: alpha(opacity=80); BACKGROUND-IMAGE: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); MARGIN: auto; WIDTH: 240px; HEIGHT: 207px; opacity: .80"><br /></div><br /><br /><br /><strong>3. La source de couleur<br /></strong><br />Créons la source de couleur avec un bloc div de la taille de la photo, de couleur rouge orangé (orangered - #ff4500)<br /><br /><br /><div style="MARGIN: auto; WIDTH: 240px; HEIGHT: 207px; BACKGROUND-COLOR: #ff4500"><br /></div><br /><br /><br />Ce bloc source va servir de conteneur à l'image de base, ce qui donne comme code :<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><div style="width: <strong><em><span style="color:#cc0000;">240</span></em></strong>px; background-color: #ff4500; margin: auto;"><br /><div style="width: <span style="color:#cc0000;"><strong><em>240</em></strong></span>px; height: <strong><em><span style="color:#cc0000;">207</span></em></strong>px;<br />filter:alpha(opacity=80);opacity:.80;<br />background-image: url(<span style="color:#cc0000;"><strong>URL image de base</strong></span>)"></div><br /></div><br /><br /></div><br /><br />Et le résultat, la photo en sépia :<br /><br /><div style="MARGIN: auto; WIDTH: 240px; BACKGROUND-COLOR: #ff4500"><div style="FILTER: alpha(opacity=80); BACKGROUND-IMAGE: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); WIDTH: 240px; HEIGHT: 207px; opacity: .80"></div></div><br /><div style="MARGIN-TOP: 2px; FONT-SIZE: 0.75em; TEXT-ALIGN: center"><a title="La Vigne : Le Travail de l'Homme" href="http://www.liens-du-vin.ch/vision_vigne.htm" target="_blank">Le travail de l'Homme</a></div><br /><br />La même photo, en utilisant le vert (#007700) comme source de couleur :<br /><br /><div style="MARGIN: auto; WIDTH: 240px; BACKGROUND-COLOR: #007700"><div style="FILTER: alpha(opacity=80); BACKGROUND-IMAGE: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); WIDTH: 240px; HEIGHT: 207px; opacity: .80"></div></div><br /><div style="MARGIN-TOP: 2px; FONT-SIZE: 0.75em; TEXT-ALIGN: center"><a title="La Vigne : Le Travail de l'Homme" href="http://www.liens-du-vin.ch/vision_vigne.htm" target="_blank">Le travail de l'Homme</a></div><br /><br /><div style="font-size:0.7em;"><strong>Crédit photos :</strong> <a href="http://www.diapo.ch/" target="_blank" title="Régis Columbo">Régis Colombo</a> et <a href="http://www.liens-du-vin.ch/_winemap/maps-clos-domaines-chateaux.htm" target="_blank" title="Clos Domaines et Châteaux">Clos Domaines et Châteaux</a>.</div><br /><br /><p><br /></p>Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-4210934724484789456.post-10913121362318621192008-03-13T16:52:00.008+01:002009-09-11T18:22:29.771+02:00Afficher une partie du message<strong>Comment présenter son Blog en n'affichant qu'une partie du message<br /></strong><br />Quelques Blogs affichent le début du message suivi de l'indication <span style="color:#cc0000;"><strong>Lire la suite...</strong></span> (Read more...) sous la forme d'un lien. En cliquant sur le lien, le message complet s'affiche.<br /><br /><strong>Ce que voit le lecteur</strong><br /><br /><br /><div style="BACKGROUND: infobackground"><br />Le début du message ...<br /><strong><span style="color:#cc0000;">Lire la suite...</span></strong><br /><br /></div><br /><br /><strong>Ce que l'auteur du blog doit saisir</strong><br /><br />Il faut utiliser <em><strong>Modifier le code HTML</strong></em> pour enregistrer les 2 tags <span><br /><br /><br /><div style="BACKGROUND: infobackground"><br />Le début du message <span style="color:#009900;">...<span class="<span style="color:#ff6600;">fullpost</span>"></span><br />la fin du message<span style="color:#009900;"></span></span><br /><br /></div><br /><br />Le tag <strong><span style="color:#009900;"><span class="<span style="color:#ff6600;">fullpost</span>"></span></strong> joue le rôle d'un <strong><em>marqueur</em></strong> qui délimite la première partie du message, celle qui va figurer sur la page du Blog. Le nom de classe CSS <span style="color:#ff6600;"><strong>fullpost</strong></span> (message complet) peut être choisi librement, mais j'ai choisi de conserver ce nom proposé par Blogger.<br /><br /><br /><strong>Definir le style du lien <span style="color:#cc0000;">Lire la suite...</span></strong><br /><br />En utilisant <a title="CSS - pseudo-classe" href="http://www.w3schools.com/css/css_pseudo_classes.asp" target="_blank">les pseudo-classes du CSS</a> il est possible de créer un style spécifique pour le lien qui encapsule le texte <strong><span style="color:#cc0000;">Lire la suite...</span></strong><br /><strong><span style="color:#cc0000;"></span></strong><br />Les styles doivent figurer entre les balises <head> et </head> du blog (Mise en page / Modifier le code HTML). Nous pouvons définir la classe <span style="color:#ff6600;"><strong>fullpost</strong></span> ainsi que les styles associées au lien <strong><span style="color:#cc0000;">Lire la suite...</span></strong> en utilisant la classe <strong><span style="color:#cc9933;">cl_suite</span></strong>. Les pseudos-classes doivent être saisies dans l'ordre link, visited, hover et active (en anglais, mnémotechniquement LoVe-HAte). Un exemple ci-dessous (les pseudo-classes peuvent être modifiées) :<br /><br /><br /><br /><div style="BACKGROUND: infobackground"><br /><style type="text/css"><br /><br /><b:if cond='data:blog.pageType == "item"'><br />span.<span style="color:#ff6600;">fullpost</span> {display:inline;}<br /><b:else/><br />span.<span style="color:#ff6600;">fullpost</span> {display:none;}<br /></b:if><br /><br />.<span style="color:#ffcc00;"><strong>cl_suite</strong></span> a:link<br />{color: #000000; text-decoration: none;}<br /><br />.<strong><span style="color:#ffcc00;">cl_suite</span></strong> a:visited<br />{color: #00ff00; text-decoration: none;}<br /><br /></div><div style="BACKGROUND: infobackground">.<strong><span style="color:#ffcc00;">cl_suite</span></strong> a:hover<br />{color: #00ff00; background: #ffff00;}<br /><br /></div><div style="BACKGROUND: infobackground">.<strong><span style="color:#ffcc00;">cl_suite</span></strong> a:active<br />{color: #ff0000;}<br /><br /></div><div style="BACKGROUND: infobackground">.<strong><span style="color:#ffcc00;">cl_suite</span></strong> a:focus<br /></div><div style="BACKGROUND: infobackground">{color: #ff0000;}<br /><br /></style><br /><br /></div><br /><br /><strong>Modifier la structure du Blog</strong><br /><br />Il ne reste plus qu'à modifier la structure du Blog (Mise en page / Modifier le code HTML / cocher <em>développer le modèle de widget</em>). Rechercher le code :<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><p><data:post.body/></p><br /><br /></div><br />et insérer <strong>après</strong> <data:post.body/> et <strong>avant</strong> </p> :<br /><br /><br /><div style="BACKGROUND: infobackground"><br /><b:if cond='data:blog.pageType != "item"'><br /><span class='<span style="color:#ffcc00;"><strong>cl_suite</strong></span>'><a expr:href='data:post.url' <span style="color:#009900;">target='_blank'</span>><br /><strong><span style="color:#cc0000;">Lire la suite...</span></strong></a></span><br /></b:if><br /><br /></div><br />Enlever <span style="color:#009900;">target='_blank'</span> pour afficher le message complet dans la même fenêtre.<br /><br /><strong>Limitation</strong><br /><br />Attention si votre blog comporte beaucoup de messages, lors de l'introduction de cette modification, <strong>tous les messages</strong> comporteront <strong><span style="color:#cc0000;">Lire la suite...</span></strong> en fin de chaque message.<br /><br /><strong>Exemple</strong><br /><br />Mon blog de test : <a title="Chappuis - Blog de test" href="http://chappuis.blogspot.com/" target="_blank">chappuis.blogspot.com</a><br /><br /><br /><strong>Mise à jour</strong><br /><br />Blogger intègre depuis le 9 septembre 2009, cette facilité de saut (lien vers la page de message). Consultez l'article <a href="http://aide-blogger-fr.blogspot.com/2009/09/lire-la-suite-suite.html" target="_blank" title="Lire la Suite... suite">Lire la Suite... suite</a>Unknownnoreply@blogger.com56tag:blogger.com,1999:blog-4210934724484789456.post-8175900679037688052008-02-23T00:45:00.069+01:002012-06-14T21:35:17.510+02:00Un Diaporama pour Blogger<strong>Ajouter un Diaporama (<span lang="en">Slideshow</span>) à son Blog<br /></strong><br /><script language="Javascript" type="text/javascript">var cssNode = document.createElement('link');cssNode.type = 'text/css';cssNode.rel = 'stylesheet';cssNode.href = 'http://www.liens-du-vin.ch/style-blog-aide-diapo.css';cssNode.media = 'screen';cssNode.title = 'une feuille de style pour un seul message';document.getElementsByTagName("head")[0].appendChild(cssNode);</script><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><script type="text/javascript">function load(){var flux = "http://feed266.photobucket.com/albums/ii244/prac53/Travail-Vigne/feed.rss";var options = {fullControlPanel: true,fullControlPanelSmallIcons: true,thumbnailSize : GFslideShow.THUMBNAILS_LARGE,pauseOnHover: true,displayTime: 3000,transitionTime: 1000,linkTarget : google.feeds.LINK_TARGET_BLANK};new GFslideShow(flux, "travail_vigne", options);} google.load("feeds", "1") ; google.setOnLoadCallback(load);</script><script> function load_yahoo() {var flux = "http://rss.news.yahoo.com/imgrss/832";var options = {fullControlPanel: true, fullControlPanelSmallIcons: true, scaleImages : true, thumbnailSize : GFslideShow.THUMBNAILS_SMALL, pauseOnHover: true, displayTime: 2000, transitionTime: 500, linkTarget : google.feeds.LINK_TARGET_BLANK, thumbnailUrlResolver : myUrlResolver }; function myUrlResolver(entry) { var content = entry.content; var start = content.indexOf("src=")+5; var stop = content.indexOf(".jpg?",start)+4; var thumburl = content.substring(start,stop); return(thumburl); } new GFslideShow(flux, "flux_actualite_science", options); } google.load("feeds", "1"); google.setOnLoadCallback(load_yahoo); </script><br />Il est possible depuis novembre 2007 d'<a title="Show off your photos with the new Slideshow" href="http://buzz.blogger.com/2007/11/show-off-your-photos-with-new-slideshow.html" target="_blank">ajouter un Diaporama</a> comme <i>élément de page</i>. Ce nouveau <i>widget</i> est compatible avec les hébergeurs qui fournissent un flux <a title="media RSS - mRSS" href="http://en.wikipedia.org/wiki/Media_RSS" target="_blank">media RSS</a>.<br /><br /><div style="TEXT-ALIGN: center"><br /><a title="Widget Ajouter un Diaporama" href="http://www.liens-du-vin.ch/_pic04/diaporama-blogger-1.jpg" target="_blank"><img title="Widget Ajouter un Diaporama" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 278px; CURSOR: hand; TEXT-ALIGN: center" alt="Widget Ajouter un Diaporama" src="http://www.liens-du-vin.ch/_pic04/diaporama-blogger-1.jpg" border="0" /></a><br /></div><br /><br /><strong>Le Flux Media RSS</strong><br /><br />La source du Diaporama doit être <a title="Flux RSS" href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank">un flux RSS</a> au <a title="Format media RSS proposé par Yahoo" href="http://search.yahoo.com/mrss" target="_blank">format media RSS</a>. Les principaux hébergeurs de photos sur Internet proposent maintenant ce format. C'est simplement un fichier texte en format <strong>xml/rss</strong>, contenant le descriptif des medias à diffuser (son, image ou vidéo).<br /><br /><strong>Titre</strong><br /><br />Le titre du Diaporama. Limiter le nombre de caractères si le diaporama doit être dans une colonne.<br /><br /><strong>Source - Picasa Albums Web</strong><br /><br />Picasa, l'hébergeur d'images de Google, offre 2 options, soit l'affichage des images avec une sélection par <strong>mot clé</strong>, soit l'affichage d'un <strong>album</strong> précis. Dans ce cas il faut saisir le nom de l'utilisateur Picasa, suivi du nom de l'album.<br />Important : L'option mot clé doit être utilisée avec précaution car elle affiche toutes les images publiques ayant ce mot clé (tag / étiquette). Pensons aussi aux éventuels problèmes liés au droit d'auteur.<br /><br /><strong>Source - Flickr</strong><br /><br />Flickr offre aussi 2 options, sélection des images par <strong>mot clé</strong> et par <strong>client</strong>. Mot clé fonctionne comme pour Picasa, l'otion <strong>client</strong> quant à elle demande le nom d'utilisateur Flickr. Celui-ci figure dans la barre d'adresse de Flickr, après avoir ouvert votre compte et cliqué sur <span lang="en"><strong><em>Your Photos</em></strong></span>. Dans mon cas, l'adresse est :<br /><br /><div style="BACKGROUND: infobackground"><br />http://www.flickr.com/photos/<span style="color:#009900;">prac53</span>/<br /><br /></div><br />Et le client à saisir : <span style="color:#009900;">prac53</span><br /><br /><strong>Source - Photobucket</strong><br /><br />Cet hébergeur n'offre qu'une seule possibilité, par <strong>mot clé</strong>. Ce sont les tags placés sur les images. Ne jamais perdre de vue qu'avec cette option l'ensemble des photos de Photobucket, avec un mot clé donné, sera affiché.<br /><br /><strong>Source - Autre</strong><br /><br />Cette dernière option est certainement la plus utile. La sélection par mot clé ne permettant pas d'afficher uniquement ses propres images, l'option <strong>autre</strong> va nous permettre d'indiquer le flux <strong>media RSS</strong> de l'album à afficher.<br />Pour <strong>Photobucket</strong>, par exemple, se rendre dans <em>afficher un album</em>, puis copier le raccourci du bouton <em><strong>Album Feed</strong></em>. On obtient alors une URL comme celle-ci :<br /><br /><div style="BACKGROUND: infobackground"><br />http://<span style="color:#009900;">s266</span>.photobucket.com/albums/<span style="color:#009900;">ii244/prac53</span>/feed.rss<br /><br /></div><br /><br />Il suffit de recopier cette adresse dans la <strong>zone Flux</strong>.<br /><br /><div style="TEXT-ALIGN: center"><br /><a title="Définir un flux media RSS" href="http://www.liens-du-vin.ch/_pic04/diaporama-blogger-2.jpg" target="_blank"><img title="Définir un flux media RSS" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 322px; CURSOR: hand; TEXT-ALIGN: center" alt="Définir un flux media RSS" src="http://www.liens-du-vin.ch/_pic04/diaporama-blogger-2.jpg" border="0" /></a><br /></div><br /><br /><strong>Modifier la taille du Diaporama</strong><br /><br />Créer le Diaporama, puis se rendre dans le panneau de contrôle de Blogger. Cliquer sur <em>Paramètres</em> puis <em>Mise en page</em> et <em>Modifier le code HTML</em>. Choisir <em>Développer des modèles de Gadget</em>.<br />Rechercher le bloc div suivant :<br /><br /><div style="BACKGROUND: infobackground"><br /><div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"'><br /><br /></div><br /><br />Ajouter les dimensions désirées, par exemple 350 x 260 :<br /><br /><div style="BACKGROUND: infobackground"><br /><div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"' <span style="color:#009900;">style='width: 350px; height: 260px;'><br /></span><br /></div><br /><br /><strong>Exemple</strong><br /><br />Un diaporama réalisé à partir de mon album sur Flickr, <a title="Flickr - album Clos Domaines et Châteaux" href="http://www.flickr.com/photos/prac53/sets/72157609076361497/" target="_blank">Les Clos Domaines et Châteaux</a>, sur le blog <a title="tendance9 vin allégé" href="http://tendance9.blogspot.com/" target="_blank">tendance9</a>.<br /><br /><strong>Utiliser directement le flux media RSS</strong><br /><br />Google, grâce à <a title="AJAX Slide Show" href="http://www.google.com/uds/solutions/slideshow/index.html" target="_blank">Google AJAX Feed API</a> permet de configurer soi-même un diaporama, et d'y incorporer ses propres effets de transition et <a title="Slide Shou Update - Full Control Panel" href="http://googleajaxsearchapi.blogspot.com/2007/10/slide-show-update-full-control-panel.html" target="_blank">ses propres contrôles</a>.<br /><br /><strong>Incorporer la bibliothèque de code AJAX</strong><br /><br />Il suffit de 2 scripts :<br /><br /><div style="BACKGROUND: infobackground"><br /><script src="http://www.google.com/jsapi" type="text/javascript"></script><br /><script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script><br /><br /></div><br /><br /><strong>Appel du Diaporama</strong><br /><br />Il est réalisé par le script suivant, qui définit la fonction de <strong>callback</strong>. Le détail des valeurs est donné dans <a title="Google AJAX Feed API - Slide Show" href="http://www.google.com/uds/solutions/slideshow/reference.html" target="_blank">le manuel de référence</a>. La variable <em>flux</em> contient le nom du flux media RSS à traiter.<br /><br /><div style="BACKGROUND: infobackground"><br /><script type="text/javascript"><br /><br />function load()<br />{<br />var flux = "<span style="color:#009900;">http://feed266.photobucket.com/albums/ii244<br />/prac53/Travail-Vigne/feed.rss</span>";<br />var options = {<br />fullControlPanel: true,<br />fullControlPanelSmallIcons: true,<br />thumbnailSize : GFslideShow.THUMBNAILS_LARGE,<br />pauseOnHover: true,<br />displayTime: 3000,<br />transitionTime: 1000,<br />linkTarget : google.feeds.LINK_TARGET_BLANK<br />};<br />new GFslideShow(flux, "<span style="color:#cc0000;">travail_vigne</span>", options);<br />}<br /><br />google.load("feeds", "1");<br />google.setOnLoadCallback(load);<br /></script><br /><br /></div><br /><br /><strong>Positionner le Diaporama</strong><br /><br />Le code html suivant appelle le Diaporama :<br /><br /><div style="BACKGROUND: infobackground"><br /><div id="<span style="color:#cc0000;">travail_vigne</span>" class="<span style="color:#009900;">gss</span>">En cours de chargement...</div><br /><br /></div><br /><br /><strong>Le style du Diaporama</strong><br /><br />Le style pour la classe <span style="color:#009900;">gss</span> :<br /><br /><div style="BACKGROUND: infobackground"><br />.gss a img<br />{<br />border : none;<br />}<br /><br />.gss<br />{<br />width: 229px;<br />height: 206px;<br />color: #dddddd;<br />background-color: #558868;<br />border: 1px solid red;<br />padding: 4px;<br />}<br /><br /></div><br /><br />Pour ne pas alourdir ce blog avec ce style, je charge la feuille de style uniquement pour ce message, avec l'astuce décrite ici : <a title="Un style pour un seul message" href="http://viti-vino.blogspot.com/2008/02/un-style-pour-un-seul-message.html" target="_blank">Un style pour un seul message</a>. La feuille de style peut être téléchargée <a title="Feuille de style pour diaporama - class=' gss'" href="http://www.liens-du-vin.ch/style-blog-aide-diapo.css" target="_blank">ici</a>.<br /><br /><br /><strong>Le résultat</strong><br /><br />Un Diaporama <strong>Le Travail de la Vigne - La Valeur de l'Homme</strong> (crédit photos : <a title="Regis Colombo" href="http://www.diapo.ch/" target="_blank">Regis Colombo</a> pour <a title="Clos Domaines et Châteaux" href="http://www.liens-du-vin.ch/_winemap/maps-clos-domaines-chateaux.htm" target="_blank">l'Association Clos Domaines et Châteaux</a>) :<br /><br /><center><br /><div class="gss" id="travail_vigne">En cours de chargement...</div><br /></center><br /><br /><strong>Rappel : Insertion de scripts sur Blogger</strong><br /><br />Les scripts mentionnés ici peuvent être insérés entre les balises <head> et </head> (<em>Paramètres/Mise en page/Modifier le code HTML</em>).<br />Dans ce cas ils seront actifs pour tous les messages du blog. Pour ne les activer que pour un seul message, il est possible de les saisir au début du texte. Attention cependant, dans ce cas, saisir le script sans retour à la ligne entre les balises <script> et </script>.<br /><br /><strong>En savoir plus</strong><br /><br /><a href="http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.html" target="_blank" title="Un Gadget Blogger - Diaporama Picasa">Un Diaporama de Picasa avec un Gadget Blogger</a><br/><br /><a href="http://viti-vino.blogspot.com/2011/02/diaporama-photobucket-gadget-blogger.html" target="_blank" title="Un Gadget Blogger - Diaporama Photobucket">Un Diaporama de Photobucket avec un Gadget Blogger</a><br/><br />Des <a href="http://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Gadgets Google">Gadgets Google</a> pour afficher un Diaporama sur son Blog ou son Site<br/><br />Un <a href="http://www.liens-du-vin.ch/last-post-slideshow.htm" target="_blank" title="Gadget Google - derniers messages">diaporama avec les derniers messages du Blog</a>, avec un Gadget Google<br/><br />Un <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger - derniers messages">diaporama avec les derniers messages du Blog</a>, avec un Gadget Blogger<br/><br />Utiliser un <a title="Flux Media RSS" href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank">Flux Media RSS</a> pour réaliser son Diaporama<br/><br />Afficher un <a title="Diaporama sur Google Sites" href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank">Diaporama sur Google Sites</a><br/><br /><a title="Incorporer un Diaporama dans le corps du message" href="http://viti-vino.blogspot.com/2008/10/un-diaporama-dans-le-corps-du-message.html" target="_blank">Incorporer un Diaporama dans le corps du message</a>, plus d'explications<br/><br /><a title="Placer un Gadget Google dans le corps du message" href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank">Placer un Gadget Google dans le corps du message</a>. Une façon pratique d'incorporer un Diaporama<br/><br /><a title="Video : Utilité et fonctionnement des flux RSS" href="http://www.liens-du-vin.ch/video-flux-rss.htm" target="_blank">Video : Utilité et fonctionnement des flux RSS</a><br/><br /><a href="http://aide-blogger-fr.blogspot.com/2010/03/vignettes-album-picasa.html" title="Les vignettes d'un Album Picasa sur son Blog">Les vignettes d'un Album Picasa sur son Blog</a><br/><br/>Unknownnoreply@blogger.com113tag:blogger.com,1999:blog-4210934724484789456.post-26323256301918106362008-02-21T13:57:00.006+01:002008-03-01T13:35:04.809+01:00des problèmes de gestion des blogs avec Blogger et GoogleSur <a href="http://groups.google.com/group/bloggers-beta">le groupe d'aide Blogger</a>, nous constatons une recrudescence soudaine des demandes de ré-installation de blogs "disparus". Je dois rappeler en préambule que, tant sur ce blog que sur le groupe d'aide, aucun représentant de Blogger n'est présent - en tous cas en tant que tel car il y en a peut-être pour s'inspirer de nos réponses pour améliorer leur service... - et que, par conséquent, il est inutile de les interpeler directement par ces canaux d'information.<br /><br />Je vais essayer de synthétiser des remarques et réponses concernant certains points qui reviennent régulièrement ces derniers temps sur le groupe d'aide, ce blog ou bien directement sur mon mail. Je tiens à remercier les différents contributeurs et, en particulier, <a href="http://viti-vino-feed.blogspot.com/"><span style="font-style: italic; font-weight: bold;">prac </span></a>pour leur sérieux et leur disponibilité pour tenter de répondre à toutes vos demandes. L'informatique est une science exacte et tout le monde n'a pas la tournure d'esprit pour cela.<br /><br /><span style="font-size:130%;">Les blogs marqués comme spam par erreur</span><br /><br />Il suffit de suivre l'adresse indiquée lorsque l'on se connecte et Google libère le blog dans un délai de 1 à 7 jours.<br /><br /><span style="font-size:130%;">Les problèmes temporaires d'accès à vos blogs</span><br /><br />Il ne faut pas oublier de toujours consulter la <a href="http://status.blogger.com/">page des statuts </a>de Blogger (en anglais). Elle indique les pays et horaires de maintenance : <a href="http://status.blogger.com/">http://status.blogger.com/</a><br /><br />On peut aussi se reporter, en cas de problèmes, à la <a href="http://knownissues.blogspot.com/">liste des erreurs</a> connues ici : <a href="http://knownissues.blogspot.com/">http://knownissues.blogspot.com/</a><br /><br /><span style="font-size:130%;">Les blogs "disparus"</span><br /><br />1/ Si l'on est co-auteur d'un blog, vérifier avec l'administrateur du blog que l'on figure toujours dans la liste des auteurs autorisés.<br />2/ Pour les autres cas, Google a prévu une procédure : <a href="http://help.blogger.com/?page=troubleshooter.cs&problem=&contact_type=blogdisappeared&Submit=Submit">http://help.blogger.com/?page=troubleshooter.cs&problem=&contact_type=blogdisappeared&Submit=Submit</a><br /><br /><span style="font-size:130%;">Dans les cas de disparition définitive</span><br /><br />Les conditions générales de Google signalent, et cela semble normal étant donné la gratuité du service, que ledit service est offert sans garantie. Google se réserve le droit de le supprimer n'importe quand et sans préavis !!!<br /><br /><span style="font-size:130%;">Conclusion (provisoire?)</span><br /><br />Toutes ces difficultés pourraient être relayées auprès de l'équipe technique de Blogger afin qu'ils soient au moins au courant. C'est pourquoi, je me propose de rechercher les moyens les plus rapides et les plus efficaces pour les joindre. Et je vous tiens au courant.Anonymoushttp://www.blogger.com/profile/03493000388301801592noreply@blogger.com6tag:blogger.com,1999:blog-4210934724484789456.post-87554101708231404252008-01-31T22:45:00.015+01:002010-12-22T22:10:20.196+01:00Une lightbox pour afficher ses images<script src="http://www.liens-du-vin.ch/lightbox.js"></script> <br /><span style="font-family:verdana;"><strong>lightbox.js</strong> est un script de </span><a title="lightbox.js - Lokesh Dhakar" href="http://www.huddletogether.com/projects/lightbox/" target="_blank"><span style="font-family:verdana;">Lokesh Dhakar</span></a><span style="font-family:verdana;"> permettant d'afficher une image dans la page courante, avec un </span><a title="Transparence et Opacite pour Blogger" href="http://aide-blogger-fr.blogspot.com/2007/12/opacite-et-transparence-appliquer-un.html" target="_blank"><span style="font-family:verdana;">effet de transparence</span></a><span style="font-family:verdana;">.<br /><br />Un exemple, à partir d'une vignette ou d'un lien, affichons l'image agrandie à l'intérieur de la page courante :<br /></span><div style="TEXT-ALIGN: center"><br /><a title="Château Vufflens" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_pic02/chateau_vufflens.jpg" rel="lightbox"><img title="Château Vufflens" style="WIDTH: 90px" alt="Château Vufflens" src="http://www.liens-du-vin.ch/_pic02/chateau_vufflens.jpg" /></a></div><br /><div style="TEXT-ALIGN: center"><a class="clk" title="Château Vufflens" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_pic02/chateau_vufflens.jpg" rel="lightbox"><span style="font-size:85%;">Château de Vufflens - La noblesse des vins suisses</span></a></div><br /><br /><div><strong>Les éléments à télécharger</strong></div><br />Utiliser un hébergeur comme <a title="Google Sites" href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites/" target="_blank">Google Sites</a>, pour enregistrer à partir du site original :<br /><br />Le script : <a title="lightbox.js" href="http://www.huddletogether.com/projects/lightbox/lightbox.js" target="_blank">lightbox.js</a><br /><br />La feuille de style : <a title="lightbox.css" href="http://www.huddletogether.com/projects/lightbox/lightbox.css" target="_blank">lightbox.css</a><br /><br />Une animation <i>chargement en cours</i> : <a title="loading.gif" href="http://www.huddletogether.com/projects/lightbox/loading.gif" target="_blank">loading.gif</a><br /><br />L'icône <i>fermer la fenêtre</i> : <a title="close.gif" href="http://www.huddletogether.com/projects/lightbox/close.gif" target="_blank">close.gif</a><br /><br />L'image utilisée pour l'effet de transparence (opacité 80 %) : <a title="overlay.png" href="http://www.huddletogether.com/projects/lightbox/overlay.png" target="_blank">overlay.png</a><br /><br /><div><strong>Les modifications à apporter</strong></div><br />Complèter l'adresse de 2 images dans le script <em>(*URL*</em> est à remplacer par le chemin de votre hébergement) :<br /><br /><div style="BACKGROUND: infobackground"><br />var loadingImage = '<em>*URL*</em>/loading.gif';<br /><br />var closeButton = '<em>*URL*</em>/close.gif';<br /><br /></div><br />De même, donner l'adresse de l'image de fond, dans la feuille de style (l'image blank.gif n'existe pas, c'est un leurre pour assurer le traitement correct de la transparence des fichiers PNG sous IE) :<br /><br /><div style="BACKGROUND: infobackground"><br />#overlay {<br />background-image: url(<em>*URL*</em>/overlay.png) }<br /><br />* HTML #overlay {<br />background-color: transparent;<br />background-image: url(blank.gif);<br />filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(<br />src="<em>*URL*</em>/overlay.png", sizingMethod="scale");}<br /><br /></div><br />Pour configurer le conteneur de l'image, il faut modifier l'id lightbox :<br /><br /><div style="BACKGROUND: infobackground"><br />#lightbox /*style du conteneur */<br />{<br />border-right: #666 2px solid; /* la bordure du conteneur */<br />padding-right: 10px;<br />padding-left: 10px;<br />padding-bottom: 10px;<br />padding-top: 10px;<br />border-bottom: #666 2px solid;<br />background-color: #eee; /* la couleur du conteneur */<br />}<br /><br /></div><br /><div><strong>L'utilisation avec Blogger</strong></div><br />Pour utiliser lightbox dans un seul post, ajouter au début du post l'appel au script :<br /><br /><div style="BACKGROUND: infobackground"><br /><script src='<em>*URL*</em>/lightbox.js' type='text/javascript'></script><br /><br /></div><br />Placer ce script entre les balise <head> et </head> si lightbox doit être utilisé dans plusieurs posts.<br /><br />De même, entre les balises <head> et </head>, faire l'appel à la feuille de style destinée à configurer l'affichage de l'image :<br /><br /><div style="BACKGROUND: infobackground"><br /><link rel="stylesheet" type="text/css" href="<em>*URL*</em>/lightbox.css" /><br /><br /></div><br />L'appel d'une image avec <strong>l'effet lightbox</strong> se fait simplement en ajoutant <strong>rel="lightbox"</strong> dans l'ancre :<br /><br /><div style="BACKGROUND: infobackground"><br /><a href="URL de l'image à afficher" title="titre image" <strong>rel="lightbox"</strong>>le lien pour l'image à afficher ou un tag <img> avec une vignette</a><br /><br /></div><br /><br /><div><strong>Le cas particulier des grandes images</strong></div><br />Si l'ancre contient l'adresse d'une grande image (cas fréquent sur Blogger), l'adresse est du type :<br /><br /><div style="BACKGROUND: infobackground"><br /><a href="http://bp<span style="color:#009900;">n</span>.blogger.com/.../.../<br />.../<span style="color:#009900;"><strong>s1600-h</strong></span>/NOM_IMAGE.jpg" <strong>rel="lightbox"</strong>...><br /><br /></div><br /><br />L'insertion de <strong>rel="lightbox"</strong> ne fonctionnera pas ! Le répertoire <strong><span style="color:#009900;">s1600-h</span></strong> contient en effet des pages html avec l'image à afficher, et non pas une image en tant que telle. Il faut remplacer le nom du répertoire à utiliser :<br /><br /><div style="BACKGROUND: infobackground"><br /><a href="http://bp<span style="color:#009900;">n</span>.blogger.com/.../.../<br />.../<span style="color:#009900;"><strong>s1600</strong></span>/NOM_IMAGE.jpg" <strong>rel="lightbox"</strong> ...><br /><br /></div><br /><br /><div><strong>Un exemple</strong></div><br /><div style="TEXT-ALIGN: center"><br /><a title="Château Allaman" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_pic02/chateau_allaman.jpg" rel="lightbox"><img title="Château Allaman" style="DISPLAY: inline; WIDTH: 90px" alt="Château Allaman" src="http://www.liens-du-vin.ch/_pic02/chateau_allaman.jpg" /></a><a title="Domaine du Manoir" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_pic02/domaine_manoir.jpg" rel="lightbox"><img title="Domaine du Manoir" style="DISPLAY: inline; WIDTH: 90px" alt="Domaine du Manoir" src="http://www.liens-du-vin.ch/_pic02/domaine_manoir.jpg" /></a><a title="Château Maison Blanche" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none" href="http://www.liens-du-vin.ch/_pic02/chateau_maison_blanche.jpg" rel="lightbox"><img title="Château Maison Blanche" style="DISPLAY: inline; WIDTH: 90px" alt="Château Maison Blanche" src="http://www.liens-du-vin.ch/_pic02/chateau_maison_blanche.jpg" /></a></div><br /><br /><div><strong>lightbox 2 : Afficher un ensemble d'images</strong></div><br />La version 2, du <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank" title="lightbox2 - Lokesh Dakar">même auteur</a>, utilise le <a href="http://www.prototypejs.org/" target="_blank" title="Framework Prototype">Framework Prototype</a> et la <a href="http://script.aculo.us/" target="_blank" title="bibliothèque Scriptaculous">bibliothèque Scriptaculous</a>. Si elle autorise des effets graphiques plus performants, elle impose néanmoins de charger sur les pages qui utilisent lightbox2, plus de 50K de code. Les images sont appelées en utilisant la technologie <strong>AJAX</strong>. <br />Le principal avantage de cette version réside dans la possibilité d'afficher un ensemble d'images. <br /><br /><a href="http://sauvezdpi.blogspot.com" target="_blank" title="Sauvez la DPI">Sauvez la DPI</a> a réalisé une <a href="http://sauvez.dpi.googlepages.com" target="_blank" title="lightbox2 - Version française">version française</a> (des images gif avec les textes en français). Un grand merci donc, de mettre à notre disposition <a href="http://sauvez.dpi.googlepages.com/lightbox2_fr.zip" target="_blank" title="lightbox2 - zip file - français">un fichier *.zip complet</a>.<br /><br /><div><strong>Plus d'informations</strong></div><br />Une explication plus complète sur mon site : <a title="Display your pictures with Lightbox" href="http://www.liens-du-vin.ch/lightbox-pictures.html" target="_blank"><i>Display your Pictures with Lightbox</i></a>. <br /><br />Un ensemble d'images affiché avec <a href="http://www.liens-du-vin.ch/lightbox2-display-set-pictures.html" target="_blank" title="lightbox 2 - Display a Set of Pictures">la version 2</a>.<br /><br />Un clone de lightbox, <a title="Slimbox, un clone de lightbox" href="http://www.liens-du-vin.ch/slimbox-clone-lightbox.html" target="_blank">slimbox</a><br /><br />La série complète des photos (la noblesse des vins suisses) présentée avec un <a title="La noblesse des vins suisses" href="http://www.liens-du-vin.ch/vision_cdc.htm" target="_blank">slideshow</a><br /><br />Les article originaux : la version 1 de <a title="lightbox.js version 1" href="http://www.huddletogether.com/projects/lightbox/" target="_blank">lightbox.js</a> et la <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank" title="lightbox.js version 2">version 2</a>. <a href="http://www.digitalia.be/software/slimbox" target="_blank" title="Slimbox">Slimbox</a>, un clone de lightbox.Unknownnoreply@blogger.com69tag:blogger.com,1999:blog-4210934724484789456.post-17606911479810568452008-01-18T08:56:00.000+01:002008-01-18T13:11:47.116+01:00Sauvegarde intégrale du blog BloggerBlogger ne dispose pas d'une fonction d'exportation ou de téléchargement pour sauvegarder vos blogs. Toutefois, vous pouvez utiliser les instructions suivantes afin de créer un seul fichier contenant tous les messages que vous avez publiés et le copier ensuite sur votre propre ordinateur pour l'utiliser comme vous le souhaitez. Note: Si vous avez l'intention de continuer à utiliser votre blog, enregistrez une copie de votre modèle actuel dans un fichier sur votre ordinateur.<br /><br />1. Connectez-vous à votre compte Blogger, puis <span style="font-weight: bold;">'modèle'>'modifier le code html'</span>.<br /><br />2. Faites une copie de votre modèle actuel (<span style="font-weight: bold;">'sauvegarder/restaurer un modèle'>'Télécharger le modèle dans son intégralité'</span>).<br />Vous allez remplacer votre modèle Blogger par le modèle de page unique à l'étape 3, mais vous ne voulez probablement pas perdre votre modèle d'origine.<br /><br />3. Remplacez votre modèle Blogger par le texte suivant (vous devrez remplacer les <span style="color: rgb(255, 0, 0);">'</span> au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):<br /><br /><br /><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"> '</span><span style="color: rgb(51, 204, 0);">Blogger></span><br /><span style="color: rgb(51, 204, 0);"> AUTHOR: <$BlogItemAuthor$></span><br /><span style="color: rgb(51, 204, 0);"> DATE: <$BlogItemDateTime$></span><br /><span style="color: rgb(51, 204, 0);"> -----</span><br /><span style="color: rgb(51, 204, 0);"> BODY:</span><br /><span style="color: rgb(51, 204, 0);"> <$BlogItemBody$></span><br /><span style="color: rgb(51, 204, 0);"> --------</span><br /><span style="color: rgb(255, 0, 0);"> '</span><span style="color: rgb(51, 204, 0);">/Blogger></span><span style="color: rgb(51, 204, 0);"></span><br /><br /><br /><br />4. Cliquez sur <span style="font-weight: bold;">'Paramètres'> 'Publication'</span> et modifiez le nom de fichier de votre blog dans <span style="font-style: italic;">"adresse BlogSpot"</span>, ce qui vous empêchera d'écraser votre fichier actuel d'index principal.<br />Notez le nom de fichier actuel de votre blog afin que vous puissiez restaurer une fois la procédure finie. <span style="font-style: italic;">[Note: Cela s'applique uniquement aux utilisateurs qui publient par FTP. Les utilisateurs de BlogSpot devront écraser leur page de blog existante, mais elle sera remplacée dès que le blog sera republié avec le modèle initial.]</span><br /><br />5. Dans l'onglet <span style="font-weight: bold;">'Paramètres'> 'mise en forme'</span>, configurez votre blog afin d'afficher tous vos messages sur la page d'index principale. Il n'existe pas d'option spécifique pour cela : au lieu de cela, vous devez modifier le nombre de jours affichés sur votre page d'accueil (<span style="font-style: italic;">Voir N jours de messages sur la page principale</span>, avec la limite de 500 messages) qui devra être supérieur ou égal au nombre de jours pendant lesquels vous avez posté depuis le début.<br /><br />6. Dans le même onglet <span style="font-weight: bold;">'Paramètres'>'Mise en forme'</span>, donnez aux formats "Date/heure" les valeurs : <span style="color: rgb(51, 204, 0);">JJ / MM / AAAA HH: MM: SS AM | PM</span>. (Remarque: le format par défaut n'est pas comme ça dans le menu. Notez le paramètre actuel afin de pouvoir le restaurer après avoir fini.<br /><br />7. Toujours dans <span style="font-weight: bold;">'Paramètres' > 'Mise en forme'</span>, configurez les sauts de ligne à la valeur "<span style="color: rgb(51, 204, 0);">non</span>".<br /><br />8. Dans l'onglet <span style="font-weight: bold;">'Paramètres' > 'Archivage'</span>, configurez "<span style="font-style: italic;">fréquence d'archivage</span> " à " <span style="color: rgb(51, 204, 0);">aucune archive</span>". Cela évitera que vos archives actuelles soit écrasées par le nouveau modèle.<br /><br />9. Republiez votre blog, vous vous retrouverez avec un seul fichier contenant tous vos messages, présenté à l'aide du modèle ci-dessus, à l'emplacement spécifié dans vos paramètres (à l'étape 4, ci-dessus : nom de fichier BlogSpot). Ouvrez ce fichier dans votre navigateur Web et enregistrez le fichier sur votre disque dur local.<br /><br />10. Restaurez les paramètres précédents (nom de fichier du blog, fréquence d'archivage, horodatage, etc) dans votre blog et remplacez le modèle temporaire, que vous venez de créer, avec votre copie enregistrée. Publiez le blog et la page pour vérifier que tout est correct.<br /><br />Pour inclure les commentaires dans cette sauvegarde, il convient d'ajouter le code suivant à votre modèle, juste au-dessus du <!-- Blogger--> tag (vous devrez remplacer les <span style="color: rgb(255, 0, 0);">'</span> au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):<br /><br /><span style="color: rgb(51, 204, 0);"> 'BlogItemCommentsEnabled></span><br /><span style="color: rgb(51, 204, 0);"> 'BlogItemComments></span><br /><span style="color: rgb(51, 204, 0);"> COMMENT-AUTHOR:<$BlogCommentAuthor$></span><br /><span style="color: rgb(51, 204, 0);"> COMMENT-DATE:<$BlogCommentDateTime$></span><br /><span style="color: rgb(51, 204, 0);"> COMMENT-BODY:<$BlogCommentBody$></span><br /><span style="color: rgb(51, 204, 0);"> --------</span><br /><span style="color: rgb(51, 204, 0);"> '/BlogItemComments></span><br /><span style="color: rgb(51, 204, 0);"> '/BlogItemCommentsEnabled></span><br /><br /><br />J'ai rédigé cet article en traduisant l'aide blogger qui se trouve <a href="http://help.blogger.com/bin/answer.py?answer=41447&query=backup&topic=&type=f">ici</a> et j'ai l'impression que cette dernière manipulation n'est pas très recommandée, je ne comprends pas très bien pourquoi. Si quelqu'un pouvait préciser ce point - ainsi que corriger les erreurs éventuelles probables de traduction - ce serait bien.Anonymoushttp://www.blogger.com/profile/03493000388301801592noreply@blogger.com8tag:blogger.com,1999:blog-4210934724484789456.post-50325961183376465752007-12-18T23:11:00.008+01:002013-03-30T21:05:02.443+01:00Opacité et transparence - Appliquer un filtreOpacité et transparence<br /><script language="Javascript" type="text/javascript">var cssNode = document.createElement('link');cssNode.type = 'text/css';cssNode.rel = 'stylesheet'; cssNode.href = 'http://www.liens-du-vin.ch/style-blogger-testopaque.css'; cssNode.media = 'screen'; cssNode.title = 'feuille de style dynamique';document.getElementsByTagName("head")[0].appendChild(cssNode);</script><noscript>Javascript pas activé</noscript><br /><br />Firefox et Internet Explorer (5.5 et au-delà) disposent d'un <strong>filtre</strong> qui peut s'appliquer sur une image ou un bloc de texte.<br /><br /><strong>La théorie</strong><br /><br />L'<strong>opacité</strong> (<span lang="en">opacity</span>) est définie comme le complément à 100 du taux de transparence (!) du filtre. Ainsi une opacité de 95% ne filtre que 5% de couleur, alors qu'une opacité de 5% retient 95% des couleurs.<br />Sous Firefox, le paramètre <strong><em>opacity</em></strong> varie de 0 à 1, alors que sous Internet Explorer, on utilise un filtre <strong><em>alpha</em></strong> (opacity) variant de 0 à 100.<br /><br /><strong>L'utilisation</strong><br /><br />L'opacité peut être utilisée pour un bloc <strong>div</strong>, un <strong>paragraphe</strong>, des <strong>titres</strong>, une <strong>table</strong> complète ou des <strong>cellules</strong>. Elle s'utilise aussi avec une <strong>image</strong>. Pour le cas d'une image, Internet Explorer impose de définir au moins l'une des dimensions (width ou height).<br /><br /><strong>Utilisation dans un bloc div</strong><br /><br /><div class="testopaque">Le bloc div sans filtre</div><br /><br /><div class="testopaque opaque90">Le bloc div opaque à 90 % - filtre de 10 %</div><br /><div class="testopaque opaque70">Le bloc div opaque à 70 % - filtre de 30 %</div><br /><div class="testopaque opaque50">Le bloc div opaque à 50 % - filtre de 50 %</div><br /><div class="testopaque opaque30">Le bloc div opaque à 30 % - filtre de 70 %</div><br /><div class="testopaque opaque10">Le bloc div opaque à 10 % - filtre de 90 %</div><br /><p><br /></p><br /><br /><strong>Le style du bloc div</strong><br /><br /><div style="BACKGROUND: infobackground"><br />// le bloc div opaque à 70 se définit comme suit, la clause opacity pour FF et le filtre pour IE<br />.opaque70 {<br />opacity: .7;<br />color: white;<br />filter: alpha(opacity=70);<br />}<br /></div><br /><br /><strong>Un filtre sur une image</strong><br /><script src="http://www.liens-du-vin.ch/blogger-opacity.js"></script><br /><br />L'image initiale est affichée avec une opacité de 20 %, le filtre est supprimé en passant le curseur de la souris sur l'image.<br /><br /><div style="TEXT-ALIGN: center"><br /><img onmouseover="changevisibility(this,0);" title="Les Liens du Vin" style="BORDER-TOP-WIDTH: 0pt; BORDER-LEFT-WIDTH: 0pt; FILTER: alpha(opacity=20); BORDER-BOTTOM-WIDTH: 0pt; BORDER-RIGHT-WIDTH: 0pt; opacity: 0.2" onmouseout="changevisibility(this,1);" height="74" alt="Les Liens du Vin" src="http://www.liens-du-vin.ch/_pic01/vignoble.gif" width="200" /><br /><a title="Les Liens du Vin" href="http://www.liens-du-vin.ch/" target="_blank"><span style="font-size:78%;">Les Liens du Vin</span></a><br /></div><br /><br /><strong>Le code</strong><br /><br /><div style="BACKGROUND: infobackground"><br />// la fonction agit comme un flip-flop et passe d'une opacite de 20 % à 100 % (pas de filtre)<br />// document.all permet de tester le type de navigateur<br />//<br />function changevisibility(lowvis,highvis)<br />{<br />force=(highvis==0)? 1 : 0.2<br />if (document.all)<br />lowvis.filters.alpha.opacity=force*100<br />else<br />lowvis.style.opacity=force<br />}<br /></div><br /><br /><strong>Un filtre sur une image qui change continuellement</strong><br /><br />Pour Noël, une image dont l'opacité varie par incrément de 5 %<br /><div style="TEXT-ALIGN: center"><br /><img id="testop_change" title="Les images des Liens du Vin" style="FILTER: alpha(opacity=5); opacity: 0.05" alt="Les images des Liens du Vin" src="http://www.liens-du-vin.ch/_pic04/bougie-noel.gif" width="199" /><br /><a title="Les images des Liens du Vin" href="http://www.liens-du-vin.ch/_pic04/vision_winepic04.htm" target="_blank"><span style="font-size:78%;">Les images des Liens du Vin</span></a><br /></div><br /><script type="text/javascript">f_opacity();</script><noscript>Javascript pas activé</noscript><br /><br /><strong>Le code</strong><br /><br /><div style="BACKGROUND: infobackground"><br />// setInterval permet l'appel toutes les 250 millisecondes de la fonction<br />// l increment d opacite est de 5 %<br />// document.all permet de tester le type de navigateur<br />//<br />op=0;<br />var op_plus = 1;<br />var op_moins = 0;<br />//<br />function f_opacity()<br />{<br />if (op < op_plus="0" op_moins="1"> 0.05 && op_moins)<br />op-=0.05<br />else<br />{<br />op_plus=1<br />op_moins=0<br />}<br />if (document.all)<br />document.getElementById("testop_change").style.filter="alpha(opacity=" + 100 * op +")";<br />else<br />document.getElementById("testop_change").style.opacity=op;<br />}<br />setInterval("f_opacity()",250);<br /></div><br /><p><br />Le fichier style et le javascript sont enregistrés sur <a title="Google Page Creator" href="http://www.liens-du-vin.ch" target="_blank">les Liens du Vin</a></p>Le fichier Javascript, <a title="opacity.js" href="http://www.liens-du-vin.ch/blogger-opacity.js" target="_blank">opacity.js</a><br /><br />La feuille de style, <a title="style-blogger-testopaque.css" href="http://www.liens-du-vin.ch/style-blogger-testopaque.css" target="_blank">style-blogger-testopaque.css</a><br /><br /><p><strong>Créer un effet de transition entre images</strong> </p><p>Une <a title="Un effet de transition en variant l'opacité" href="http://www.liens-du-vin.ch/fading-pictures.htm" target="_blank">page d'exemple</a>, cliquer sur la vignette pour voir l'effet de transition</p><br /><p><strong>En savoir plus</strong> </p><br /><a href="http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html" target="_blank" title="Utiliser box-shadow pour ombrer ses blocs">Utiliser box-shadow pour ombrer ses blocs</a><br /><br />Effet de transparence au survol d'un lien, avec la technique du <a href="http://viti-vino.blogspot.com/2010/10/profils-reseaux-sociaux-sprite-css.html" target="_blank" title="Sprite CSS">Sprite CSS</a>.<br /><br/>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-4210934724484789456.post-45533779130925406762007-11-13T21:03:00.012+01:002009-12-25T14:57:50.258+01:00Ameliorer la visibilite de son Blog<span style="font-family:verdana;"><strong>Mieux référencer son Blog<br /></strong><br />Si la <strong>visibilité d'un Blog</strong> sur les moteurs de recherche dépend surtout du contenu des billets, le blogueur débutant oublie souvent quelques points de détail qui permettent d'améliorer le positionnement de son Blog dans les résultats de recherche pour une requête. Rappelons qu'en moyenne 80% des internautes cliquent sur les 3 premieres réponses dans les résultats de recherche. </span><br /><span style="font-family:verdana;"><br /><br /><strong>Les paramètres du Blog<br /></strong><br />Sous <strong>Général</strong>, <strong>Ajouter le blog à nos listes</strong> (<span lang="en">Add your Blog to our listings</span>) : <strong><span style="COLOR: rgb(51,204,0)">Oui</span></strong></span><br /><span style="font-family:verdana;"></span><br /><span style="font-family:verdana;"><strong>Permettre aux moteurs de recherche de trouver votre Blog</strong> (<span lang="en">Let search engines find your blog</span>) : <span style="COLOR: rgb(51,204,0)"><strong>Oui</strong></span> </span><br /><span style="font-family:verdana;"><br /><br /><br /></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><div align="left"><span style="font-family:verdana;">Le Blog va figurer sous <a title="Blog Search" href="http://blogsearch.google.fr/" target="_blank"><span lang="en">Blog Search</span></a> et des <strong><em>Pings</em></strong> seront envoyés </span></div><span style="font-family:verdana;"><div align="center"><br /></div><div align="center"><span style="font-family:verdana;"><br /><img style="BORDER-BOTTOM: rgb(51,255,102) 1px solid; BORDER-LEFT: rgb(51,255,102) 1px solid; MARGIN: 0px auto 10px; BORDER-TOP: rgb(51,255,102) 1px solid; BORDER-RIGHT: rgb(51,255,102) 1px solid" id="BLOGGER_PHOTO_ID_5132724259161149074" title="Envoyer des Pings - Publier" border="0" alt="Envoyer des Pings - Publier" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrsQ6ENdKuprKObRwCbuef7vVA04V2rG2t0LZFWbS2CM03Bsv_GmPadc-eSClYCKvSSIudrWSGFI9qwBPrHU1ZzHyVH2IDkuscx5z2DZcu9jz8neEQ1CGa3BsDNDXTq-De8V5-dZ1JrU/s400/publication-alternative.jpg" /><br /></span></div></span><br /><span style="font-family:verdana;"><em><strong>Ping</strong> : envoyer un signal vers d'autres sites ou blogs dès qu'on publie un nouveau billet<br /></em><br />Sous <strong>Flux d'actualisation</strong>, définir tous les flux sous <strong>complet</strong><br /><br /></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><span style="font-family:verdana;"></span><br /><br /><br /><div style="TEXT-ALIGN: center"><span style="font-family:verdana;"><img style="BORDER-BOTTOM: rgb(51,255,102) 1px solid; TEXT-ALIGN: center; BORDER-LEFT: rgb(51,255,102) 1px solid; MARGIN: 0px auto 10px; BORDER-TOP: rgb(51,255,102) 1px solid; BORDER-RIGHT: rgb(51,255,102) 1px solid" id="BLOGGER_PHOTO_ID_5132422070657798370" title="Flux d'actualisation" border="0" alt="Flux d'actualisation" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigw22kv2aK7o8_Xx1KdOUYsQcduspMN3qQfRSR80PluYWB0Cz98EzHV8ycduCXyrlYkDEdKmxIT3IG6hHDDNBIvcbyzNm2XV-Q4N_RroL3abIIY5Uvm-adx5XMlJpHeHk0QE32djBV6E8/s400/flux-actualisation.jpg" /><br /></span></div><br /><br /><br /><div align="left"><br /><span style="font-family:verdana;"><em><strong>Flux</strong> : le fichier XML contenant les billets publiés sur le blog, voir un </em></span><a title="Les Flux d'actualisation" href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank"><span style="font-family:verdana;"><em>billet précédent</em></span></a><span style="font-family:verdana;"><em><br /></em><br /><br /><strong>Modèle</strong>, <strong>Modifier le code HTML</strong>, Dans la section <head> :<br /><br />Créer un tag <meta> title : Définir en 80 mots au plus, le titre du Blog<br /></span></div><span style="font-family:verdana;"><br /><br /><div align="center"><br /><span style="COLOR: rgb(51,204,0)"><meta content='Le titre du blog' name='title' /></span><br /><br /></div><br /><br /><div align="left">Créer un tag <meta> description : Une courte description (200 caractères maximum) du Blog</div><br /><br /><div align="center"><br /><span style="COLOR: rgb(51,204,0)"><meta content="La description du Blog" name="description" /></span> </div><br /><br /><div align="center"><br /></div><div align="left">Créer un tag <meta> keywords : De 15 à 20 mots clés ou expressions, séparés par une virgule</div><br /><br /><div align="center"><br /><span style="COLOR: rgb(51,204,0)"><meta content="Les mots ou expressions clés" name="keywords" /></span></div><br /><br /><div align="left"></div><br /><br /><div align="left"><strong></strong></div><div align="left"><strong>Inscrire son blog<br /></strong><br /></div><a title="Ajouter son blog dans Google" href="http://www.google.ch/addurl" target="_blank"><span style="font-family:verdana;">Dans l'index Google</span></a><span style="font-family:verdana;"><br /><br /></span><a title="Ajouter son Blog sur Site Explorer de Yahoo" href="http://siteexplorer.search.yahoo.com/" target="_blank"><span style="font-family:verdana;">Sur Site Explorer de Yahoo</span></a><br /><br /></span><a title="Ajouter son Blog sur Microsoft Bing" href="http://webmaster.live.com/" target="_blank"><span style="font-family:verdana;">Sur Microsoft Bing</span></a><br /><br /><br /><br /><span style="font-family:verdana;"><strong>Créer un sitemap</strong> </span><br /><br /><br /><br /><div align="left"></div><div align="left"><span style="font-family:verdana;"><em><strong>Sitemap</strong> : un fichier en format xml, qui liste l'ensemble des billets du Blog<br /></em><br />Pour <strong>Google</strong>, rendez-vous sur les </span><a title="Google - Outils pour Webmaster" href="https://www.google.com/webmasters/tools" target="_blank"><span style="font-family:verdana;">outils pour webmasters</span></a><span style="font-family:verdana;"> et inscrivez l'adresse du Blog. </span></div><br /><br /><br /><div align="left"><span style="font-family:verdana;">Comme sitemap, indiquez (en remplaçant aide-blogger-fr par le nom du blog) : </span></div><br /><br /><div align="left"><span style="font-family:verdana;"></span></div><br /><br /><div align="center"><span style="COLOR: rgb(51,204,0);font-family:verdana;" ><a href="http://aide-blogger-fr.blogspot.com/atom.xml">http://aide-blogger-fr.blogspot.com/atom.xml</a></span></div><br /><br /><div align="center"><span style="COLOR: rgb(51,204,0);font-family:Verdana;" ></span></div><br /><br /><div align="left"><span style="font-family:verdana;"></span></div><span style="font-family:verdana;">Plus d'informations </span><a title="Un sitemap pour un compte Blogger" href="http://www.liens-du-vin.ch/sitemap-blogger.html" target="_blank"><span style="font-family:verdana;">ici</span></a><span style="font-family:verdana;"><br /><br />Pour prouver à Google que l'on est propriétaire du Blog, il faut placer une balise <meta> dans le Blog. Ajouter, dans la section <head> : </span><br /><span style="font-family:verdana;"><br /><br /></span><span style="font-family:verdana;"><div align="center"><br /><span style="COLOR: rgb(51,204,0)"><META name="verify-v1" content="XXXXXX ... XXXXXX" /></span></div><br /><br /><div align="left"><br /><br />Pour <strong>Site Explorer</strong> de Yahoo, le principe est le même.<br /><br /><br /><strong></strong></div><br /><br /><div align="left"><strong>Choisir le titre de ses billets<br /></strong><br />Ne jamais utiliser des caractères accentués, Blogger crée une adresse URL à partir du titre.<br /><br />Par exemple, <strong><em>Partager ses lieux géographiques</em></strong> favoris deviendra, malheureusement, <a title="Partager ses lieux géographiques favoris" href="http://viti-vino.blogspot.com/2007/05/partager-ses-lieux-gographiques-favoris.html" target="_blank"><span style="font-family:verdana;">partager-ses-lieux-gographiques-favoris</span></a> <span style="font-family:verdana;">, et le mot clé <strong><em>gographique</em></strong> n'amènera que peu de visiteurs !<br /></span></div></span><span style="font-family:verdana;"><br /><br /><br /><div align="left"><br /></div><div align="left"><strong>Inscrire son Blog sur FeedBurner</strong><br /><br /><strong></strong></div><div align="left"><strong>FeedBurner</strong> propose un traducteur de Flux, et permet la création d'un bandeau de promotion pour son flux :<br /></div></span><p style="TEXT-ALIGN: center"><a title="Aide nouveau Blogger" href="http://feeds.feedburner.com/~r/aide-blogger/~6/4" target="_blank"><span style="font-family:verdana;"><img style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" title="Aide nouveau Blogger" alt="Aide nouveau Blogger" src="http://feeds.feedburner.com/aide-blogger.4.gif" /></span></a></p><br /><br /><br /><p align="left"><br /><span style="font-family:verdana;"><strong>Publier ses Billets<br /></strong><br />Les Digg-like les plus courants :<br /></span><br /><ul><li><a title="Blogasty" href="http://blogasty.com/" target="_blank"><span style="font-family:verdana;">Blogasty</span></a></li><br /><li><a title="Blog Memes" href="http://www.blogmemes.fr/" target="_blank"><span style="font-family:verdana;">Blog Memes</span></a></li><br /><li><a title="Bluegger" href="http://www.bluegger.com/" target="_blank"><span style="font-family:verdana;">Bluegger</span></a></li><br /><li><a title="Digg" href="http://www.digg.com/" target="_blank"><span style="font-family:verdana;">Digg</span></a></li><br /><li><a title="Fuzz" href="http://www.fuzz.fr/" target="_blank"><span style="font-family:verdana;">Fuzz</span></a></li><br /><li><a title="NUOUZ" href="http://www.nuouz.com/" target="_blank"><span style="font-family:verdana;">NUOUZ</span></a></li><br /><li><a title="Romanding" href="http://www.romanding.ch/" target="_blank"><span style="font-family:verdana;">Romanding</span></a></li><br /><li><a title="Scoopeo" href="http://www.scoopeo.com/" target="_blank"><span style="font-family:verdana;">Scoopeo</span></a></li><br /><li><a title="Paperblog" href="http://www.paperblog.fr/" target="_blank"><span style="font-family:verdana;">Paperblog</span></a></li><br /></ul><p></p><br /><br />Pour Pinguer son blog : <br /><br /><a title="Pingoat" href="http://www.pingoat.com/" target="_blank">Pingoat</a><br /><br /><a title="Ping-o-matic" href="http://pingomatic.com/" target="_blank">Ping-o-matic</a><br /><br /><br /><span style="font-family:verdana;"><strong>Les conseils de Google</strong></span><br /><span style="font-family:verdana;"></span><br /><span style="font-family:verdana;"><span style="font-family:verdana;">Optimisez aussi votre site pour le moteur de recherche Google. Un article du <a title="Optimisez aussi votre site pour le moteur de recherche Google" href="http://adsense-fr.blogspot.com/2008/02/optimisez-aussi-votre-site-pour-le.html" target="_blank">Blog Inside AdSense</a>, en français.</span><br /><br /><span style="font-family:verdana;">Optimisez vos contenus - Guide pour des éditeurs de sites web, une brochure de Google en <a title="Making the most of Your Content - A publisher's guide to the Web" href="http://books.google.com/googlebooks/pdf/webmastertools.pdf" target="_blank">anglais</a> ou en <a title="Optimisez vos contenus - Guide pour des éditeurs de sites web" href="http://blog.abondance.com/google-optimisez-vos-contenus-booklet.pdf" target="_blank">français</a>, en format *.pdf (180 K).</span><br /><br /><span style="font-family:verdana;">Le guide pdf pour débuter en SEO (<span lang="en">Search Engine Optimization</span>), </span><a title="Google's Google Search Engine Optimization Starter Guide" href="http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf" target="_blank"><span style="font-family:verdana;">22 pages de conseils selon Google</span></a><span style="font-family:verdana;"> (en anglais).</span></span><br /><p><span style="font-family:verdana;"><a href="http://www.google.com/support/blogger/bin/answer.py?answer=42377&topic=12454" target="_blank" title="Faire la promotion de son Blog">Faire la promotion de son Blog</a>, selon le Centre d'aide Blogger</span></p><p><span style="font-family:verdana;"> </p><br /><br /><br /><span style="font-family:verdana;"><strong>Référencer son Blog</strong></span><br /><span style="font-family:verdana;"></span><br /><span style="font-family:verdana;"><span style="font-family:verdana;">Référencer son blog sur <a title="Tout Le Monde En Blogue" href="http://aide-blogger-fr.blogspot.com/2007/09/un-site-de-rfrencement-des-blogs.html" target="_blank">ToutLeMondeEnBlogue</a>, selon ce <a title="Référencer son blog" href="http://www.toutlemondeenblogue.com/" target="_blank">billet</a></span><br /><br /><br /></span><span style="font-family:verdana;"><br /><br /></span><span style="font-family:verdana;"><p></p></span><div align="left"><strong><span style="font-family:verdana;">Autres trucs et astuces : </span></strong></div><br /><br /><br /><div align="left"><br /><a title="L'atelier de Mousie" href="http://laboratoiredemousie.blogspot.com/" target="_blank"><span style="font-family:verdana;">L'atelier de Mousie</span></a><span style="font-family:verdana;"><br /></span><a title="Le Blog des Liens du Vin" href="http://viti-vino.blogspot.com/" target="_blank"><span style="font-family:verdana;">Le Blog des Liens du Vin</span></a><span style="font-family:verdana;"><br /></span><a title="Utiliser Google Sites" href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank"><span style="font-family:verdana;">Utiliser Google Sites</span></a><span style="font-family:verdana;"><br /></span><a title="Gpooo" href="http://gpooo.blogspot.com/" target="_blank"><span style="font-family:verdana;">Gpooo</span></a><span style="font-family:verdana;"><br /><br /></span></div><br /><br /></span><span style="font-family:verdana;"></span>Unknownnoreply@blogger.com68