tag:blogger.com,1999:blog-308018212012-05-24T20:49:40.642+02:00Viti-Vino. Le Blog de Prac - Les Outils Google. Pour personnaliser son blog. Un complément de l'aide en ligne. Les trucs et astuces pour Blogger. Les exemples du Forum d'Aide pour Blogger.Philippe Chappuisnoreply@blogger.comBlogger61125blogspot/viti-vinohttp://feedburner.google.comtag:blogger.com,1999:blog-30801821.post-75177573342681310722012-04-26T22:31:00.001+02:002012-05-09T00:35:50.793+02:002012-05-09T00:35:50.793+02:00<br /> <p><h1 itemprop="name" style="display: none;">Google Drive et Blogger - Améliorer son Blog</h1> <img itemprop="image" src="http://2.bp.blogspot.com/-4nQzLJoLQY4/T5myPLK-R4I/AAAAAAAAF0w/lnX87_l4_j0/s400/google-drive-blogger.jpg" style="display: none;" /> <p itemprop="description" style="display: none;">Google Drive peut être utilisé comme un véritable hébergeur Internet. L 'espace de stockage gratuit de 5 Giga autorise l'hébergement de pages html, de feuilles de style, de fichiers son ou d'animations Flash.</p> <a href="http://googlefrance.blogspot.com/2012/04/lancement-de-google-drive-pour-de-vrai.html" target="_blank" title="Google Drive">Google Drive</a> permet le stockage gratuit jusqu'à 5 Giga. Une petite astuce d'adressage permet de disposer de cet espace de <strong><em>stockage</em></strong> comme un <strong><em>hébergement internet</em></strong>. Nous allons en profiter pour améliorer notre Blog.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="Google Drive - Blogger" src="http://2.bp.blogspot.com/-4nQzLJoLQY4/T5myPLK-R4I/AAAAAAAAF0w/lnX87_l4_j0/s400/google-drive-blogger.jpg" title="Google Drive - Blogger" style="width: 400px; height: 260px; border: solid 1px #db6f09;" /></div> <br /> <br /> <strong>Intégrer sur son Blog une page html hébergée sur Google Drive</strong> <br /> <br /> A titre d'exemple, j'ai copié la page <a href="http://www.liens-du-vin.ch/diapo-grand-cru.htm" target="_blank" title="Diaporama des Premiers Grands Crus">Diaporama des Premiers Grands Crus Vaudois</a>, hébergée sur mon site <a href="http://www.liens-du-vin.ch/" target="_blank" title="Les Liens du Vin">Les Liens du Vin</a>, sur <a href="https://docs.google.com/" target="_blank" title="Google Documents">Google Documents</a>. <br /> Une fois le document partagé et rendu <strong><em>public</em></strong>, Google Documents nous donne l'adresse suivante comme lien de partage&nbsp;:&nbsp; <br /> <br /> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> https://docs.google.com/<span style="color: darkgreen; font-weight: bold;">open</span>?id=<span style="color: #cc0000;">0B4yfJJJSNrfuRW1ONmllc3FlSU0</span><br /> <br /> </div> <br /> Cette URL ne peut pas être utilisée pour intégrer cette page sur son Blog. Il faut utiliser la variante suivante (remplacer <em>open</em> par <em>uc</em>)&nbsp;:&nbsp; <br /><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br/> https://docs.google.com/<span style="color: darkgreen; font-weight: bold;">uc</span>?id=<span style="color: #cc0000;">0B4yfJJJSNrfuRW1ONmllc3FlSU0</span><br /><br/> </div> <br /> Cette URL peut être utilisée comme lien, <a href="https://docs.google.com/uc?id=0B4yfJJJSNrfuRW1ONmllc3FlSU0" target="_blank" title="Le Diaporama des Premiers Grands Crus">Le Diaporama des Premiers Grands Crus vaudois</a>, ou comme adresse source pour l'intégration de la page sur le Blog.<br/> <br /> Le code d'intégration, avec un tag <strong><em>iframe</em></strong>&nbsp;:&nbsp; <br /> <br /> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;iframe src="https://docs.google.com/<span style="color: darkgreen;font-weight: bold;">uc</span>?id=<span style="color: #cc0000;">0B4yfJJJSNrfuRW1ONmllc3FlSU0</span>" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;<br/><br/> </div> <br /> <div style="width: 100%; margin: auto; text-align: center;"><br/>Les Premiers Grands Crus des <a href="http://www.liens-du-vin.ch/vision_cdc.htm" title="Clos Domaines et Châteaux" target="_blank">Clos Domaines et Châteaux</a><br/><iframe src="https://docs.google.com/uc?id=0B4yfJJJSNrfuRW1ONmllc3FlSU0" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></iframe><br/><span style="font-size: 0.75em;">© Photos&nbsp;:&nbsp;<a href="http://www.c-d-c.ch" title="Régis Colombo" target="_blank">Régis Colombo</a> et <a href="http://www.c-d-c.ch" title="Clos Domaines et Châteaux" target="_blank">Clos Domaines et Châteaux</a></span></div> <br/> <br/> <strong>Feuille de style pour un seul message</strong> <br/> <br/> Pour une mise en page particulière, une <strong><em>feuille de style</em></strong> peut être hébergée sur Google Documents. Pour qu'elle s'applique à l'ensemble du Blog il faut placer cette instruction avant &lt;/head&gt;&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;link rel="stylesheet" type="text/css" href="<span style="color: #cc0000;">URL feuille de style</span>" /&gt;<br/> <br/> </div> <br/><br/> Pour appliquer un style particulier à <strong>un seul</strong> message, il est possible de placer le style entre les 2 balises &lt;style&gt; et &lt;/style&gt; dans le html du message. Si la feuille de style est de grande taille ou utilisée à plusieurs endroits sur le Blog, il peut être intéressant de l'héberger sur Google Drive et de la charger dynamiquement lors de l'affichage de la page concernée. <br/>Il suffit de placer ce petit script dans le html du message&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;script&gt; var cssNode = document.createElement('link');<br/> cssNode.type = "text/css";<br/> cssNode.rel = "stylesheet";<br/> cssNode.href = "<span style="color: #cc0000;">URL feuille de style</span>";<br/> cssNode.media = "screen";<br/> document.getElementsByTagName("head")[0].appendChild(cssNode);<br/> &lt;/script&gt;<br/> <br/> </div> <br/> <br/> Pour obtenir l'URL, nous effectuons les mêmes transformations que ci-dessus, sur l'URL fournie par Google Documents&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> https://docs.google.com/open?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg<br/><br/> https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg <br/><br/> </div> <br/><br/> La <a href="https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg" target="_blank" title="Feuille de style sur Google Drive">feuille test_style.css</a> devient accessible et peut être utilisée sur le Blog. <br/><br/> A titre d'exemple, cette feuille de style est utilisée pour mettre en forme la liste ci-dessous&nbsp;:&nbsp; <br/><br/> <script> var cssNode = document.createElement('link'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg'; cssNode.media = 'screen'; document.getElementsByTagName("head")[0].appendChild(cssNode) </script> <center> <div id="teststyle1" style="text-align: left;"> Quelques services Google <ul> <li> <a href="https://drive.google.com" title="Google Drive" target="_blank">Google Drive</a> </li> <li> <a href="https://www.blogger.com" title="Blogger" target="_blank">Blogger</a> </li> <li> <a href="https://picasaweb.google.com" title="Picasa Albums Web" target="_blank">Picasa Albums Web</a> </li> </ul> </div> </center> <br/><br/> <strong>Les fichiers son (*.mp3)</strong> <br/><br/> Google Documents accepte les fichiers *.mp3. En effectuant le changement d'URL, le fichier devient lisible par un lecteur standard. J'ai utilisé le <a href="http://www.liens-du-vin.ch/google-audio_player-script.htm" target="_blank" title="lecteur mp3 de Google Mail">lecteur mp3 de Google Mail</a> pour jouer un <a href="https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0" target="_blank" title="extrait du Gloria Patri de Jean-Sébastien Bach">extrait du Gloria Patri de Jean-Sébastien Bach</a>. <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> https://docs.google.com/open?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0<br/><br/> <span style="color: #cc0000; font-weight: bold;">https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0</span> <br/><br/> </div> <br/><br/> Le <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Gadget Google">Gadget Google</a> est inséré dans le html du message avec un tag <strong><em>iframe</em></strong>&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;iframe style="width: 240px; height: 27px;" <br/> src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml<br/>&up_MP3=<span style="color: #cc0000; font-weight: bold;">https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0</span><br/> &up_START=No<br/> &up_CCOL=%23f6f6f6" <br/> allowTransparency="true" <br/> frameborder="0" <br/> scrolling="no"&gt;<br/> &lt;/iframe&gt; <br/><br/> </div> <br/><br/> <div class="separator" style="clear: both; text-align: center;"> <iframe style="width: 240px; height: 27px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3=https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0&up_START=No&up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Lecteur audio de Google - http://www.liens-du-vin.ch/google-audio_player- script.htm - Gloria Patri de Jean-Sébastien Bach</iframe> <br/> <span style="font-size: 0.75em;">Extrait J.S. Bach - Gloria Patri</span> </div> <br/><br/> <strong>Animation Flash</strong> <br/><br/> Un <a href="http://fr.wikipedia.org/wiki/Adobe_Flash" target="_blank" title="Fichier Flash (*.swf)">fichier Flash</a> peut être hébergé sur Google Documents. A titre d'exemple, j'ai placé l'<a href="http://www.liens-du-vin.ch/_files/GoogleClock.swf" target="_blank" title="horloge Google">horloge Google</a> et obtenu les URL suivantes&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> https://docs.google.com/open?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28<br/><br/> <span style="color: #cc0000; font-weight: bold;">https://docs.google.com/uc?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28</span> <br/><br/> </div> <br/><br/> Pour intégrer l'animation Flash dans un message, il suffit de placer les 2 scripts suivants dans le html du message&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;<br/><br/> &lt;script type="text/javascript"&gt;><br/> var flashvars = { };<br/> var params = { wmode: "transparent" };<br/> var attributes = { id: "player_swf" };<br/> swfobject.embedSWF("<span style="color: #cc0000; font-weight: bold;">https://docs.google.com/uc?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28</span>",<br/> "<span style="color: darkgreen;font-weight: bold;">player_content</span>", "200", "200", "9.0.0", false, flashvars, params, attributes);<br/> &lt;/script&gt; <br/><br/> </div> <br/><br/> Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message&nbsp;:&nbsp; <br/><br/> <div style="background-color: infobackground; font-family: Arial, sans-serif, padding: 4px;"><br /> &lt;div id="<span style="color: darkgreen;font-weight: bold;">player_content</span>"&gt;&lt;/div&gt; <br/><br/> </div> <br/><br/> <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <center><div id="player_content"></div></center> <script type="text/javascript"> var flashvars = { }; var params = { wmode: "transparent" }; var attributes = { id: "player_swf" }; swfobject.embedSWF("https://docs.google.com/uc?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28", "player_content", "200", "200", "9.0.0", false, flashvars, params, attributes); </script> <br/><br/> <strong>Plus d'informations</strong> <br/><br/> <a href="https://drive.google.com" target="_blank" title="Google Drive">Google Drive</a> <br/><br/> <a href="http://viti-vino.blogspot.com/2011/02/feuille-excel-blog-google-viewer.html" title="Afficher une feuille Excel sur son Blog avec Google Viewer" target="_blank">Afficher une feuille Excel sur son Blog avec Google Viewer</a> <br/><br/> <a href="http://viti-vino.blogspot.com/2009/09/pdf-viewer-google-docs.html" target="_blank" title="Le lecteur de documents de Google Documents">Le lecteur de documents de Google Documents</a> <br/><br/> <a href="http://www.liens-du-vin.ch/google-audio_player-script.htm" title="Les lecteurs MP3 de Google" target="_blank">Les lecteurs MP3 de Google</a> <br/><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-7517757334268131072?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/yl8yR6XlumTWBGQn6eCWgSRgxyQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/yl8yR6XlumTWBGQn6eCWgSRgxyQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/yl8yR6XlumTWBGQn6eCWgSRgxyQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/yl8yR6XlumTWBGQn6eCWgSRgxyQ/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/cKfrRckvUwQ" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com2http://viti-vino.blogspot.com/2012/04/google-drive-blogger-ameliorer-blog.htmltag:blogger.com,1999:blog-30801821.post-77792983129742774802012-04-09T17:54:00.001+02:002012-05-01T23:59:11.175+02:002012-05-01T23:59:11.175+02:00<br /> <a href="http://pinterest.com/prac53/" target="_blank" title="Pinterest">Pinterest</a> conserve le site à l'origine du <em><strong>Pin</strong></em>. Ainsi, les <a href="http://www.pinterest.com/source/viti-vino.blogspot.com" target="_blank" title="Pins du Blog">Pins de ce Blog</a> se trouvent à cette adresse <br /> <div style="background-color: infobackground; family: Arial, sans-serif; font-size: 0.9em; font-weight: bold; padding: 2px;"> <br /> http://www.pinterest.com/source/<span style="color: #cc0000;">viti-vino.blogspot.com</span> <br /> <br /></div> <br /> Pour un <strong>site</strong>, <a href="http://www.pinterest.com/source/liens-du-vin.ch" target="_blank" title="Pins d'un site">l'adresse des Pins</a> est&nbsp;:<br /> <br /> <div style="background-color: infobackground; family: Arial, sans-serif; font-size: 0.9em; font-weight: bold; padding: 2px;"> <br /> http://www.pinterest.com/source/<span style="color: #cc0000;">liens-du-vin.ch</span> <br /> <br /></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.pinterest.com/source/liens-du-vin.ch" imageanchor="1" style="cursor: pointer; margin-left: 1em; margin-right: 1em;" title="Pinterest - www.liens-du-vin.ch"><img alt="Pinterest - www.liens-du-vin.ch" src="http://4.bp.blogspot.com/-1M7Ddoq5blU/T4MMKKdqJbI/AAAAAAAAFvU/n4-DvwnDods/s400/pinterest-liens-du-vin.jpg" style="border: solid 1px #db6f09; height: 279px; width: 320px;" title="Pinterest - www.liens-du-vin.ch" /></a></div> <br /> <br /> <strong>Créer un Flux RSS</strong> <br /> <br /> Nous pouvons utiliser le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux RSS">Flux RSS</a> de cette adresse pour suivre les Pins de ce site sur Pinterest. <br /> <br /> <a href="http://feed43.com/" target="_blank" title="Feed43 - Convert any web page to news feed on the fly">feed43</a> permet de créer un Flux RSS à partir d'une adresse URL. <br /> <br /> Pour créer un nouveau flux, spécifier l'adresse de la page à convertir&nbsp;:&nbsp; <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="feed43 - URL à convertir" src="http://1.bp.blogspot.com/-JAmG_XxkTdw/T4MQEh9BZVI/AAAAAAAAFvg/eQWlcFKz4_U/s800/feed43-source.jpg" style="border: solid 1px #db6f09; height: 131px; width: 580px;" title="feed43 - URL à convertir" /></div> <br /> <br /> Nous allons extraire dans chaque message du Flux RSS, <strong>l'identifiant du Pin</strong>, <strong>le commentaire</strong>, <strong>le lien vers l'auteur</strong> du Pin et son <strong>nom</strong>. <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="feed43 - zones à extraire" src="http://2.bp.blogspot.com/-yHYM_AOpXbQ/T4MRgaLXTlI/AAAAAAAAFvw/CGYMpeUknuw/s800/feed43-extraction.jpg" style="border: solid 1px #db6f09; height: 225px; width: 580px;" title="feed43 - zones à extraire" /></div> <br /> <br /> Les zones à extraire sont marquées par <strong>{%}</strong>. Le symbole <strong>{*}</strong> indique que nous voulons extraire ces zones dans tous les Pins. Les zones ainsi définies sont utilisables en indiquant leur numéro d'ordre, soit <strong>{%1}, {%2}, ...</strong> <br /> <br /> <div style="background-color: infobackground; family: Arial, sans-serif; font-size: 0.9em; font-weight: bold; padding: 2px;"> <br /> &lt;a href="http://pinterest.com/pin/{%}" class="PinImage ImgLink"&gt;{*}<br /> &lt;p class="description"&gt;{%}&lt;/p&gt;{*}<br /> &lt;a href="{%}" title="{%}" class="ImgLink"&gt;{*}<br /> <br /> <br /></div> <br /> Nous allons utiliser ces zones pour définir les propriétés d'un article du Flux&nbsp;:&nbsp; <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="Feed43 - Propiétés d'un article du Flux" src="http://1.bp.blogspot.com/-yo3_cjdVFRk/T4MTuojVleI/AAAAAAAAFv4/1KlE939r-mo/s800/feed43-properties.jpg" style="border: solid 1px #db6f09; height: 321px; width: 588px;" title="Feed43 - Propiétés d'un article du Flux" /></div> <br /> <br /> Les zones retenues permettent de définir&nbsp;:&nbsp; <br /> <br /> <div style="background-color: infobackground; family: Arial, sans-serif; font-size: 0.9em; font-weight: bold; padding: 2px;"> <br /> Le titre de l'article : {%2}<br /> Le lien vers le Pin : {%1}<br /> Le lien vers l'auteur du Pin : {%3}<br /> Le nom de l'auteur du Pin : {%4}<br /> <br /> <br /></div> <br /> Ces données une fois saisies, nous obtenons le Flux RSS des Pins réalisés depuis un site donné&nbsp;:&nbsp; <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="Feed43 - Flux RSS" src="http://1.bp.blogspot.com/-Y3I_VowD-Kk/T4MW4IMzKXI/AAAAAAAAFwE/R-7Ugvm-4w0/s800/feed43-feed.jpg" style="border: solid 1px #db6f09; height: 180px; width: 430px;" title="Feed43 - Flux RSS" /></div> <br /> <br /> <strong>Utiliser le Flux RSS</strong> <br /> <br /> Une fois le Flux créé sur <strong>feed43</strong>, il est recommandé de renommer le flux. Par exemple, le Flux RSS des <em><strong>Pins</strong></em> réalisés sur mon site <a href="http://www.liens-du-vin.ch/" target="_blank" title="Les Liens du Vin">Les Liens du Vin</a>&nbsp;:&nbsp; <a href="http://feed43.com/liens-du-vin.xml" target="_blank" title="Pins de Pinterest sur les Liens du Vin">http://feed43.com/liens-du-vin.xml</a>. <br /> <br /> Le Flux peut être utilisé avec <a href="http://www.blogger.com/www.google.fr/reader/" target="_blank" title="Google reader">Google Reader</a> ou affiché sur un Blog avec le <strong>Gadget Flux</strong>&nbsp;:&nbsp; <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="Gadget Blogger - Flux" src="http://4.bp.blogspot.com/-QNWs9g-iqAc/T4Mq66cn3rI/AAAAAAAAFwQ/s9V5VMbIuuk/s800/pinterest-flux.jpg" style="border: solid 1px #db6f09; height: 97px; width: 580px;" title="Gadget Blogger - Flux" /></div> <br /> <br /> J'ai utilisé le <a href="http://feed43.com/liens-du-vin.xml" target="_blank" title="Flux Pinterest issus des Liens du Vin">Flux créé ci-dessus</a>, avec un <a href="http://www.liens-du-vin.ch/gadget-lecteur-flux.html" target="_blank" title="Gadget Google - lecteur de Flux">Gadget Google comme lecteur de Flux</a>&nbsp;:&nbsp; <br /> <br /> <br /> <center><iframe allowtransparency="true" frameborder="0" height="760" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-feed.xml&amp;up_Flux=http://feed43.com/liens-du-vin.xml&amp;up_Nombre=18&amp;up_Link=http://www.pinterest.com/source/liens-du-vin.ch&amp;up_Couleur_Fond=%23f6f6f6&amp;up_Couleur_Police=%23000035&amp;up_Couleur_Titre=%23f2e9ca&amp;up_Couleur_Bord=%23db6f09&amp;up_ContainerCol=%23f6f6f6" width="480">&amp;amp;lt;p&amp;amp;gt;Afficher les titres d'un flux sur son site&amp;amp;lt;/p&amp;amp;gt;</iframe></center> <br /> <br /> <strong>En savoir plus</strong> <br /> <br /> <a href="http://mashable.com/2012/03/14/pinterest-track-content/" target="_blank" title="Mashable : track content on Pinterest">L'article original, sur Mashable</a> <br /> <br /> <a href="http://www.liens-du-vin.ch/video-flux-rss.htm" target="_blank" title="Video : L'intérêt et le fonctionnement des Flux RSS">Video : L'intérêt et le fonctionnement des Flux RSS</a> <br /> <br /> <a href="http://bloggercode-blogconnexion.blogspot.com/2012/02/le-bouton-pin-it-de-pinterest.html" target="_blank" title="Le bouton Pin-It de Pinterest">Le bouton Pin-It de Pinterest, sur le Blog de Soraya</a> <br /> <br /> <a href="http://pinterest.com/tomatejoyeuse/tout-pinterest-en-francais/" target="_blank" title="Tout Pinterest en français. Les Pins de Tomate Joyeuse">Tout Pinterest en français. Les Pins de Tomate Joyeuse</a> <br /> <br /> <a href="http://www.liens-du-vin.ch/gadget-lecteur-flux.html" target="_blank" title="Un Gadget Google pour insérer un Flux RSS sur son Site ou son Blog">Un Gadget Google pour insérer un Flux RSS sur son Site ou son Blog</a> <br /> <br /> <a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Un diaporama avec les derniers posts de Pinterest">Un diaporama avec les derniers posts de Pinterest</a><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-7779298312974277480?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/x9fFZgtZNr4Irwoqj0s0ayljX0w/0/da"><img src="http://feedads.g.doubleclick.net/~a/x9fFZgtZNr4Irwoqj0s0ayljX0w/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/x9fFZgtZNr4Irwoqj0s0ayljX0w/1/da"><img src="http://feedads.g.doubleclick.net/~a/x9fFZgtZNr4Irwoqj0s0ayljX0w/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/XGy-A6gIUsM" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com3http://viti-vino.blogspot.com/2012/04/suivre-pins-site-pinterest.htmltag:blogger.com,1999:blog-30801821.post-82020862405154594792012-02-26T21:23:00.001+01:002012-04-09T22:01:14.956+02:002012-04-09T22:01:14.956+02:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour afficher un Diaporama avec les derniers posts de Pinterest</h1><img itemprop="image" src="http://3.bp.blogspot.com/-_tZivwiD7FA/T0qVk9KrStI/AAAAAAAAFrM/o7Vg0RqzFoA/s400/pinterest-slideshow-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Deux Gadgets Blogger pour afficher un Diaporama de Pinterest (derniers posts) sur son Blog. Possibilité de n'afficher que les images d'un tableau (Board).</p>Deux <strong>Gadgets Blogger</strong> pour afficher un <strong>Diaporama de Pinterest</strong> sur son Blog. Avec ces deux gadgets nous pouvons restreindre l'affichage à <a href="http://pinterest.com/prac53/geek/" target="_blank" title="Gadget Blogger Diaporama">un seul tableau (board) de Pinterest</a>. Ces gadgets utilisent le <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> fourni par <a href="http://pinterest.com" target="_blank" title="Pinterest">Pinterest</a>. Cet hébergeur fournit un flux pour les dernières <strong>Images</strong> d'un utilisateur ou les dernières images d'un seul <strong>tableau (board)</strong>.<br /> <br /> <strong>Les deux variantes du Gadget</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://3.bp.blogspot.com/-_tZivwiD7FA/T0qVk9KrStI/AAAAAAAAFrM/o7Vg0RqzFoA/s400/pinterest-slideshow-screen.png" alt="Gadget Blogger - Diaporama Pinterest" title="Gadget Blogger - Diaporama Pinterest" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple-b.xml" target="_blank" title="pinterest-slideshow-simple-b.xml">pinterest-slideshow-simple-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Avec un titre et les légendes des photos</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://3.bp.blogspot.com/-_tZivwiD7FA/T0qVk9KrStI/AAAAAAAAFrM/o7Vg0RqzFoA/s400/pinterest-slideshow-screen.png" alt="Gadget Blogger - Diaporama Pinterest" title="Gadget Blogger - Diaporama Pinterest" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/pinterest-slideshow-b.xml" target="_blank" title="pinterest-slideshow-b.xml">pinterest-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;">Sans titre<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple-b.xml</strong><br /> <br /> Avec titre et légendes<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/pinterest-slideshow-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">USER</span> : le nom de l'utilisateur <strong>Pinterest</strong><br /> <br /> <span style="font-weight: bold;">BOARD</span> : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,<br>le diaporama affiche les dernières images de l'utilisateur<br/><br/> Pour obtenir le nom du tableau (board), clic sur <b><i>Edit</i></b> du tableau. Copier l'URL&nbsp;:&nbsp;<br/><br/> http://pinterest.com/<span style="color: #008000; font-weight: bold;">prac53</span>/<span style="color: #cc0000; font-weight: bold;">favorite-places-spaces</span>/settings/<br/><br/> <span style="color: #008000; font-weight: bold;">prac53</span> est le nom de l'utilisateur<br/> <span style="color: #cc0000; font-weight: bold;">favorite-places-spaces</span> est le nom du tableau <b><i>Favorite Places & Spaces</i></b> <br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. <br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> </div><br /> <br /> <ul><li>Avec titre et légendes</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">USER</span> : le nom de l'utilisateur <strong>Pinterest</strong><br /> <br /> <span style="font-weight: bold;">BOARD</span> : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,<br>le diaporama affiche les dernières images de l'utilisateur<br/><br/> Pour obtenir le nom du tableau (board), clic sur <b><i>Edit</i></b> du tableau. Copier l'URL&nbsp;:&nbsp;<br/><br/> http://pinterest.com/<span style="color: #008000; font-weight: bold;">prac53</span>/<span style="color: #cc0000; font-weight: bold;">favorite-places-spaces</span>/settings/<br/><br/> <span style="color: #008000; font-weight: bold;">prac53</span> est le nom de l'utilisateur<br/> <span style="color: #cc0000; font-weight: bold;">favorite-places-spaces</span> est le nom du tableau <b><i>Favorite Places & Spaces</i></b> <br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">LNK</span> : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.<br /> <span style="font-weight: bold;">TIT</span> : le titre du diaporama. Par défaut le titre du Flux Media RSS de Pinterest.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul> <li>Affiche les images en format *.jpg, *.gif et *.png</li> <li>Fond transparent ou couleurs à choix</li> <li>Temps d'affichage modifiable</li> <li>Ordre aléatoire des images en option</li> <li>Suppression possible de la barre de navigation</li> <li>Clic sur image désactivé par défaut</li> <li>Affichage des légendes de chaque image (version avec titre)</li> </ul> <br /> <br /> <strong>Des exemples</strong><br /> <br /> J'ai utilisé, non pas un <strong>Gadget Blogger</strong> pour ces exemples, mais la version <a href="http://www.liens-du-vin.ch/pinterest-slideshow-script.htm" target="_blank" title="Gadget Google - Diaporama Pinterest">Gadget Google</a> afin d'afficher le Diaporama dans le html de ce message.<br /> <br /> <ul><li>Les dernières images de mon <a href="http://pinterest.com/prac53" target="_blank" title="Pinterest - prac53">compte Pinterest</a>. Diaporama avec titre et légendes des images.</li></ul> <br/> <center><iframe style="width: 360px; height: 280px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow.xml&amp;up_USER=prac53&amp;up_PWH=330&amp;up_PHT=180&amp;up_LNK=http://pinterest.com/prac53&amp;up_TIT=Philippe%20Chappuis&amp;up_DTime=&amp;up_TTime=&amp;up_RND=Yes&amp;up_CLP=Yes&amp;up_TCOL=%239e5205&amp;up_LCOL=%239e5205&amp;up_SCOL=%23f6f6f6&amp;up_BCOL=%23db6f09&amp;up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Pinterest avec titre - http://www.liens-du-vin.ch/pinterest-slideshow-script.htm</iframe></center> <br/> <div style="text-align: 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="Un diaporama de Pinterest - pinterest-slideshow.xml"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div> <br/> <br/> <ul> <li>Les images du tableau <a href="http://pinterest.com/prac53/geek/" target="_blank" class="clk" title="Pinterest - Geek">Geek de mon compte Pinterest</a>. Diaporama sans titre et barre de navigation supprimée.</li> </ul> <br/> <center><iframe style="width: 360px; height: 250px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple.xml&amp;up_USER=prac53&amp;up_BOARD=geek&amp;up_PWH=330&amp;up_PHT=180&amp;up_LNK=http://pinterest.com/prac53&amp;up_DTime=&amp;up_TTime=&amp;up_RND=Yes&amp;up_CLP=Yes&amp;up_NAB=No&amp;up_TCOL=%239e5205&amp;up_LCOL=%239e5205&amp;up_SCOL=%23f6f6f6&amp;up_BCOL=%23db6f09&amp;up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Pinterest avec titre - http://www.liens-du-vin.ch/pinterest-slideshow-script.htm</iframe></center> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Un diaporama de Pinterest - pinterest-slideshow.xml"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div> <br/> <br/> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/pinterest-slideshow-script.htm" target="_blank" title="Gadget Google - Diaporama Pinterest">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://bloggercode-blogconnexion.blogspot.com/2012/02/le-bouton-pin-it-de-pinterest.html" target="_blank" title="Insérer le bouton Pin-It de Pinterest">Insérer le bouton Pin-It de Pinterest</a>. Les codes et toutes les explications sur <a href="http://bloggercode-blogconnexion.blogspot.com" target="_blank" title="Blog Connexion">Blog Connexion</a><br /> <br /> <a href="http://www.liens-du-vin.ch/pinterest-slideshow-script.htm" target="_blank" title="Gadget Google - Diaporama Pinterest">Diaporama Pinterest avec un Gadget Google</a><br /> <br /> <a href="https://sites.google.com/site/annuairevin/pinterest-slideshow" target="_blank" title="Afficher un Diaporama de Pinterest sur Google Sites">Afficher un Diaporama de Pinterest sur Google Sites</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 Blog ou de son Site sur Pinterest">Suivre les Pins de son Blog ou de son Site sur Pinterest</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger - Diaporama des derniers messages">Diaporama des derniers messages avec un gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.html" target="_blank" title="Gadget Blogger - Diaporama Picasa">Diaporama Picasa avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.html" target="_blank" title="Gadget Blogger - Diaporama Flickr">Diaporama Flickr avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-photobucket-gadget-blogger.html" target="_blank" title="Gadget Blogger - Diaporama Photobucket">Diaporama Photobucket avec un Gadget Blogger</a><br /> <br /> <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Créer un Diaporama à partir d'un Flux Média RSS</a><br /> <br /> <a href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank" title="Afficher des diaporamas sur Google Sites">Afficher des Diaporamas sur Google Sites</a><br /> <br /> <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <br /><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-8202086240515459479?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/V5y-Sr9tCARqQxrnr7YfjP2MKL0/0/da"><img src="http://feedads.g.doubleclick.net/~a/V5y-Sr9tCARqQxrnr7YfjP2MKL0/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/V5y-Sr9tCARqQxrnr7YfjP2MKL0/1/da"><img src="http://feedads.g.doubleclick.net/~a/V5y-Sr9tCARqQxrnr7YfjP2MKL0/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/xsLNYlN3oyg" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.htmltag:blogger.com,1999:blog-30801821.post-65059713782729687542011-12-12T22:01:00.001+01:002011-12-20T21:24:06.603+01:002011-12-20T21:24:06.603+01:00<b>Webdoc, une autre façon de publier et partager du contenu sur le Web</b> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.webdoc.com" style="margin-left:1em; margin-right:1em" title="Webdoc" target="_blank"><img border="0" height="128" width="400" src="http://4.bp.blogspot.com/-ya8Es4kKd-E/TuZsVdVaRuI/AAAAAAAAFk4/bxleY1M9W6Y/s400/webdoc-logo.png" title="Webdoc" alt="Webdoc" /></a></div> Webdoc permet de créer en quelques clics du contenu multimédias et de le partager sur les principaux réseaux sociaux (Facebook, Twitter et Google+). <br/><br/> Disposant d'un outil d'édition simple d'emploi, les vidéos, les sons et les diaporamas sont créés par un glisser-déplacer. Des <i><strong>Apps</strong></i> permettent d'ajouter un diaporama de <strong>Flickr</strong> ou de <strong>Picasa Albums Web</strong>. Des <i>goodies</i> facilitent la mise en forme d'une présentation de Slideshare ou d'une vidéo de YouTube. Les photos peuvent être présentées dans un album ou dans un diaporama. <br/><br/> Un <a href="http://www.webdoc.com/documents/C4FD782C-46A0-0001-CD85-1180CEF01631" target="_blank" title="Webdoc - prac53">Webdoc</a> avec un diaporama et une vidéo&nbsp;:&nbsp; <br/><br/> <center><div style="border: solid #de7109 1px; width: 510px; padding: 5px;"><iframe title="webdoc" width="500" height="810" src="http://www.webdoc.com/embed/C4FD782C-46A0-0001-CD85- 1180CEF01631" frameborder="0" scrolling="no">Webdoc - prac53 - A la découverte des plus beaux Clos Domaines et Châteaux viticoles de Suisse</iframe></div></center> <br/><br/> L'insertion d'un Webdoc sur un Site ou un Blog se fait avec le <i><b>code embarqué</b></i>, soit un tag <i>iframe</i>. <div class="separator" style="clear: both; text-align: center;"> <br/> <img border="0" height="194" width="400" src="http://3.bp.blogspot.com/-NX6lPrYpEk0/TvDsvEAko_I/AAAAAAAAFlM/H5nb-xirn60/s400/webdoc-code-embarque.jpg" title="Webdoc - code embarqué" alt="Webdoc - code embarqué" /><br/><br/></div> <div style="background: infobackground; font: Arial; padding: 4px;"> &lt;iframe title="webdoc" width="500" height="810"<br/> src="http://www.webdoc.com/embed/<span style="color: #cc0000;">C4FD782C-46A0-0001-CD85-1180CEF01631</span>" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt; <br/> </div> <br/><br/> <b>En savoir plus</b> <br/><br /> <a href="http://www.webdoc.com/resources" target="_blank" title="Webdoc - presse">Le site de Webdoc</a> <br/> <a href="http://sites.google.com/site/annuairevin/webdoc-to-share-content" target="_blank" title="Insérer un Webdoc sur Google Sites">Insérer un Webdoc sur Google Sites</a> <br/><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-6505971378272968754?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/0mmEyBTWxmFbGeD9BYc4Vu5cwdo/0/da"><img src="http://feedads.g.doubleclick.net/~a/0mmEyBTWxmFbGeD9BYc4Vu5cwdo/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/0mmEyBTWxmFbGeD9BYc4Vu5cwdo/1/da"><img src="http://feedads.g.doubleclick.net/~a/0mmEyBTWxmFbGeD9BYc4Vu5cwdo/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/RinBHCNiM0s" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/12/webdoc-partagez-passions.htmltag:blogger.com,1999:blog-30801821.post-88383809385730220382011-08-24T23:48:00.006+02:002011-08-25T00:13:19.900+02:002011-08-25T00:13:19.900+02:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour insérer une image sonore</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/image-sonore.png" style="display: none;" /><p itemprop="description" style="display: none;">Une utilisation du lecteur Flash Dewplayer pour jouer un son lors du survol d'une image avec la souris</p>Le <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> insère une image qui <strong>joue un fichier *.mp3 au survol</strong> par la souris. Le Gadget utilise le <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="lecteur Flash Dewplayer">lecteur Flash Dewplayer</a> qui est intégré dans le Gadget. <br /> Le fichier *.mp3 à jouer peut être hébergé sur une page classeur de <a href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Google Sites">Google Sites</a>.<br /> <br /> <strong>Le Gadget</strong><br /> <br /> <ul><li>Insérer une image sonore</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-0PIQxGhahNA/TcrxneD330I/AAAAAAAAEPI/ai-zosEzMaQ/s1600/image-sonore.png" alt="Gadget Blogger - Image sonore" title="Gadget Blogger - Image sonore" id="BLOGGER_PHOTO_ID_5605558346602504002" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/image-sonore-b.xml" target="_blank" title="image-sonore-b.xml">image-sonore-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/image-sonore-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter&nbsp;:&nbsp;<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;">Image sonore<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/image-sonore-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Image sonore</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">URL</span> : l'URL de l'image à afficher<br /> <span style="font-weight: bold;">MP3</span> : l'URL du fichier son (*.mp3) à jouer au survol par la souris<br /> <br /> <span style="font-weight: bold;">PWH</span> : largeur de l'image en pixels<br /> <span style="font-weight: bold;">PHT</span> : hauteur de l'image en pixels<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i>transparent</i>. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques du gadget</strong><br /> <br /> <ul><li>L'image peut être hébergée sur <a href="http://picasaweb.google.com/" target="_blank" title="Picasa Albums Web">Picasa Albums Web</a> et le fichier son sur <strong>Google Sites</strong></li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> J'ai utilisé, non pas un <strong>Gadget Blogger</strong> pour cet exemple, mais la version <a href="http://www.liens-du-vin.ch/image-sonore-script.htm" target="_blank" title="Gadget Google - insérer une image sonore">Gadget Google</a> afin d'afficher l'image sonore dans le html de ce message.<br /> <br /> <ul><li>Le <a href="http://www.liens-du-vin.ch/_winemap/maps-vufflens.htm" target="_blank" title="Château de Vufflens en hiver">Château de Vufflens en hiver</a>. Extrait de <strong>Jean-Sébastien Bach, Magnificat BWV 243 Gloria Patri</strong>.<br /> <br /> <i><b>Survolez l'image avec la souris !</b></i></li> </ul><br /> <br /> <center><iframe style="width: 240px; height: 210px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/image-sonore.xml&up_URL=http://www.liens-du-vin.ch/_pic04/chateau-vufflens-hiver.jpg&up_MP3=http://sites.google.com/site/annuairevin/files/mozart_req_dies_irae.mp3&up_TIT=Château%20de%20Vufflens%20en%20hiver&up_PWH=220&up_PHT=189&up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Une image sonore - http://www.liens-du-vin.ch/image-sonore-script.htm - Château de Vufflens - Bach Gloria Patri</iframe><br /> <br /> <div><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/image-sonore-b.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Image sonore"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104" /></a></div></center><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/image-sonore-script.htm" target="_blank" title="Gadget Google - Image sonore">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/image-sonore-script.htm" target="_blank" title="Gadget Google - Image sonore">Insérer une image sonore avec un Gadget Google</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/04/lecteurs-simples-jouer-mp3-blog.html" target="_blank" title="Des lecteurs simples pour jouer un fichier *.mp3 sur son Blog">Des lecteurs simples pour jouer un fichier *.mp3 sur son Blog</a><br /> <br /> <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="Le site de Dewplayer">Le site de Dewplayer</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2009/06/sonoriser-ses-images-avec-dewplayer.html" target="_blank" title="Sonoriser ses images avec Dewplayer">Sonoriser ses images avec Dewplayer</a><br /> <br /> <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <br /> <strong>Copyright photo</strong><br /> <br /> &#169; photo : <a href="http://www.diapo.ch" title="www.diapo.ch" class="clk">www.diapo.ch</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><br /> <br /> <br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-8838380938573022038?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/k8ylZJ0IzLPEYvt8fjZwWH44Deo/0/da"><img src="http://feedads.g.doubleclick.net/~a/k8ylZJ0IzLPEYvt8fjZwWH44Deo/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/k8ylZJ0IzLPEYvt8fjZwWH44Deo/1/da"><img src="http://feedads.g.doubleclick.net/~a/k8ylZJ0IzLPEYvt8fjZwWH44Deo/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/YEzME2wtQGk" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com3http://viti-vino.blogspot.com/2011/05/gadget-image-sonore.htmltag:blogger.com,1999:blog-30801821.post-64138777034376833212011-07-28T20:03:00.033+02:002011-08-24T23:39:01.687+02:002011-08-24T23:39:01.687+02:00<h1 itemprop="name" style="display: none;">Des Gadgets Blogger pour Google+</h1><img itemprop="image" src="http://2.bp.blogspot.com/-5rzz3MaIPn8/TjGodxWzteI/AAAAAAAAE-c/PbUawSCR2E4/s400/google-plus.jpg" style="display: none;" /><p itemprop="description" style="display: none;" >Des Gadgets Google pour afficher le flux d'un utilisateur de Google+, un moteur de recherche sur Google+ et un Badge avec les statistiques.</p><a href="https://plus.google.com/welcome?hl=fr" target="_blank" title="Google+">Google+</a> dans sa version initiale ne comporte pas d'<a href="http://www.webrankinfo.com/dossiers/api-google/liste-api-google" target="_blank" title="API Google">API</a>. Grace aux <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Gadgets Blogger">Gadget Blogger</a> nous pouvons afficher le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux RSS (Atom)">Flux RSS (Atom) d'un utilisateur</a> via <a href="http://plusfeed.appspot.com/" target="_blank" title="Want a feed for your Google+ posts?">PlusFeed</a>, intégrer un <a href="http://www.google.com/cse/home?cx=015247778172016367057:c2q3fsqy4hu" target="_blank" title="Moteur de Recherche">Moteur de Recherche</a> et afficher un badge avec les <a href="http://socialstatistics.com/?include=statistics&id=25402" target="_blank" title="Google+ Statistics">statistiques Google+</a>.<br /> <br /> <a href="https://plus.google.com/welcome?hl=fr" title="Google+ Partagez le Web comme vous le vivez" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 192px;" src="http://2.bp.blogspot.com/-5rzz3MaIPn8/TjGodxWzteI/AAAAAAAAE-c/PbUawSCR2E4/s400/google-plus.jpg" border="0" title="Google+ Partagez le Web comme vous le vivez" alt="Google+ Partagez le Web comme vous le vivez" id="BLOGGER_PHOTO_ID_5634469838235874786" /></a><br /> <br /> <br /> <strong>Les Gadgets</strong><br /> <br /> <ul><li>Moteur de recherche sur Google+</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic04/search-google-plus-thumb.png" alt="Gadget Blogger - Moteur de Recherche sur Google+" title="Gadget Blogger - Moteur de Recherche sur Google+" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-plus-search-b.xml" target="_blank" title="google-plus-search-b.xml">google-plus-search-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-plus-search-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Un Badge avec les Statistiques Google+</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic06/google-plus-statistics.png" alt="Gadget Blogger - Statistiques Google+" title="Gadget Blogger - Statistiques Google+" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-plus-statistics-b.xml" target="_blank" title="google-plus-statistics-b.xml">google-plus-statistics-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-plus-statistics-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Afficher le Flux RSS (Atom) d'un utilisateur de Google+</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic061/feed-screen.png" alt="Gadget Blogger - Le Flux RSS d'un utilisateur de Google+" title="Gadget Blogger - Le Flux RSS d'un utilisateur de Google+" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-plus-feed-b.xml" target="_blank" title="google-plus-feed-b.xml">google-plus-feed-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-plus-feed-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Afficher le Flux RSS (Atom) d'un utilisateur de Google+, avec vignettes</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic061/feed-screen.png" alt="Gadget Blogger - Le Flux RSS d'un utilisateur de Google+, avec vignettes" title="Gadget Blogger - Le Flux RSS d'un utilisateur de Google+, avec vignettes" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-plus-feed-thumb-b.xml" target="_blank" title="google-plus-feed-thumb-b.xml">google-plus-feed-thumb-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-plus-feed-thumb-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter&nbsp;:&nbsp;<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <br /> <i>Moteur de recherche sur Google+</i><br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-plus-search-b.xml</strong><br /> <br /> <i>Un Badge avec les Statistiques Google+</i><br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-plus-statistics-b.xml</strong><br /> <br /> <i>Afficher le Flux RSS (Atom) d'un utilisateur de Google+</i><br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-plus-feed-b.xml</strong><br /> <br /> <i>Afficher le Flux RSS (Atom) d'un utilisateur de Google+, avec vignettes</i><br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-plus-feed-thumb-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Moteur de recherche sur Google+</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>PUSER : </strong>lien sur le texte <span style="color:#0039b6;">G</span><span style="color:#c41200;">o</span><span style="color:#f3c518;">o</span><span style="color:#0039b6;">g</span><span style="color:#30a72f;">l</span><span style="color:#c41200;">e</span><span style="color:#0039b6;">+</span><br /> <br /> Par exemple le profil Google+ d'un utilisateur&nbsp;:&nbsp;<br /> <br /> <strong>https://plus.google.com/115854656993758258488/posts?hl=fr</strong><br /> <br /> <strong>BKCOL </strong>: #rrggbb couleur du fond du gadget<br /> <strong>BCOL </strong>: #rrggbb couleur de la bordure<br /> <strong>CCOL </strong>: #rrggbb couleur du conteneur, ou <i>transparent</i><br /> <br /> </div><br /> <br /> <br /> <ul><li>Un Badge avec les Statistiques Google+</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>GID : </strong>l'identifiant Google+ de l'utilisateur<br /> <br /> L'URL du profil d'un utilisateur se présente comme suit&nbsp;:&nbsp;<br /> <br /> <strong>https://plus.google.com/<span style="color: #ff0000;">115854656993758258488</span>/posts?hl=fr</strong><br /> <br /> <strong><span style="color: #ff0000;">115854656993758258488</span></strong> est l'dentifiant de l'utilisateur<br /> <br /> <strong>CCOL </strong>: #rrggbb couleur du conteneur, ou <i>transparent</i><br /> <br /> </div><br /> <br /> <br /> <ul><li>Afficher le Flux RSS (Atom) d'un utilisateur de Google+, avec ou sans vignettes</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>GID : </strong>l'identifiant Google+ de l'utilisateur<br /> <br /> L'URL du profil d'un utilisateur se présente comme suit&nbsp;:&nbsp;<br /> <br /> <strong>https://plus.google.com/<span style="color: #ff0000;">115854656993758258488</span>/posts?hl=fr</strong><br /> <br /> <strong><span style="color: #ff0000;">115854656993758258488</span></strong> est l'dentifiant de l'utilisateur<br /> <br /> <strong>NBR </strong>: nombre de messages à afficher . De 1 à 100, par défaut 12<br /> <strong>LNK </strong>: URL du lien sur le titre du Flux<br /> <br /> <strong>SCOL </strong>: #rrggbb couleur du fond du lecteur de Flux<br /> <strong>FCOL </strong>: #rrggbb couleur de la police<br /> <strong>HCOL </strong>: #rrggbb couleur du lien au survol de la souris<br /> <strong>LCOL </strong>: #rrggbb couleur du fond du texte<br /> <strong>BCOL </strong>: #rrggbb couleur de la bordure<br /> <strong>CCOL </strong>: #rrggbb couleur du conteneur, ou <i>transparent</i><br /> <br /> </div><br /> <br /> <br /> <strong>Des exemples</strong><br /> <br /> Les Gadgets sur un modèle <i>Picture Window</i><br /> <br /> <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 239px; height: 400px;" src="http://3.bp.blogspot.com/-hLUx2iC8eTE/TjG2fvsVZaI/AAAAAAAAE-k/lCsJ7q6ASNY/s400/google-plus-sample.jpg" border="0" alt="Gadgets Blogger pour Google+" title="Gadgets Blogger pour Google+" id="BLOGGER_PHOTO_ID_5634485265311819170" /><br /> <br /> A titre d'exemple, j'ai utilisé 3 <a href="http://www.liens-du-vin.ch/gadgets-google-plus.htm" target="_blank" title="Gadgets Google pour Google+">Gadgets Google</a>, pour placer les <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Gadgets dans le corps du message">gadgets dans le corps du message</a>.<br /> <br /> Le Moteur de recherche<br /> <br /> <center><iframe style="width: 334px; height: 84px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/search-google-plus.xml&up_PUSER=https://plus.google.com/115854656993758258488/posts?hl=fr&up_BKCOL=%23f2e9ca&up_BCOL=%23de7008&up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Un Moteur de Recherche pour Google+</iframe></center><br /> <br /> Mes Statistiques de Google+<br /> <br /> <center><iframe style="width: 280px; height: 110px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-plus-statistics.xml&up_GID=115854656993758258488&up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - des gadgets pour Google+ (Google Plus) - http://www.liens-du-vin.ch/gadget-google-plus.htm</iframe></center><br /> <br /> <a href="https://plus.google.com/115854656993758258488/posts?hl=fr" target="_blank" title="Philippe - Flux sur Google+">Mon Flux sur Google+</a><br /> <br /> <center><iframe style="width: 320px; height: 620px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-plus-feed-thumb.xml&up_GID=115854656993758258488&up_NBR=10&up_LNK=https://plus.google.com/115854656993758258488/buzz?hl=fr&up_SCOL=%23f2e9ca&up_FCOL=%23660000&up_HCOL=%23cc0000&up_LCOL=%23f5e39e&up_BCOL=%23de7008&up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Le Flux d'un utilisateur de Google+ avec vignettes</iframe></center><br /> <br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/google-plus-feed-thumb.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Le Flux RSS (Atom) d'un utilisateur Google+ - avec vignettes"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> Le Flux de <a href="https://plus.google.com/109412257237874861202/posts?hl=en" target="_blank" title="Max Cutts sur Google+">Max Cutts</a> sur Google+<br /> <br /> <center><iframe style="width: 320px; height: 620px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-plus-feed-thumb.xml&up_GID=109412257237874861202&up_NBR=10&up_LNK=https://plus.google.com/109412257237874861202/posts?hl=en&up_SCOL=%23f2e9ca&up_FCOL=%23660000&up_HCOL=%23cc0000&up_LCOL=%23f5e39e&up_BCOL=%23de7008&up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Le Flux d'un utilisateur de Google+ avec vignettes</iframe></center><br /> <br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/google-plus-feed-thumb.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Le Flux RSS (Atom) d'un utilisateur Google+ - avec vignettes"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/gadgets-google-plus.htm" target="_blank" title="Les Flux RSS">Des Gadgets Google pour Google+</a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Les Flux RSS">Les Flux RSS</a><br /> <br /> <a href="http://socialstatistics.com" target="_blank" title="Les statistiques Google+">Les statistiques Google+</a><br /> <br /> <a href="http://plusfeed.appspot.com/" target="_blank" title="PlusFeed la redirection du Flux d'un utilisateur de Google+">PlusFeed la redirection du Flux d'un utilisateur de Google+</a><br /> <br /> <a href="http://sites.google.com/site/annuairevin/how-to-incorporate-a-blog/feed-gadget" target="_blank" title="Un Gadget pour insérer un lecteur de Flux">Un Gadget pour insérer un lecteur de Flux</a><br /> <br /> Pour <a href="https://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Google Sites">Google Sites</a>, le <a href="http://sites.google.com/site/annuairevin/google-plus-user-feed" target="_blank" title="Un Gadget pour insérer un lecteur de Flux">Flux d'un utilisateur de Google+</a>, le <a href="http://sites.google.com/site/annuairevin/search-google-plus" target="_blank" title="Moteur de Recherche">moteur de recherche</a> et les <a href="http://sites.google.com/site/annuairevin/google-plus-statistics" target="_blank" title="Statistiques Google+">statistiques Google+</a><br /> <br /> <a href="http://www.liens-du-vin.ch/video-social-networking.htm" target="_blank" title="Une video : Les Réseaux Sociaux">Une video : Les Réseaux Sociaux</a><br /> <br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-6413877703437683321?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/M9vzdGhVwbi4Qm7BLnngx97bhew/0/da"><img src="http://feedads.g.doubleclick.net/~a/M9vzdGhVwbi4Qm7BLnngx97bhew/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/M9vzdGhVwbi4Qm7BLnngx97bhew/1/da"><img src="http://feedads.g.doubleclick.net/~a/M9vzdGhVwbi4Qm7BLnngx97bhew/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/-RKMHX63QnI" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com1http://viti-vino.blogspot.com/2011/07/gadgets-blogger-google-plus.htmltag:blogger.com,1999:blog-30801821.post-3169315143778178532011-05-09T23:36:00.010+02:002011-10-05T21:13:51.843+02:002011-10-05T21:13:51.843+02:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour insérer une video *.flv avec Dewtube</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/dewtube-player.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Un Gadget Blogger pour insérer le lecteur Dewplayer. Il permet de visionner une vidéo Flash (*.flv)</p>Un <strong>Gadget Blogger</strong> pour afficher une <strong>Vidéo en Flash (*.flv ou *.f4v)</strong> sur son Blog. Le gadget utilise le <a href="http://www.alsacreations.fr/dewtube.html" target="_blank" title="Dewtube">lecteur Flash Dewtube</a> d'<a href="http://www.alsacreations.fr/" target="_blank" title="alsacréations">alsacréations</a>. <br /> Il suffit d'indiquer le fichier *.flv (ou *.f4v) à afficher, le <strong>lecteur Dewtube</strong> lui-même est intégré dans le <a href="http://code.google.com/intl/fr-FR/apis/gadgets/docs/ui.html#Flash" target="_blank" title="Gadget - lecteur Flash">lecteur Flash du Gadget</a>.<br /> Le fichier Flash peut être hébergé sur une <a href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Google Sites">page classeur de Google Sites</a>.<br /> <br /> <strong>Le Gadget</strong><br /> <br /> <ul><li>Lecteur Dewtube</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-XBmq7OqIZcQ/Tchg149Lk1I/AAAAAAAAENY/X15YDhySYa4/s400/dewtube-player-thumb.png" alt="Gadget Blogger - Lecteur Dewtube" title="Gadget Blogger - Lecteur Dewtube" id="BLOGGER_PHOTO_ID_5604836215200912210" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/dewtube-b.xml" target="_blank" title="dewtube-b.xml">dewtube-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/dewtube-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px;font-family:Arial,sans-serif;font-size:0.9em;">Lecteur Dewtube<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/dewtube-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <ul><li>Lecteur Dewtube</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">FLV</span> : URL du fichier Flash (*.flv ou *.f4v). <br /> <br /> C'est l'adresse du fichier video. Hébergement possible sur Google Sites.<br /> <br /> Pour afficher un <strong>aperçu</strong> de la video, il faut placer une image au format *.jpg dans le même répertoire que la video. Cette image doit avoir le même nom et la même taille que la video.<br /> <br /> <span style="font-weight: bold;">FWH</span> : largeur de la video en pixels.<br /> <span style="font-weight: bold;">FHT</span> : hauteur de la video en pixels.<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique, Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur de fond du conteneur. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques du gadget</strong><br /> <br /> <ul><li>Il n'est pas nécessaire d'héberger le fichier Flash du lecteur (dewtube.swf). Celui-ci est intégré dans le Gadget.</li> <li>Aperçu de la video à héberger sous le même nom que la video. Par exemple ma_video.flv et ma_video.jpg</li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> La <a href="http://www.liens-du-vin.ch/video-bad-boy.htm" target="_blank" title="Video Bad Boy">video Bad Boy</a>, affichée sur un Modèle <i>Picture Window</i> :<br /> <br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 251px;" src="http://www.liens-du-vin.ch/_pic06/exemple-flv-badboy.jpg" alt="Video Bad Boy" title="Video Bad Boy" border="0" /></center><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/flv-player-script.htm" target="_blank" title="Gadget Google - Video FLV avec Dewtube">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/flv-player-script.htm" target="_blank" title="Gadget Google - Insérer une video FLV avec Dewtube">Insérer une video FLV avec Dewtube</a><br /> <br /> <a href="http://www.alsacreations.fr/dewtube.html" target="_blank" title="Le lecteur Dewtube">Le lecteur Dewtube</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/05/lecteur-integrable-video-facebook.html" target="_blank" title="Intégrer une video de Facebook sur son Blog">Intégrer une video de Facebook sur son Blog</a><br /> <br /> <a href="http://www.liens-du-vin.ch/youtube-player-script.htm" target="_blank" title="Diffuser une video de YouTube avec un lecteur personnalisé">Diffuser une video de YouTube avec un lecteur personnalisé</a><br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-316931514377817853?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/FwRRXX5nUJzR18pPmOfvG1aSXtQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/FwRRXX5nUJzR18pPmOfvG1aSXtQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/FwRRXX5nUJzR18pPmOfvG1aSXtQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/FwRRXX5nUJzR18pPmOfvG1aSXtQ/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/jsmISchaLcQ" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com2http://viti-vino.blogspot.com/2011/05/gadget-blogger-video-flv.htmltag:blogger.com,1999:blog-30801821.post-56298108866992269062011-05-02T22:29:00.013+02:002011-08-25T00:39:34.412+02:002011-08-25T00:39:34.412+02:00<h1 itemprop="name" style="display: none;">Lecteur intégrable pour afficher une video Facebook</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic06/facebook-video-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Un Gadget Blogger pour insérer une vidéo de Facebook</p><a href="http://www.facebook.com" target="_blank" title="Facebook">Facebook</a> ne fournit pas de lecteur intégrable pour les videos. Le <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> permet d'insérer une <strong>video de Facebook</strong> sur son Blog. Celle-ci doit être publique. <br /> <br /> <strong>Le Gadget</strong><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/flash_container-script.htm" target="_blank" title="Lecteur Flash">Lecteur Flash</a> pour afficher une video de Facebook</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 60px;" src="http://1.bp.blogspot.com/-y5msYrIQz6M/Tb8WdBxfpCI/AAAAAAAAEKc/ztYBjcE7pLE/s400/facebook-video-thumb.png" alt="Lecteur intégrable pour video Facebook" title="Lecteur intégrable pour video Facebook" id="BLOGGER_PHOTO_ID_5602221149420233762" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/facebook-video-player-b.xml" target="_blank" title="facebook-video-player-b.xml">facebook-video-player-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/facebook-video-player-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px;font-family:Arial,sans-serif;font-size:0.9em;">Lecteur Video<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/facebook-video-player.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <ul><li>Lecteur Video</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">ID</span> : identifiant de la video<br /> <br /> Sur Facebook, lancer la video. L'adresse est de cette forme<br /> <br /> <b>http://www.facebook.com/video/video.php?v=<span style="color: #cc0000;">189542341058985</span>&comments&set=t.522564519&type=1</b><br /> <br /> <span style="color: #cc0000;">189542341058985</span> est l'identifiant de la video<br /> <br /> <span style="font-weight: bold;">FWH</span> : largeur de la video en pixels <br /> <span style="font-weight: bold;">FHT</span> : hauteur de la video en pixels <br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <br /> <br /> <strong>Caractéristiques du gadget</strong><br /> <br /> <ul><li>Le Gadget est prévu pour des vidéos hébergées sur Facebook, qui sont publiques.<br /> Il ne convient pas pour des videos privées ou placées sur Facebook depuis YouTube ou Dailymotion</li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog). L'exemple ci-dessous est un <a href="http://spreadsheets.google.com/ccc?key=p-DeWPho9SqmYRKtMvl-DJA&hl=fr" target="_blank" title="Gadget Google">Gadget Google</a> inséré dans le html de ce message.<br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/facebook-video-gadget.htm" target="_blank" title="Lecteur Video">Lecteur Video</a>. Video de <a href="http://www.facebook.com/gila.hassid" target="_blank" title="Gila Hassid">Gila Hassid</a>, chanteuse populaire israélienne</li> </ul><br /> <center><iframe style="width: 435px; height: 360px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/facebook-video-player.xml&up_ID=189542341058985&up_FWH=425&up_FHT=350&up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Video Facebook - http://www.liens-du-vin.ch/facebook-video-gadget.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/facebook-video-player.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Video Facebook"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.facebook.com" target="_blank" title="Facebook">Le site de Facebook</a><br /> <br /> <a href="http://www.liens-du-vin.ch/facebook-video-gadget.htm" target="_blank" class="clk" title="Un Gadget Google - Video Facebook">Un Gadget Google pour afficher une video de Facebook</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/05/gadget-blogger-video-flv.html" target="_blank" class="clk" title="Le lecteur Dewtube pour afficher une video *.flv">Le lecteur Dewtube pour afficher une video *.flv</a><br /> <br /> <a href="http://www.liens-du-vin.ch/flash_container-script.htm" target="_blank" class="clk" title="Lecteur Flash">Afficher des animations en Flash avec un lecteur standard</a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2008/12/videos-de-youtube-en-haute-qualite.html" target="_blank" title="Videos de YouTube en haute qualité">Videos de YouTube en haute qualité</a><br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-5629810886699226906?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/S_bWifNr8tsAj6nIiULVimMUdTM/0/da"><img src="http://feedads.g.doubleclick.net/~a/S_bWifNr8tsAj6nIiULVimMUdTM/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/S_bWifNr8tsAj6nIiULVimMUdTM/1/da"><img src="http://feedads.g.doubleclick.net/~a/S_bWifNr8tsAj6nIiULVimMUdTM/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/GX3W4HxwV0k" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com2http://viti-vino.blogspot.com/2011/05/lecteur-integrable-video-facebook.htmltag:blogger.com,1999:blog-30801821.post-33983282846585350502011-04-30T18:30:00.033+02:002011-08-26T18:46:38.287+02:002011-08-26T18:46:38.287+02:00<h1 itemprop="name" style="display: none;">Des lecteurs simples pour jouer un fichier mp3 sur son Blog</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/dewplayer.png" style="display: none;" /><p itemprop="description" style="display: none;">En utilisant un Gadget Blogger, il devient très simple de jouer un son (*.mp3) sur son Blog.</p>Pour placer un <strong>lecteur mp3</strong> (son) sur son Blog, il faut généralement insérer le <a href="http://aide-blogger-fr.blogspot.com/2010/01/jouer-un-fichier-mp3-sur-son-blog.html" target="_blank" title="Jouer un fichier *.mp3 sur son Blog">code d'un lecteur Flash</a>. Une fois le code inséré, il faut rechercher un hébergeur pour le fichier Flash (*.swf) et pour les fichiers *.mp3 à jouer.<br /> <br /> Les <a href="https://spreadsheets.google.com/ccc?key=0AoyfJJJSNrfucC1EZVdQaG85U3FtWVJLdE12bC1ESkE&amp;hl=fr" target="_blank" title="Gadgets Blogger">Gadgets Blogger</a> présentés ci-dessous intègrent le lecteur Flash. L'hébergement des fichiers *.mp3 est possible sur <a href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Google Sites">Google Sites</a>, dans une page classeur.<br /> <br /> <br /> <strong>Les Gadgets</strong><br /> <br /> <ul><li>Lecteur <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="Lecteur Dewplayer">Dewplayer</a> simple</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 78px;" src="http://3.bp.blogspot.com/-Zh0je7cK0GQ/Tbw9YJPMaxI/AAAAAAAAEHw/8uDX1sRHD7U/s400/dewplayer.png" alt="Dewplayer - lecteur simple" title="Dewplayer - lecteur simple" id="BLOGGER_PHOTO_ID_5601419521547856658" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/dewplayer-b.xml" target="_blank" title="dewplayer-b.xml">dewplayer-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/dewplayer-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Lecteur <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="Lecteur Dewplayer">Dewplayer</a> avec contrôle du volume</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 78px;" src="http://3.bp.blogspot.com/-Zh0je7cK0GQ/Tbw9YJPMaxI/AAAAAAAAEHw/8uDX1sRHD7U/s400/dewplayer.png" alt="Dewplayer - lecteur avec contrôle du volume" title="Dewplayer - lecteur avec contrôle du volume" id="BLOGGER_PHOTO_ID_5601419521547856658" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/dewplayer-vol-b.xml" target="_blank" title="dewplayer-vol-b.xml">dewplayer-vol-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/dewplayer-vol-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Lecteur <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="Lecteur Dewplayer">Dewplayer</a> avec lecture de plusieurs fichiers son</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 78px;" src="http://3.bp.blogspot.com/-Zh0je7cK0GQ/Tbw9YJPMaxI/AAAAAAAAEHw/8uDX1sRHD7U/s400/dewplayer.png" alt="Dewplayer - lecteur avec lecture de plusieurs fichiers son" title="Dewplayer - lecteur avec lecture de plusieurs fichiers son" id="BLOGGER_PHOTO_ID_5601419521547856658" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/dewplayer-multi-b.xml" target="_blank" title="dewplayer-multi-b.xml">dewplayer-multi-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/dewplayer-multi-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Lecteur Google audio de Gmail</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 120px;" src="http://3.bp.blogspot.com/-yaX900VpEvM/TbxUxkvKweI/AAAAAAAAEH4/UvbCXaBgpes/s400/google-audio-gmail.png" alt="Google audio player (Gmail)" title="Google audio player (Gmail)" id="BLOGGER_PHOTO_ID_5601445247193891298" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-audio-b.xml" target="_blank" title="google-audio-b.xml">google-audio-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-audio-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Lecteur Google audio de Google Reader</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 127px; height: 45px;" src="http://1.bp.blogspot.com/-gGHoczYuxJM/TbxV8balVrI/AAAAAAAAEIA/dnRelwfmcJQ/s400/google-audio-reader.png" alt="Google audio player (Google Reader)" title="Google audio player (Google Reader)" id="BLOGGER_PHOTO_ID_5601446533181822642" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/google-audio-step-b.xml" target="_blank" title="google-audio-step-b.xml">google-audio-step-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/google-audio-step-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Lecteur simple de <a href="http://www.deezer.com" title="Deezer" target="_blank">Deezer</a></li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 120px; height: 69px;" src="http://2.bp.blogspot.com/-sxnOACU6MNQ/TbxZiHHf3kI/AAAAAAAAEII/r4FN9h3luZo/s1600/deezer-simple.png" alt="Deezer simple" title="Deezer simple" id="BLOGGER_PHOTO_ID_5601450479102975554" border="0" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/deezer-mini-b.xml" target="_blank" title="deezer-mini-b.xml">deezer-mini-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/deezer-mini-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px;font-family:Arial,sans-serif;font-size:0.9em;">Lecteur Dewplayer<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/dewplayer-b.xml</strong><br /> <br /> Lecteur Dewplayer avec contrôle du volume<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/dewplayer-vol-b.xml</strong><br /> <br /> Lecteur Dewplayer avec lecture de plusieurs fichiers<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/dewplayer-multi-b.xml</strong><br /> <br /> Lecteur Google audio (Gmail)<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-audio-b.xml</strong><br /> <br /> Lecteur Google audio (Google Reader)<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/google-audio-step-b.xml</strong><br /> <br /> Lecteur Deezer simple<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/deezer-mini-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Lecteur Dewplayer</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">MP3</span> : url du fichier *.mp3 à jouer<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No <br /> <span style="font-weight: bold;">LOOP</span> : lecture en boucle (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <ul><li>Lecteur Dewplayer avec contrôle du volume</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">MP3</span> : url du fichier *.mp3 à jouer<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No<br /> <span style="font-weight: bold;">LOOP</span> : lecture en boucle (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <ul><li>Lecteur Dewplayer avec lecture de plusieurs fichiers</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">MP3S</span> : url des fichiers *.mp3 à jouer<br /> <br /> Séparer les fichiers par le caractère <i><b>Pipe |</b></i>, à coder %7C<br /> <br /> Exemple : <b>son1.mp3<span style="color: #cc0000;">%7C</span>son2.mp3</b><br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No<br /> <span style="font-weight: bold;">LOOP</span> : lecture en boucle (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <ul><li>Lecteur Google audio (Gmail)</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">MP3</span> : url du fichier *.mp3 à jouer<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <ul><li>Lecteur Google audio (Google Reader)</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">MP3</span> : url du fichier *.mp3 à jouer<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <ul><li>Lecteur Deezer simple</li> </ul><br /> <div face="Arial,sans-serif" size="0.9em" style="background: none repeat scroll 0% 0% infobackground; padding: 4px;"><br /> <span style="font-weight: bold;">ID</span> : ID : identifiant du morceau de musique à jouer<br /> <br /> Sur deezer, partager donne l'URL : <b>http://www.deezer.com/listen-<span style="color: #cc0000;">1429492</span></b><br /> <br /> <span style="color: #cc0000;">1429492</span> est l'identifiant du morceau de musique<br /> <br /> <span style="font-weight: bold;">START</span> : démarrage automatique (Yes ou No), par défaut No<br /> <br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou <i><b>transparent</b></i>. La couleur du conteneur. Par défaut le conteneur est transparent<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul><li>Le lecteur Flash est intégré dans chaque Gadget</li> <li>Les fichiers *.mp3 peuvent être hébergés sur <b>Google Sites</b>, dans une page classeur</li> </ul><br /> <br /> <strong>Des exemples</strong><br /> <br /> Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog). Les exemples ci-dessous sont réalisés à partir d'un <b>Gadget Google</b>. Celui-ci peut être inséré à l'aide d'un tag <b>iframe</b> dans le <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 Google dans le html du message">html du message</a>. <br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/flash_dewplayer-script.htm" target="_blank" title="Lecteur Dewplayer">Lecteur Dewplayer</a>. Extrait <strong><em>O Fortuna, Carl Orff, Carmina Burana</em></strong></li> </ul><br /> <center><iframe style="width: 230px; height: 20px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/dewplayer.xml&amp;up_MP3=http%3A%2F%2Fsites.google.com%2Fsite%2Fannuairevin%2Ffiles%2Fcarl_orff_carmina_o_fortuna.mp3&amp;up_START=No&amp;up_LOOP=No&amp;up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Dewplayer - http://www.liens-du-vin.ch/flash_dewplayer-script.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/dewplayer.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Dewplayer"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/flash_dewplayer-script.htm" target="_blank" title="Lecteur Dewplayer avec contrôle du volume">Lecteur Dewplayer avec contrôle du volume</a>. Extrait <strong><em>Magnificat BWV 243, Gloria Patri (JS Bach)</em></strong></li> </ul><br /> <center><iframe style="width: 240px; height: 20px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/dewplayer-vol.xml&amp;up_MP3=http://sites.google.com/site/annuairevin/files/bach_243_gloria_patri.mp3&amp;up_START=No&amp;up_LOOP=No&amp;up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Dewplayer volume - http://www.liens-du-vin.ch/flash_dewplayer-script.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/dewplayer-vol.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Dewplayer volume"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/flash_dewplayer-script.htm" target="_blank" title="Lecteur Dewplayer avec lecture de plusieurs fichiers">Lecteur Dewplayer avec lecture de plusieurs fichiers</a>. Extraits <strong><em>Requiem Dies Irae (Mozart)</em></strong> et <strong><em>Posthorn, swiss postal sound (Rossini)</em></strong></li> </ul><br /> <center><iframe style="width: 250px; height: 20px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/dewplayer-multi.xml&amp;up_MP3S=http://sites.google.com/site/annuairevin/files/mozart_req_dies_irae.mp3%7Chttp://sites.google.com/site/annuairevin/files/rossini_swiss_posthorn.mp3&amp;up_START=No&amp;up_LOOP=Yes&amp;up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Dewplayer volume - http://www.liens-du-vin.ch/flash_dewplayer-script.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/dewplayer-multi.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Dewplayer multi"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/google-audio_player-script.htm" target="_blank" title="Lecteur Google audio (Gmail)">Lecteur Google audio (Gmail)</a>. Extrait <strong><em>O Fortuna, Carl Orff, Carmina Burana</em></strong></li> </ul><br /> <center><iframe style="width: 240px; height: 27px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&amp;up_MP3=http%3A%2F%2Fsites.google.com%2Fsite%2Fannuairevin%2Ffiles%2Fcarl_orff_carmina_o_fortuna.mp3&amp;up_START=No&amp;up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Lecteur audio de Google - http://www.liens-du-vin.ch/google-audio_player-script.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/google-audio.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Google audio (Gmail)"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/google-audio_player-script.htm" target="_blank" title="Lecteur Google audio (Google Reader)">Lecteur Google audio (Google Reader)</a>. Extrait <strong><em>Magnificat BWV 243, Gloria Patri (JS Bach)</em></strong></li> </ul><br /> <center><iframe style="width: 350px; height: 26px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio-step.xml&amp;up_MP3=http://sites.google.com/site/annuairevin/files/bach_243_gloria_patri.mp3&amp;up_START=No&amp;up_CCOL=%23d1dae3" 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></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/google-audio-step.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Google audio (Google Reader)"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <ul><li><a href="http://www.liens-du-vin.ch/deezer-player-script.htm" target="_blank" title="Lecteur simple Deezer">Lecteur simple Deezer</a>. Extrait <strong><em>Les Choeurs De L'armée Rouge, Hymne à la joie (9^e symphonie Beethoven)</em></strong></li> </ul><br /> <center><iframe style="width: 250px; height: 55px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/deezer-mini.xml&amp;up_ID=1429441&amp;up_START=No&amp;up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Deezer - http://www.liens-du-vin.ch/deezer-player-script.htm</iframe></center><br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/deezer-mini.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Deezer simple"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.deezer.com" target="_blank" title="Deezer">Le site de Deezer</a><br /> <br /> <a href="http://www.alsacreations.fr/dewplayer.html" target="_blank" title="Dewplayer, le site">Dewplayer, le site</a><br /> <br /> <a href="http://www.liens-du-vin.ch/flash_dewplayer-script.htm" target="_blank" title="Des Gadgets Google pour insérer le lecteur Dewplayer">Des Gadgets Google pour insérer le lecteur Dewplayer</a><br /> <br /> <a href="http://www.liens-du-vin.ch/google-audio_player-script.htm" target="_blank" title="Des Gadgets Google pour insérer le lecteur audio de Google">Des Gadgets Google pour insérer le lecteur audio de Google</a><br /> <br /> <a href="http://www.liens-du-vin.ch/deezer-player-script.htm" target="_blank" title="Un Gadget Google pour insérer le lecteur simple de Deezer">Un Gadget Google pour insérer le lecteur simple de Deezer</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/05/gadget-image-sonore.html" target="_blank" title="Un Gadget Blogger pour insérer une image sonore">Un Gadget Blogger pour insérer une image sonore</a><br /> <br /> <a href="http://www.liens-du-vin.ch/image-sonore-script.htm" target="_blank" title="Un Gadget Google pour insérer une image sonore">Un Gadget Google pour insérer une image sonore</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2010/01/fichiers-joints-podcasting-blogger.html" target="_blank" title="Fichiers joints et Podcasting avec Blogger">Fichiers joints et Podcasting avec Blogger</a><br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-3398328284658535050?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/dhJBzQx3VrSOZJIvnd_XdU8liIE/0/da"><img src="http://feedads.g.doubleclick.net/~a/dhJBzQx3VrSOZJIvnd_XdU8liIE/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/dhJBzQx3VrSOZJIvnd_XdU8liIE/1/da"><img src="http://feedads.g.doubleclick.net/~a/dhJBzQx3VrSOZJIvnd_XdU8liIE/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/tfTfyqXDirs" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com13http://viti-vino.blogspot.com/2011/04/lecteurs-simples-jouer-mp3-blog.htmltag:blogger.com,1999:blog-30801821.post-40998864208097780602011-04-01T00:08:00.017+02:002011-10-12T22:35:08.609+02:002011-10-12T22:35:08.609+02:00<h1 itemprop="name" style="display: none;">Afficher son blog avec les vues dynamiques</h1><img itemprop="image" src="http://1.bp.blogspot.com/-wiYwfhuF4pI/TZT-LyvXcrI/AAAAAAAAD3I/XZTau09nH_Q/s320/view-sidebar.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Disponibles depuis le 30 mars 2011, les vues dynamiques permettent d'afficher son Blog dans 5 présentations différentes. Les mises à jour de fin septembre 2011 apportent 2 vues supplémentaires.</p>Disponibles depuis le 30 mars 2011, les <a href="http://googleblog.blogspot.com/2011/03/fresh-new-perspectives-for-your-blog.html" target="_blank" title="Blogger - Dynamic view - vues dynamiques">vues dynamiques</a> permettent d'afficher son Blog dans 5 présentations différentes. Les mises à jour de fin septembre 2011 apportent 2 vues supplémentaires.<br /> <br /> <br /> <strong>La vue dynamique de son Blog</strong><br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;font-family:Arial,sans-serif;font-size:0.9em;color:infobackground;"><br /> <div style="text-align: center;"><span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">http://NOMDUBLOG.blogspot.com</span><span style="color: rgb(255, 0, 0);">/view</span></span><br /> </div><br /> </div><br /> <br /> <br /> <strong>Activer la vue dynamique</strong><br /> <br /> Paramètres / général. Activer les vues dynamiques : <span style="font-weight: bold;">Oui</span><br /> <br /> Selon l'<a href="http://www.google.com/support/blogger/bin/answer.py?hl=fr&amp;answer=1227173&amp;ctx=go" target="_blank" title="Blogger - Aide en ligne"> Aide en ligne</a>, le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux du Blog">Flux du Blog</a> doit être sur <span style="font-weight: bold;">Complet</span>.<br /> <br /> <br /> <strong>La vue barre de défilement (sidebar)</strong><br /> <br /> <br /> <center><a href="http://viti-vino-feed.blogspot.com/view/sidebar" title="Vue dynamique - sidebar" target="_blank"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 380px; height: 369px;" src="http://1.bp.blogspot.com/-wiYwfhuF4pI/TZT-LyvXcrI/AAAAAAAAD3I/XZTau09nH_Q/s400/view-sidebar.jpg" alt="Vue dynamique - sidebar" title="Vue dynamique - sidebar" id="BLOGGER_PHOTO_ID_5590372516026086066" border="0" /></a></center><br /> <br /> <br /> <strong>La vue planche d'images (flipcard)</strong><br /> <br /> <br /> <center><a href="http://viti-vino.blogspot.com/view/flipcard" target="_blank" title="vue dynamique - flipcard"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 380px; height: 386px;" src="http://1.bp.blogspot.com/-Hw4pRemaADA/TZT_F2hPDaI/AAAAAAAAD3Q/pysP0Q7rk5Y/s400/view-flipcard.jpg" alt="vue dynamique - flipcard" title="vue dynamique - flipcard" id="BLOGGER_PHOTO_ID_5590373513472970146" border="0" /></a></center><br /> <br /> <br /> <strong>La vue mosaïque (mosaic)</strong><br /> <br /> <br /> <center><a href="http://viti-vino.blogspot.com/view/mosaic" target="_blank" title="Vue dynamique - mosaic"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 367px; height: 400px;" src="http://1.bp.blogspot.com/-Y6I6SGPQJbY/TZT_v4JLy8I/AAAAAAAAD3Y/g2XGyCZB2Tk/s400/view-mosaic.jpg" alt="Vue dynamique - mosaic" title="Vue dynamique - mosaic" id="BLOGGER_PHOTO_ID_5590374235463470018" border="0" /></a></center><br /> <br /> <br /> <strong>La vue instantané (snapshot)</strong><br /> <br /> <br /> <center><a href="http://toques2cuisine.com/view/snapshot" title="Vue dynamique - snapshot" target="_blank"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 360px; height: 400px;" src="http://4.bp.blogspot.com/-IjEnRbmZpEg/TZUAwOvkQuI/AAAAAAAAD3k/ETeEBqdPmi0/s400/view-snapshot.jpg" alt="Vue dynamique - snapshot" title="Vue dynamique - snapshot" id="BLOGGER_PHOTO_ID_5590375341041664738" border="0" /></a></center><br /> <br /> <br /> <strong>La vue ruban temporel (timeslide)</strong><br /> <br /> <br /> <center><a href="http://viti-vino-feed.blogspot.com/view/timeslide" target="_blank" title="Vue dynamique - timeslide"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 380px; height: 282px;" src="http://4.bp.blogspot.com/-lL61zMCs_bA/TZUBfTWjcRI/AAAAAAAAD3s/pypmIbiJaIY/s400/view-timeslide.jpg" alt="Vue dynamique - timeslide" title="Vue dynamique - timeslide" id="BLOGGER_PHOTO_ID_5590376149732782354" border="0" /></a></center><br /> <br /> <br /> <strong>La vue magazine</strong><br /> <br /> <br /> <center><a href="http://viti-vino-feed.blogspot.com/view/magazine" target="_blank" title="Vue dynamique - magazine"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 380px; height: 301px;" src="http://4.bp.blogspot.com/-zfl5NP7yPcM/ToN1JAGSdtI/AAAAAAAAFZ4/2f_j0Pri_ME/s400/view-magazine.jpg" alt="Vue dynamique - magazine" title="Vue dynamique - magazine" border="0" /></a></center><br /> <br /> <br /> <strong>La vue classique (classic)</strong><br /> <br /> <br /> <center><a href="http://viti-vino.blogspot.com/view/classic" target="_blank" title="Vue dynamique - classic"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 380px; height: 347px;" src="http://3.bp.blogspot.com/-9RnuJ3rgIg8/ToN3ZfS8ywI/AAAAAAAAFaA/nfkbgM7l94c/s1600/view-classic.jpg" alt="Vue dynamique - classic" title="Vue dynamique - classic" border="0" /></a></center><br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.google.com/support/blogger/bin/answer.py?hl=fr&answer=1229061" target="_blank" title="Les vues dynamiques pour le lecteur du Blog">Les vues dynamiques pour le lecteur du Blog</a><br /> <br /> <br /> <strong>Les Vues dynamiques - mise à jour de fin septembre 2011</strong><br /> <br /> Le <a href="http://googlefrance.blogspot.com/2011/09/les-affichages-dynamiques-sept.html" target="_blank" title="Blog de Google France - Vues Dynamiques">Blog de Google France</a> présente les dernières nouveautés des Vues Dynamiques<br/> <br /> Les vues affichent les messages du Blog. Les gadgets disparaissent, mais les publicités AdSense figurent. Le format et la position des publicités ne sont pas modifiables<br /> <br /> Il est possible d'afficher son Blog avec l'une des sept vues dynamiques disponibles. La méthode est décrite sur <a href="http://mestrucspourblogger.blogspot.com/2011/09/les-vues-dynamiques-avant-et-apres.html" target="_blank" title="Mes Trucs pour Blogger - Vues Dynamiques">Mes Trucs pour Blogger</a>. Il n'est ainsi plus nécessaire d'ajouter <strong>/view</strong> à l'URL du Blog pour obtenir l'affichage dynamique<br /> <br /> Les vues dynamiques sont supportées à partir d'Internet Explorer 8, Chrome 10 et Firefox 3.6<br /> <br /> <br/> <strong>Les Vues Dynamiques de ce Blog</strong><br /> <br/> Diaporama réalisé avec le <a href="http://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Gadget Google : Diaporama">Gadget Google : Diaporama</a>. <br/><br/> <center><iframe style="width: 440px; height: 370px;" src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-slideshow.xml&up_FEED=https://picasaweb.google.com/data/feed/base/user/philippe.chappuis/albumid/5657509198318481905?alt=rss&kind=photo&hl=fr_FR&up_PWH=420&up_PHT=300&up_LNK=http://viti-vino.blogspot.com/view&up_TIT=Le+Blog+de+Prac+-+Vues+Dynamiques&up_DTime=&up_TTime=&up_RND=Yes&up_NAB=No&up_CLP=No&up_LCOL=%23bb5204&up_TCOL=%23bb5204&up_SCOL=%23f2e9ca&up_BCOL=%23de7008&up_CCOL=transparent" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Picasa Albums Web avec titre - http://www.liens-du-vin.ch/picasa-gadget-script.htm</iframe></center><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-4099886420809778060?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/vCx0qL2_FoiPSy_jRITNi7Zl_30/0/da"><img src="http://feedads.g.doubleclick.net/~a/vCx0qL2_FoiPSy_jRITNi7Zl_30/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/vCx0qL2_FoiPSy_jRITNi7Zl_30/1/da"><img src="http://feedads.g.doubleclick.net/~a/vCx0qL2_FoiPSy_jRITNi7Zl_30/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/lw_8iUKU1vg" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com2http://viti-vino.blogspot.com/2011/04/blogger-vues-dynamiques.htmltag:blogger.com,1999:blog-30801821.post-52442515376446594542011-03-20T18:35:00.019+01:002011-08-26T18:55:50.457+02:002011-08-26T18:55:50.457+02:00<h1 itemprop="name" style="display: none;">Configurer le Gadget Suivre par Mail</h1><img itemprop="image" src="http://3.bp.blogspot.com/-OHDnS4NFuGI/TYY9FSqBAjI/AAAAAAAADus/6IXkxIvLzFA/s400/feedburner-subscription-request.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Blogger propose depuis le 16 mars 2011 un nouveau Gadget, Suivre les mises à jour par e-mail.</p>Blogger propose depuis le 16 mars 2011 un nouveau Gadget, <a href="http://buzz.blogger.com/2011/03/engage-your-audience-with-follow-by.html" target="_blank" title="Gadget Blogger : Suivre les mises à jour par e-mail">Suivre les mises à jour par e-mail</a> .<br /> <br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 400px; height: 90px;" src="http://1.bp.blogspot.com/-TiIQy9kKqs0/TYY7eGl4aDI/AAAAAAAADuc/hSUV59JyP7Q/s400/suivre-mail.jpg" alt="Gadget Blogger : Suivre les mises à jour par e-mail" title="Gadget Blogger : Suivre les mises à jour par e-mail" id="BLOGGER_PHOTO_ID_5586217776151291954" border="0" /></center><br /> <br /> Une fois le gadget installé sur le Blog, le gadget se présente sous la forme d'une zone de saisie suivie d'un bouton <span lang="en">Submit</span>. Le texte de la zone de saisie, <span style="font-weight: bold;" lang="en">Email address...</span> n'apparaît que sous Chrome. C'est l'attribut <a href="http://www.w3schools.com/html5/html5_form_attributes.asp" target="_blank" title="placeholder">placeholder</a> de la balise input qui n'est pas traité par FireFox 3.6 et Internet Explorer 8.<br /> <br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 255px; height: 81px;" src="http://4.bp.blogspot.com/-PdvYe6qoul0/TYY8ij3NIaI/AAAAAAAADuk/VUhfVVkCeMo/s400/gadget-suivre-e-mail.jpg" alt="Suivre le Blog par e-mail" title="Suivre le Blog par e-mail" id="BLOGGER_PHOTO_ID_5586218952239686050" border="0" /></center><br /> <br /> La grille de validation de <a href="http://feedburner.google.com/" target="_blank" title="Feedburner">Feedburner</a> est quand à elle également en anglais&nbsp;:&nbsp;<br /> <br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 280px; height: 275px;" src="http://3.bp.blogspot.com/-OHDnS4NFuGI/TYY9FSqBAjI/AAAAAAAADus/6IXkxIvLzFA/s400/feedburner-subscription-request.jpg" alt="Formulaire de confirmation Feedburner" title="Formulaire de confirmation Feedburner" id="BLOGGER_PHOTO_ID_5586219548916384306" border="0" /></center><br /> <br /> <br /> <strong>Modifier le code source</strong><br /> <br /> Nous allons modifier le code html du gadget pour afficher les textes en français et obtenir le formulaire Feedburner dans cette langue.<br /> <br /> Présentation / Modifier le code HTML. Cocher Développer des modèles de gadgets puis rechercher le code suivant&nbsp;:&nbsp;<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> &lt;b:widget id='FollowByEmail1' locked='false' title='Suivre par Mail' type='FollowByEmail'&gt;<br /> &lt;b:includable id='main'&gt;<br /> &lt;b:if cond='data:title != ""'&gt;&lt;h2<br /> class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;&lt;/b:if&gt;<br /> &lt;div class='widget-content'&gt;<br /> &lt;div class='follow-by-email-inner'&gt;<br /> &lt;form action='http://feedburner.google.com/fb/a/mailverify'<br /> expr:onsubmit='"window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=" +<br /> data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\");<br /> return true"' method='post' target='popupwindow'&gt;<br /> &lt;span&gt;<br /> &lt;input class='follow-by-email-address' name='email' placeholder='<span style="font-weight: bold; color: rgb(255, 0, 0);">Email address...</span>'<br /> type='text'/&gt;<br /> &lt;/span&gt;<br /> &lt;input class='follow-by-email-submit' type='submit' value='<span style="font-weight: bold; color: rgb(255, 0, 0);">Submit</span>'/&gt;<br /> &lt;input expr:value='data:feedPath' name='uri' type='hidden'/&gt;<br /> &lt;input name='loc' type='hidden' value='<span style="font-weight: bold; color: rgb(255, 0, 0);">en_US</span>'/&gt;<br /> &lt;/form&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;span class='item-control blog-admin'&gt;<br /> &lt;b:include name='quickedit'/&gt;<br /> &lt;/span&gt;<br /> &lt;/b:includable&gt;<br /> &lt;/b:widget&gt;<br /> <br /> </div><br /> <br /> <br /> <b>Email address... </b>: à remplacer par <b>Adresse Mail...</b><br /> <b>Submit </b>: à remplacer par <b>Suivre</b><br /> <b>en_US </b>: à remplacer par <b>fr_FR</b><br /> <br /> Le formulaire de validation proposé par Feedburner est maintenant en français&nbsp;:&nbsp;<br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 320px; height: 288px;" src="http://2.bp.blogspot.com/-A9VKKY5JLHQ/TYY-84beYnI/AAAAAAAADu0/mGAxBabqkPA/s400/feedburner-formulaire-francais.jpg" border="0" alt="Formulaire de confirmation Feedburner" title="Formulaire de confirmation Feedburner" id="BLOGGER_PHOTO_ID_5586221603460375154" /></center><br /> <br /> <br /> <span style="font-weight:bold;">Plus d'informations</span><br /> <br /> Pour configurer le mail envoyé par Feedburner (textes en français, options d'envois, etc...), suivre les indications données par <a href="http://mestrucspourblogger.blogspot.com/2010/05/creer-une-newsletter-33.html" target="_blank" title="Mes Trucs pour Blogger">MesTrucsPourBlogger</a><br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-5244251537644659454?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/HsPGAk3TdU0mA5-JyNd662vINW4/0/da"><img src="http://feedads.g.doubleclick.net/~a/HsPGAk3TdU0mA5-JyNd662vINW4/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/HsPGAk3TdU0mA5-JyNd662vINW4/1/da"><img src="http://feedads.g.doubleclick.net/~a/HsPGAk3TdU0mA5-JyNd662vINW4/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/FQIglwl76GU" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com11http://viti-vino.blogspot.com/2011/03/configurer-gadget-suivre-mail.htmltag:blogger.com,1999:blog-30801821.post-52251277141066977952011-02-27T20:40:00.021+01:002012-04-27T23:13:50.963+02:002012-04-27T23:13:50.963+02:00<h1 itemprop="name" style="display: none;">Afficher une feuille Excel sur son Blog - Google Viewer</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/excel-blogger.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Le lecteur de document de Google, Google Viewer permet de visionner des fichiers *.pdf, *.tif et *.ppt. Depuis le 18 février 2011, le lecteur de Google peut afficher 12 formats supplémentaires. Il est désormais possible d'afficher un fichier *.psd ainsi que les fichiers Excel, *.xls et *.xlsx.</p>Le <strong>lecteur de document de Google</strong>, <a href="http://viti-vino.blogspot.com/2009/09/pdf-viewer-google-docs.html" title="Google Viewer" target="_blank">Google Viewer</a> permet de visionner des fichiers <b>*.pdf</b> (Adobe Portable Document Format), <b>*.tif</b> (Tagged Image File Format) et <b>*.ppt</b> (Microsoft PowerPoint).<br /> <br /> Depuis le 18 février 2011, le lecteur de Google peut afficher <a href="http://googledocs.blogspot.com/2011/02/12-new-file-formats-in-google-docs.html" target="_blank" title="Google Viewer - 12 formats supplémentaires">12 formats supplémentaires</a>. Il est désormais possible d'afficher un fichier <b>*.psd</b> (Adobe Photoshop) ainsi que les fichiers Excel, <b>*.xls</b> et <b>*.xlsx</b><br /> <br /> <br /> <strong>Afficher un fichier Adobe Photoshop</strong><br /> <br /> En utilisant le <a href="http://docs.google.com/viewer" target="_blank" title="Google Viewer - formulaire en ligne">formulaire en ligne</a> avec l'adresse d'un fichier *.psd hébergé sur Google Docs, nous obtenons ce code pour intégrer le lecteur :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <b><i>Adresse du fichier *.psd</i></b><br /> <br /> <span style="color: rgb(255, 0, 0); font-weight: bold;">http://www.liens-du-vin.ch/_files/_files/ascreen-ph.psd</span><br /> <br /> <b><i>Code iframe pour intégrer le lecteur</i></b><br /> <br /> &lt;iframe<br /> src="http://docs.google.com/viewer?<br /> url=<span style="color: rgb(255, 0, 0); font-weight: bold;">http://www.liens-du-vin.ch/_files/ascreen-ph.psd</span><br /> &amp;embedded=true"<br /> width="380" height="360" style="border: none;"&gt;Lecteur Google Viewer pour afficher un fichier *.psd&lt;/iframe&gt;<br /> <br /> </div><br /> <br /> <br /> <strong>Le résultat</strong><br /> <br /> <center><iframe src="http://docs.google.com/viewer?url=http://www.liens-du-vin.ch/_files/ascreen-ph.psd&amp;embedded=true" allowTransparency="true" frameborder="0" scrolling="no" width="380" height="360"></iframe></center><br /> <br /> <br /> <strong>Le cas d'une feuille Excel</strong><br /> <br /> J ai créé une feuille Excel à partir des statistiques de visite de ce <a href="http://www.viti-vino,blogspot.com/" target="_blank" title="Blog de Prac - Outils Google">Blog</a> (2010, type de navigateur et système d'exploitation).<br /> La feuille Excel est hébergée par <a href="http://docs.google.com/" target="_blank" title="Google Docs">Google Docs</a>, en format original. Pour conserver le format original lors de l'importation, il ne faut pas cocher l'option :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <i><b>Convertir des documents, présentations, feuilles de calcul et dessins au format Google Documents correspondant</b></i><br /> <br /> </div><br /> <br /> En utilisant le <a href="http://docs.google.com/viewer" target="_blank" title="Formulaire en ligne - Google Viewer">formulaire en ligne de Google Viewer</a>, la feuille Excel peut être affichée dans le lecteur.<br /> <br /> <center><a href="https://docs.google.com/viewer?a=v&amp;pid=explorer&amp;chrome=true&amp;srcid=0B4yfJJJSNrfuZmI3MGRjMmEtNWFjNy00ZGY5LTg3ZTgtODVjZDgxYzExMjhh&amp;hl=en&amp;embedded=false" title="Feuille Excel dans Google Viewer" target="_blank">Feuille Excel dans le lecteur Google Viewer</a></center><br /> <br /> <br /> <strong>Utiliser un Google Web Elements</strong><br /> <br /> Pour une intégration directe sur le Blog, il reste cependant préférable d'utiliser le <a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html#feuille_de_calcul" target="_blank" title="Google Web Elements - Spreadsheet">Google Web Elements Spreadsheet</a><br /> <br /> Dans ce cas, il faut respecter deux conditions :<br /> <br /> <ul><li>La feuille Excel doit être importée dans Google Docs, <b>avec</b> l'option de conversion :<br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <i><b>Convertir des documents, présentations, feuilles de calcul et dessins au format Google Documents correspondant</b></i><br /> </div></li> <li>Le document doit être <b>public</b> et le document doit être <b>publié en tant que page Web</b></li> </ul><br /> <br /> Utilisez l'option <strong>Partager</strong>, une fois le document ouvert pour publier la page :<br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 265px; height: 171px;" src="http://4.bp.blogspot.com/-mtQWcNeyR1Q/TWqtKO8n8JI/AAAAAAAADoA/vH_CaHfbRNk/s400/publier-page-web.jpg" alt="Publier en tant que page Web" id="BLOGGER_PHOTO_ID_5578461479774449810" title="Publier en tant que page Web" border="0" /><br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <b><i>Adresse de la page Web (feuille Excel en format Google Documents)</i></b><br /> <br /> http://spreadsheets.google.com/pub?<br /> output=html<br /> &amp;widget=true<br /> &amp;single=true<br /> &amp;element=true<br /> &amp;gid=0<br /> &amp;key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc<br /> <br /> <b><i>Code du Google Web Elements</i></b><br /> <br /> &lt;iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:350px;height:340px;" src="http://spreadsheets.google.com/pub?<br /> output=html<br /> &amp;widget=true<br /> &amp;single=true<br /> &amp;element=true<br /> &amp;gid=0<br /> &amp;key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc"<br /> scrolling="no" allowtransparency="true"&gt;&lt;/iframe&gt;<br /> <br /> </div><br /> <br /> En plaçant le code du iframe dans le html du message, nous obtenons :<br /> <br /> <center><iframe marginwidth="0" marginheight="0" border="0" style="border: 0pt none; margin: 0pt; width: 350px; height: 340px;" src="http://spreadsheets.google.com/pub?output=html&amp;widget=true&amp;single=true&amp;element=true&amp;gid=0&amp;key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc" allowtransparency="true" frameborder="0" scrolling="no">Google Web Elements - Spreadsheets</iframe></center><br /> <br /> <br /> <strong>Une astuce</strong><br /> <br /> Il est possible d'insérer directement, sans passer par un <b>Google Web Elements</b>, une plage d'une feuille Excel. La feuille doit satisfaire les deux conditions mentionnées ci-dessus.<br /> On utilise aussi un tag iframe. Le code à insérer :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <br /> <b><i>Adresse de la page Web (feuille Excel en format Google Documents)</i></b><br /> <br /> https://spreadsheets.google.com/ccc?<br /> key=<span style="color: rgb(255, 0, 0); font-weight: bold;">0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc</span><br /> &amp;hl=fr<br /> <br /> <b><i>Code du iframe</i></b><br /> <br /> &lt;iframe width='350' height='300' frameborder='0'<br /> src='http://spreadsheets.google.com/pub?<br /> key=<span style="color: rgb(255, 0, 0); font-weight: bold;">0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc</span><br /> &amp;single=true<br /> &amp;gid=0<br /> &amp;range=<span style="color: rgb(0, 153, 0); font-weight: bold;">A1</span>%3A<span style="color: rgb(0, 153, 0); font-weight: bold;">B17</span><br /> &amp;output=html'&gt;&lt;/iframe&gt;<br /> <br /> <b><i>Plage à afficher</i></b><br /> <br /> Cellules <span style="color: rgb(0, 153, 0); font-weight: bold;">A1</span> à <span style="color: rgb(0, 153, 0); font-weight: bold;">B17</span> : range=A1%3AB17<br /> <br /> </div><br /> <br /> <br /> <strong>Le Résultat</strong><br /> <br /> Nous avons une feuille Excel sans la barre Google Web Elements. De plus, une modification de la feuille dans Google Docs sera de suite reportée sur le Blog !<br /> <br /> <center><iframe src="http://spreadsheets.google.com/pub?key=0AoyfJJJSNrfudGVPMXdVbzZVZVkxWkY5YjV0NUNyZGc&amp;single=true&amp;gid=0&amp;range=A1%3AB17&amp;output=html" allowtransparency="true" width="350" frameborder="0" height="300">Insérer une feuille Excel sur son Blog</iframe></center><br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://googledocs.blogspot.com/" target="_blank" title="Blog Google Docs">Le Blog de Google Docs</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2012/04/google-drive-blogger-ameliorer-blog.html" target="_blank" title="Google Drive et Blogger - Améliorer son Blog">Google Drive et Blogger - Améliorer son Blog</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html" target="_blank" title="Google Web Elements">Les Google Web Elements</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2009/09/pdf-viewer-google-docs.html" target="_blank" title="Google Viewer">Google Viewer</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2010/01/fichiers-joints-podcasting-blogger.html" target="_blank" title="Fichiers joints et Podcasting avec Blogger">Fichiers joints et Podcasting avec Blogger</a><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-5225127714106697795?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/QQ_a8eWsYfH__eZU6D-vnNj9JqE/0/da"><img src="http://feedads.g.doubleclick.net/~a/QQ_a8eWsYfH__eZU6D-vnNj9JqE/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/QQ_a8eWsYfH__eZU6D-vnNj9JqE/1/da"><img src="http://feedads.g.doubleclick.net/~a/QQ_a8eWsYfH__eZU6D-vnNj9JqE/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/dhYbin_QPwg" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/02/feuille-excel-blog-google-viewer.htmltag:blogger.com,1999:blog-30801821.post-87487920575044922712011-02-22T20:54:00.014+01:002012-03-23T22:40:44.759+01:002012-03-23T22:40:44.759+01:00<h1 itemprop="name" style="display: none;">Les derniers messages d'un Blog sous forme de Diaporama</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/last-posts.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Le Diaporama standard de Blogger peut être utilisé pour afficher les derniers messages d'un Blog à l'aide d'un Gadget Blogger. Le Gadget affiche la première image contenue dans le message, ainsi que le début du texte. Les 10 derniers messages peuvent être affichés.</p>Le <a href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank" title="Diaporama Blogger">Diaporama standard de Blogger</a> peut être utilisé pour afficher les derniers messages d'un Blog à l'aide d'un <strong>Gadget Blogger</strong>. Le Gadget affiche la première image contenue dans le message, ainsi que le début du texte. Les 10 derniers messages peuvent être affichés. C'est une utilisation particulière du <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux Atom">Flux Atom</a> du Blog.<br /> <br /> <br /> <strong>Les deux variantes du Gadget</strong><br /> <br /> <ul><li>Affichage de l'image à gauche du texte</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/-vpfyOVJS9fE/TWQVXZ2gpoI/AAAAAAAADnk/ZHHLgYbu_i8/s400/last-post-slideshow-screen.png" alt="Gadget Blogger - Diaporama derniers messages" title="Gadget Blogger - Diaporama derniers messages" id="BLOGGER_PHOTO_ID_5576605730412209794" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/last-post-slideshow-b.xml" target="_blank" title="last-post-slideshow-b.xml">last-post-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/last-post-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Version verticale, image centrée en haut du gadget</li> </ul><br /> <center><img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/-vpfyOVJS9fE/TWQVXZ2gpoI/AAAAAAAADnk/ZHHLgYbu_i8/s400/last-post-slideshow-screen.png" alt="Gadget Blogger - Diaporama derniers messages" title="Gadget Blogger - Diaporama derniers messages" id="BLOGGER_PHOTO_ID_5576605730412209794" /><span style="font-size:0.8em;"><a href="http://prac-gadget.googlecode.com/files/last-post-slideshow-v-b.xml" target="_blank" title="last-post-slideshow-v-b.xml">last-post-slideshow-v-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/last-post-slideshow-v-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px;font-family:Arial,sans-serif;font-size:0.9em;">Image à gauche<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/last-post-slideshow-b.xml</strong><br /> <br /> Version verticale, image centrée en haut du gadget<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/last-post-slideshow-v-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Image à gauche</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">NAME</span> : le nom du Blog. Par exemple <span style="font-weight: bold; color: rgb(204, 0, 0);">viti-vino.blogspot.com</span>.<br /> <br /> Le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux du Blog">Flux du Blog</a> doit être défini sur <strong>complet</strong>.<br /> <br /> <span style="font-weight: bold;">NBP</span> : le nombre de messages (<span lang="en">post</span>) à afficher.<br /> <br /> <span style="font-weight: bold;">PDEF</span> : l'image à afficher lorsqu'il n'existe aucune image dans un message. Saisir l'URL de l'image, par exemple <span style="font-weight: bold; color: rgb(204, 0, 0);">http://www.liens-du-vin.ch/ascreen.jpg</span>.<br /> <br /> <span style="font-weight: bold;">LEN</span> : la longueur du texte à afficher. De 1 à 512 caractères. Par défaut 128.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage du message dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">BLK</span> : ouverture des liens dans une nouvelle fenêtre. Yes ou No, par défaut Yes (oui).<br /><br/> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">FSIZE</span><span style="font-weight: bold;"> </span>: La taille de la police. Par défaut 0.80em.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien (lire la suite). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <ul><li>Version verticale, image centrée en haut du gadget</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial,sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">NAME</span> : le nom du Blog. Par exemple <span style="font-weight: bold; color: rgb(204, 0, 0);">viti-vino.blogspot.com</span>.<br /> <br /> Le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux du Blog">Flux du Blog</a> doit être défini sur <strong>complet</strong>.<br /> <br /> <span style="font-weight: bold;">NBP</span> : le nombre de messages (<span lang="en">post</span>) à afficher.<br /> <br /> <span style="font-weight: bold;">PDEF</span> : l'image à afficher lorsqu'il n'existe aucune image dans un message. Saisir l'URL de l'image, par exemple <span style="font-weight: bold; color: rgb(204, 0, 0);">http://www.liens-du-vin.ch/ascreen.jpg</span>.<br /> <br /> <span style="font-weight: bold;">LEN</span> : la longueur du texte à afficher. De 1 à 512 caractères. Par défaut 128.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage du message d'origine dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">BLK</span> : ouverture des liens dans une nouvelle fenêtre. Yes ou No, par défaut Yes (oui).<br /><br/> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">FSIZE</span><span style="font-weight: bold;"> </span>: La taille de la police. Par défaut 0.80em.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien (lire la suite). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul><li>Images originales, telles qu'elles figurent dans le message du Blog</li> <li>Affiche les images en format *.jpg, *.gif et *.png</li> <li>Fond transparent ou couleurs à choix</li> <li>Temps d'affichage modifiable</li> <li>Ordre aléatoire des images en option</li> <li>Suppression possible de la barre de navigation</li> </ul><br /> <br /> <strong>Des exemples</strong><br /> <br /> J'ai utilisé, non pas un <strong>Gadget Blogger</strong> pour ces exemples, mais la version <a href="http://www.liens-du-vin.ch/last-post-slideshow.htm" target="_blank" title="Gadget Google - diaporama derniers messages">Gadget Google</a> afin d'afficher le Diaporama dans le html de ce message.<br /> <br /> <ul><li>Les derniers messages du <a href="http://aide-blogger-fr.blogspot.com/" target="_blank" title="Blog d'Aide pour Blogger">Blog d'Aide pour Blogger</a>. Vignettes de 160 x 120. Pas de barre de navigation, ordre aléatoire. Version verticale.</li> </ul><br /> <br /> <center><iframe style="width: 174px; height: 310px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-post-slideshow-v.xml&amp;up_NAME=aide-blogger-fr.blogspot.com&amp;up_NBP=&amp;up_PDEF=&amp;up_LEN=&amp;up_PWH=160&amp;up_PHT=120&amp;up_DTime=3000&amp;up_TTime=1000&amp;up_RND=Yes&amp;up_CLP=Yes&amp;up_NAB=No&amp;up_TCOL=%23000000&amp;up_LCOL=%23935205&amp;up_SCOL=%23f2e9ca&amp;up_BCOL=%23de7008&amp;up_CCOL=%23f6f6f6" allowtransparency="true" frameborder="0" scrolling="no">Gadget Google - Slideshow last post of blogger - http://www.liens-du-vin.ch/last-post-slideshow.htm</iframe><br /> <br /> <div><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/last-post-slideshow-v.xml" style="border: 0px none; text-decoration: none;" target="_blank" title="Ajouter Diaporama derniers messages"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" width="104" border="0" height="17" /></a></div></center><br /> <br /> <ul><li>Les derniers messages de <a href="http://viti-vino.blogspot.com/" target="_blank" title="Blog de Prac - Outils Google">ce Blog</a>. Vignettes de 120 x 90. Pas de barre de navigation, ordre aléatoire. Version horizontale, avec images à gauche.</li> </ul><br /> <br /> <center><iframe style="width: 465px; height: 110px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-post-slideshow.xml&amp;up_NAME=viti-vino.blogspot.com&amp;up_NBP=7&amp;up_PDEF=&amp;up_LEN=110&amp;up_PWH=120&amp;up_PHT=90&amp;up_DTime=3000&amp;up_TTime=1000&amp;up_RND=Yes&amp;up_CLP=Yes&amp;up_NAB=No&amp;up_TCOL=%23000000&amp;up_LCOL=%23935205&amp;up_SCOL=%23f2e9ca&amp;up_BCOL=%23de7008&amp;up_CCOL=%23f6f6f6" allowtransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama des derniers messages d'un Blog - http://www.liens-du-vin.ch/last-post-slideshow.htm</iframe><br /> <br /> <div><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/last-post-slideshow-v.xml" style="border: 0px none; text-decoration: none;" target="_blank" title="Ajouter Diaporama derniers messages"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" width="104" border="0" height="17" /></a></div></center><br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/flickr-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Flickr">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/last-post-slideshow.htm" target="_blank" title="Gadget Google - Diaporama des derniers messages">Afficher les derniers messages d'un Blog avec un Gadget Google</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Gadget Blogger - Diaporama Pinterest">Diaporama Pinterest avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.html" target="_blank" title="Gadget Blogger - Diaporama Picasa">Diaporama 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="Gadget Blogger - Diaporama Photobucket">Diaporama Photobucket avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.html" target="_blank" title="Gadget Blogger - Diaporama Flickr">Diaporama Flickr avec un Gadget Blogger</a><br /> <br /> <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Créer un Diaporama à partir d'un Flux Média RSS</a><br /> <br /> <a href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank" title="Afficher des diaporamas sur Google Sites">Afficher des Diaporamas sur Google Sites</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-8748792057504492271?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/uNXMfkUCredJorDpolvjos5hw68/0/da"><img src="http://feedads.g.doubleclick.net/~a/uNXMfkUCredJorDpolvjos5hw68/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/uNXMfkUCredJorDpolvjos5hw68/1/da"><img src="http://feedads.g.doubleclick.net/~a/uNXMfkUCredJorDpolvjos5hw68/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/ccE4Zj0jmS4" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com4http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.htmltag:blogger.com,1999:blog-30801821.post-40867131444490913122011-02-19T17:43:00.014+01:002012-02-26T22:31:37.443+01:002012-02-26T22:31:37.443+01:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour afficher un Diaporama Flickr</h1><img itemprop="image" src="http://1.bp.blogspot.com/-_NJwy6wxDwg/TV_2cMDLuJI/AAAAAAAADmo/l8DmxoYkxQ4/s400/flickr-slideshow-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Les Gadgets Blogger permettent d'afficher un Diaporama d'un Photoset (album) de Flickr ou toutes les images d'un utilisateur (Photostream) de Flickr. </p>Les <strong>Gadgets Blogger</strong> permettent d'afficher un <strong>Diaporama</strong> d'un <strong>Photoset</strong> (album) de Flickr ou toutes les images d'un utilisateur (<strong>Photostream</strong>) de Flickr. Grâce à l'utilisation de <a href="http://pipes.yahoo.com/pipes/" target="_blank" title="Yahoo Pipes">Yahoo Pipes</a> il est possible d'afficher jusqu'à 500 photos par album ou par ensemble d'images. Le <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> de Flickr est analysé pour afficher une image sans perte de qualité jusqu'à 640 pixels de large.<br /> <br /> <br /> <strong>Les variantes du Gadget</strong><br /> <br /> <ul><li>Sans titre, un ensemble d'images</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-_NJwy6wxDwg/TV_2cMDLuJI/AAAAAAAADmo/l8DmxoYkxQ4/s400/flickr-slideshow-screen.png" alt="Gadget Blogger - Diaporama Flickr" title="Gadget Blogger - Diaporama Flickr" id="BLOGGER_PHOTO_ID_5575445827839309970" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-simple-b.xml" target="_blank" title="flickr-ph-slideshow-simple-b.xml">flickr-ph-slideshow-simple-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-simple-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Sans titre, images d'un album</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-_NJwy6wxDwg/TV_2cMDLuJI/AAAAAAAADmo/l8DmxoYkxQ4/s400/flickr-slideshow-screen.png" alt="Gadget Blogger - Diaporama Flickr" title="Gadget Blogger - Diaporama Flickr" id="BLOGGER_PHOTO_ID_5575445827839309970" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/flickr-slideshow-simple-b.xml" target="_blank" title="flickr-slideshow-simple-b.xml">flickr-slideshow-simple-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/flickr-slideshow-simple-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Avec un titre et les légendes des photos. Ensemble d'images</li> </ul><br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-_NJwy6wxDwg/TV_2cMDLuJI/AAAAAAAADmo/l8DmxoYkxQ4/s400/flickr-slideshow-screen.png" alt="Gadget Blogger - Diaporama Flickr" title="Gadget Blogger - Diaporama Flickr" id="BLOGGER_PHOTO_ID_5575445827839309970" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-b.xml" target="_blank" title="flickr-ph-slideshow-b.xml">flickr-ph-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <ul><li>Avec un titre et les légendes des photos. Images d'un album</li> </ul><br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/-_NJwy6wxDwg/TV_2cMDLuJI/AAAAAAAADmo/l8DmxoYkxQ4/s400/flickr-slideshow-screen.png" alt="Gadget Blogger - Diaporama Flickr" title="Gadget Blogger - Diaporama Flickr" id="BLOGGER_PHOTO_ID_5575445827839309970" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/flickr-slideshow-b.xml" target="_blank" title="flickr-slideshow-b.xml">flickr-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/flickr-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <br /> Sans titre, ensemble d'images<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-simple-b.xml</strong><br /> <br /> Sans titre, images d'un album<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/flickr-slideshow-simple-b.xml</strong><br /> <br /> Avec titre et légendes, ensemble d'images<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/flickr-ph-slideshow-b.xml</strong><br /> <br /> Avec titre et légendes, images d'un album<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/flickr-slideshow-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Sans titre, ensemble d'images (Photostream)</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">UID</span> : l'identifiant de l'utilisateur.<br /> <br /> Ouvrir le compte Flickr, rechercher l'adresse marquée <strong>RSS</strong>. L'URL est de cette forme&nbsp;:&nbsp;<br /> <br /> http://api.flickr.com/services/feeds/photos_public.gne?id=<span style="color: rgb(255, 0, 0); font-weight: bold;">42038249@N00</span>&amp;lang=fr-FR&format=rss_200<br /> <br /> <span style="color: rgb(255, 0, 0); font-weight: bold;">42038249@N00</span> est l'identifiant de l'utilisateur.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels. Jusqu'à 640 pixels, le diaporama affiche l'image en qualité originale.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> </div><br /> <br /> <ul><li>Sans titre, image d'un album (Set)</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">SET</span> : le Set (album) de Flickr à afficher.<br /> <br /> Ouvrir l'album et copier son adresse. L'URL est de cette forme&nbsp;:&nbsp;<br /> <br /> http://www.flickr.com/photos/prac53/sets/<span style="color: rgb(255, 0, 0); font-weight: bold;">72157609076361497</span>/<br /> <br /> <span style="color: rgb(255, 0, 0); font-weight: bold;">72157609076361497</span> est l'identifiant du Set à afficher.<br /> <br /> Le Set doit être <b>public</b>.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels. Jusqu'à 640 pixels, le diaporama affiche l'image en qualité originale.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> </div><br /> <br /> <ul><li>Avec titre et légendes, ensemble d'images (Photostream)</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">UID</span> : l'identifiant de l'utilisateur.<br /> <br /> Ouvrir le compte Flickr, rechercher l'adresse marquée <strong>RSS</strong>. L'URL est de cette forme&nbsp;:&nbsp;<br /> <br /> http://api.flickr.com/services/feeds/photos_public.gne?id=<span style="color: rgb(255, 0, 0); font-weight: bold;">42038249@N00</span>&amp;lang=fr-FR&format=rss_200<br /> <br /> <span style="color: rgb(255, 0, 0); font-weight: bold;">42038249@N00</span> est l'identifiant de l'utilisateur.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">LNK</span> : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.<br /> <span style="font-weight: bold;">TIT</span> : le titre du diaporama. Par défaut le titre du Flux Media RSS de Flickr.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <ul><li>Avec titre et légendes, images d'un album (Set)</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">SET</span> : le Set (album) de Flickr à afficher.<br /> <br /> Ouvrir l'album et copier son adresse. L'URL est de cette forme&nbsp;:&nbsp;<br /> <br /> http://www.flickr.com/photos/prac53/sets/<span style="color: rgb(255, 0, 0); font-weight: bold;">72157609076361497</span>/<br /> <br /> <span style="color: rgb(255, 0, 0); font-weight: bold;">72157609076361497</span> est l'identifiant du Set à afficher.<br /> <br /> Le Set doit être <b>public</b>.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">LNK</span> : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.<br /> <span style="font-weight: bold;">TIT</span> : le titre du diaporama. Par défaut le titre du Flux Media RSS de Flickr.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul><li>Dépasse la limite normale des 20 images pour un Flux de Flickr (maximum 500 images)</li> <li>Images sans perte de qualité jusqu'à 640 pixels</li> <li>Affiche les images en format *.jpg, *.gif et *.png</li> <li>Fond transparent ou couleurs à choix</li> <li>Temps d'affichage modifiable</li> <li>Ordre aléatoire des images en option</li> <li>Suppression possible de la barre de navigation</li> <li>Clic sur image désactivé par défaut</li> <li>Affichage des légendes de chaque image (version avec titre)</li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> J'ai utilisé, non pas un <strong>Gadget Blogger</strong> pour cet exemple, mais la version <a href="http://www.liens-du-vin.ch/flickr-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Flickr">Gadget Google</a> afin d'afficher le Diaporama dans le html de ce message.<br /> <br /> <ul><li>L'album <a href="http://www.flickr.com/photos/prac53/sets/72157609076361497/" target="_blank" title="La Noblesse des Vins Suisses">La Noblesse des Vins Suisses</a></li> </ul><br /> <br /> <center><iframe style="width: 280px; height: 210px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/flickr-slideshow-simple.xml&amp;up_SET=72157609076361497&amp;up_PWH=240&amp;up_PHT=180&amp;up_DTime=2000&amp;up_TTime=1000&amp;up_RND=Yes&amp;up_CLP=Yes&amp;up_NAB=&amp;up_SCOL=%23f2e9ca&amp;up_BCOL=%23de7008&amp;up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama / Slideshow de Flickr - http://www.liens-du-vin.ch/flickr-gadget-script.htm</iframe><div><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/flickr-slideshow-simple.xml" style="border: 0px none ; text-decoration: none;" target="_blank" title="Ajouter Diaporama Flickr"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div></center><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/flickr-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Flickr">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/flickr-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Flickr">Diaporama Flickr avec un Gadget Google</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger - Diaporama des derniers messages">Diaporama des derniers messages avec un gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Gadget Blogger - Diaporama des dernières images de Pinterest">Diaporama des dernières images de Pinterest avec un gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/vignettes-flickr.html" target="_blank" title="Gadget Blogger - Vignettes Flickr">Un Gadget Blogger pour afficher les vignettes de Flickr</a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2011/01/photos-flickr-mur-images-tiltviewer.html" target="_blank" title="Photos Flickr - Tiltviewer">Ses photos Flickr sur un mur d'images</a>, avec un Diaporama Tiltviewer<br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-photobucket-gadget-blogger.html" target="_blank" title="Gadget Blogger - Diaporama Photobucket">Diaporama Photobucket avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.html" target="_blank" title="Gadget Blogger - Diaporama Picasa">Diaporama Picasa avec un Gadget Blogger</a><br /> <br /> <a href="http://www.liens-du-vin.ch/last-post-slideshow.htm" target="_blank" title="Gadget Google - Diaporama des derniers messages d'un Blog">Diaporama des derniers messages d'un Blog</a><br /> <br /> <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Créer un Diaporama à partir d'un Flux Média RSS</a><br /> <br /> <a href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank" title="Afficher des diaporamas sur Google Sites">Afficher des Diaporamas sur Google Sites</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> </br><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-4086713144449091312?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/w9Gb3MMdeEy8QFEaVvpfVACPoTE/0/da"><img src="http://feedads.g.doubleclick.net/~a/w9Gb3MMdeEy8QFEaVvpfVACPoTE/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/w9Gb3MMdeEy8QFEaVvpfVACPoTE/1/da"><img src="http://feedads.g.doubleclick.net/~a/w9Gb3MMdeEy8QFEaVvpfVACPoTE/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/tGUg96_-iD4" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com4http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.htmltag:blogger.com,1999:blog-30801821.post-11726261415910751302011-02-08T21:18:00.011+01:002012-02-26T22:34:01.731+01:002012-02-26T22:34:01.731+01:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour afficher un Diaporama Photobucket</h1><img itemprop="image" src="http://3.bp.blogspot.com/_kbpHBa3_G9o/TVGlrDvrDmI/AAAAAAAADk4/71e3d5iQXlY/s400/photobucket-slideshow-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Deux Gadgets Blogger pour afficher un Diaporama de Photobucket sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le Gadget proposé par Blogger.</p>Deux <strong>Gadgets Blogger</strong> pour afficher un <strong>Diaporama de Photobucket</strong> sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le <a href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank" title="Gadget Blogger Diaporama">Gadget proposé par Blogger</a>. Comme ce dernier, ils utilisent le <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> fourni par <a href="http://www.photobucket.com" target="_blank" title="Photobucket">Photobucket</a>. Cet hébergeur fournit un flux pour un <strong>Album</strong>, les <strong>photos d'un utilisateur</strong> ou le résultat d'une <strong>recherche d'image</strong>.<br /> <br /> <strong>Les deux variantes du Gadget</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://3.bp.blogspot.com/_kbpHBa3_G9o/TVGlrDvrDmI/AAAAAAAADk4/71e3d5iQXlY/s400/photobucket-slideshow-screen.png" alt="Gadget Blogger - Diaporama Photobucket" title="Gadget Blogger - Diaporama Photobucket" id="BLOGGER_PHOTO_ID_5571416373192232546" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/photobucket-slideshow-simple-b.xml" target="_blank" title="photobucket-slideshow-simple-b.xml">photobucket-slideshow-simple-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/photobucket-slideshow-simple-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Avec un titre et les légendes des photos</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://3.bp.blogspot.com/_kbpHBa3_G9o/TVGlrDvrDmI/AAAAAAAADk4/71e3d5iQXlY/s400/photobucket-slideshow-screen.png" alt="Gadget Blogger - Diaporama Photobucket" title="Gadget Blogger - Diaporama Photobucket" id="BLOGGER_PHOTO_ID_5571416373192232546" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/photobucket-slideshow-b.xml" target="_blank" title="photobucket-slideshow-b.xml">photobucket-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/photobucket-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;">Sans titre<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/photobucket-slideshow-simple-b.xml</strong><br /> <br /> Avec titre et légendes<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/photobucket-slideshow-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">FEED</span> : le Flux Media RSS à afficher.<br /> <br /> C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS : <img src="http://www.liens-du-vin.ch/_pic02/feed-icon-32x32.png" style="border: 0px; width: 16px; height: 16px; display: inline;" alt="RSS" title="Flux RSS"><br /> <br /> <br /> Pour un album Photobucket, ouvrir l'album et copier l'adresse marquée <strong>RSS</strong>. C'est une adresse de cette forme :<br /> <br /> http://feed266.photobucket.com/albums/ii244/<span style="color: rgb(255, 0, 0); font-weight: bold;">prac53</span>/feed.rss<br /> <br /> L'album doit être <b>public</b>.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. <br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> </div><br /> <br /> <ul><li>Avec titre et légendes</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">FEED</span> : le Flux Media RSS à afficher.<br /> <br /> C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS : <img src="http://www.liens-du-vin.ch/_pic02/feed-icon-32x32.png" style="border: 0px; width: 16px; height: 16px; display: inline;" alt="RSS" title="Flux RSS"><br /> <br /> <br /> Pour un album Photobucket, ouvrir l'album et copier l'adresse marquée <strong>RSS</strong>. C'est une adresse de cette forme :<br /> <br /> http://feed266.photobucket.com/albums/ii244/<span style="color: rgb(255, 0, 0); font-weight: bold;">prac53</span>/feed.rss<br /> <br /> L'album doit être <b>public</b>.<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">LNK</span> : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.<br /> <span style="font-weight: bold;">TIT</span> : le titre du diaporama. Par défaut le titre du Flux Media RSS de Photobucket.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul><li>Images sans perte de qualité</li> <li>Affiche les images en format *.jpg, *.gif et *.png</li> <li>Fond transparent ou couleurs à choix</li> <li>Temps d'affichage modifiable</li> <li>Ordre aléatoire des images en option</li> <li>Suppression possible de la barre de navigation</li> <li>Clic sur image désactivé par défaut</li> <li>Affichage des légendes de chaque image (version avec titre)</li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> Le diaporama <a href="http://www.liens-du-vin.ch/vision_vigne.htm" target="_blank" title="Diaporama - La Valeur de l'Homme, le travail de la vigne">La Valeur de l'Homme, le travail de la vigne</a>, affiché sur un Modèle <i>Picture Window</i> : <br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center;width: 287px;" src="http://www.liens-du-vin.ch/_pic062/exemple-photobucket.png" border="0" alt="Diaporama - La Valeur de l'Homme, le travail de la vigne" title="Diaporama - La Valeur de l'Homme, le travail de la vigne" /></center><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/photobucket-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Photobucket">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/photobucket-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Photobucket">Diaporama Photobucket avec un Gadget Google</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger - Diaporama des derniers messages">Diaporama des derniers messages avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2012/02/diaporama-pinterest-derniers-posts.html" target="_blank" title="Gadget Blogger - Diaporama Pinterest">Diaporama Pinterest avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.html" target="_blank" title="Gadget Blogger - Diaporama Flickr">Diaporama Flickr avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-photobucket.html" target="_blank" title="Gadget Blogger - Vignettes Photobucket">Un Gadget Blogger pour afficher les vignettes de Photobucket</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.html" target="_blank" title="Gadget Blogger - Diaporama Picasa">Diaporama Picasa avec un Gadget Blogger</a><br /> <br /> <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Créer un Diaporama à partir d'un Flux Média RSS</a><br /> <br /> <a href="http://sites.google.com/site/annuairevin/media-rss-feed-slideshow" target="_blank" title="Afficher des diaporamas sur Google Sites">Afficher des Diaporamas sur Google Sites</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <br /> </br><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-1172626141591075130?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/uncHRL3cSOqAErbjVu1GyYsfGSU/0/da"><img src="http://feedads.g.doubleclick.net/~a/uncHRL3cSOqAErbjVu1GyYsfGSU/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/uncHRL3cSOqAErbjVu1GyYsfGSU/1/da"><img src="http://feedads.g.doubleclick.net/~a/uncHRL3cSOqAErbjVu1GyYsfGSU/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/jXopot8WbnU" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/02/diaporama-photobucket-gadget-blogger.htmltag:blogger.com,1999:blog-30801821.post-47245652538174145162011-01-28T20:38:00.019+01:002011-08-26T20:21:47.503+02:002011-08-26T20:21:47.503+02:00<h1 itemprop="name" style="display: none;">Gadget Blogger pour afficher un Diaporama de Picasa</h1><img itemprop="image" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TUMcqJ52hvI/AAAAAAAADiQ/g_KTbcAFeAQ/s400/picasa-slideshow-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Deux Gadgets Blogger pour afficher un Diaporama Picasa sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le Gadget proposé par Blogger. Comme ce dernier, ils utilisent le Flux Media RSS fourni par Picasa.</p>Deux <strong>Gadgets Blogger</strong> pour afficher un <strong>Diaporama Picasa</strong> sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le <a href="http://aide-blogger-fr.blogspot.com/2008/02/un-diaporama-pour-blogger.html" target="_blank" title="Gadget Blogger Diaporama">Gadget proposé par Blogger</a>. Comme ce dernier, ils utilisent le <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> fourni par Picasa.<br /> <br /> <strong>Les deux variantes du Gadget</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TUMcqJ52hvI/AAAAAAAADiQ/g_KTbcAFeAQ/s400/picasa-slideshow-screen.png" alt="Gadget Blogger - Diaporama Picasa" title="Gadget Blogger - Diaporama Picasa" id="BLOGGER_PHOTO_ID_5567325074898716402" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/picasa-slideshow-simple-b.xml" target="_blank" title="picasa-slideshow-simple-b.xml">picasa-slideshow-simple-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/picasa-slideshow-simple-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a><br /> </center><br /> <br /> <ul><li>Avec un titre et les légendes des photos</li> </ul><br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TUMcqJ52hvI/AAAAAAAADiQ/g_KTbcAFeAQ/s400/picasa-slideshow-screen.png" alt="Gadget Blogger - Diaporama Picasa" title="Gadget Blogger - Diaporama Picasa" id="BLOGGER_PHOTO_ID_5567325074898716402" /><span style="font-size: 0.8em;"><a href="http://prac-gadget.googlecode.com/files/picasa-slideshow-b.xml" target="_blank" title="picasa-slideshow-b.xml">picasa-slideshow-b.xml</a></span><br /> <br /> <a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/picasa-slideshow-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget sur son Blog</strong><br /> <br /> Soit avec le bouton <span lang="en"><b>Add to Blogger</b></span>, soit par <strong>Présentation / Ajouter un gadget</strong>. Choisir ensuite <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;">Sans titre<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/picasa-slideshow-simple-b.xml</strong><br /> <br /> Avec titre et légendes<br /> <br /> <strong>http://prac-gadget.googlecode.com/files/picasa-slideshow-b.xml</strong><br /> <br /> </div><br /> <br /> <br /> <strong>Les paramètres des Gadgets</strong><br /> <br /> <ul><li>Sans titre</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">FEED</span> : le Flux Media RSS à afficher. Pour un album Picasa, ouvrir l'album et copier l'adresse marquée <strong>RSS</strong>. C'est une adresse de cette forme :<br /> <br /> http://picasaweb.google.com/data/feed/base/<br /> user/<span style="color: rgb(255, 0, 0); font-weight: bold;">philippe.chappuis</span>/albumid/<span style="color: rgb(51, 204, 0); font-weight: bold;">5545812725123933217</span>?alt=rss<br /> &amp;kind=photo&amp;hl=fr<br /> <br /> L'album doit être <b>public</b>. L'adresse peut être http ou <b>https</b> (connexion sécurisée).<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> </div><br /> <br /> <ul><li>Avec titre et légendes</li> </ul><br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight: bold;">FEED</span> : le Flux Media RSS à afficher. Pour un album Picasa, ouvrir l'album et copier l'adresse marquée <strong>RSS</strong>. C'est une adresse de cette forme :<br /> <br /> http://picasaweb.google.com/data/feed/base/<br /> user/<span style="color: rgb(255, 0, 0); font-weight: bold;">philippe.chappuis</span>/albumid/<span style="color: rgb(51, 204, 0); font-weight: bold;">5545812725123933217</span>?alt=rss<br /> &amp;kind=photo&amp;hl=fr<br /> <br /> L'album doit être <b>public</b>. L'adresse peut être http ou <b>https</b> (connexion sécurisée).<br /> <br /> <span style="font-weight: bold;">PWH</span> : la largeur des images en pixels.<br /> <span style="font-weight: bold;">PHT</span> : la hauteur des images en pixels.<br /> <br /> Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.<br /> <br /> <span style="font-weight: bold;">LNK</span> : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.<br /> <span style="font-weight: bold;">TIT</span> : le titre du diaporama. Par défaut le titre de l'album Picasa.<br /> <br /> <span style="font-weight: bold;">DTime</span> : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).<br /> <span style="font-weight: bold;">TTime</span> : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).<br /> <br /> <span style="font-weight: bold;">RND</span> : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).<br /> <span style="font-weight: bold;">CLP</span> : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).<br /> <br /> <span style="font-weight: bold;">NAB</span> : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).<br /> <br /> <span style="font-weight: bold;">SCOL</span> : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> <span style="font-weight: bold;">BCOL</span> : #rrggbb. La couleur de la bordure du diaporama.<br /> <br /> <span style="font-weight: bold;">TCOL</span> : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">LCOL</span> : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.<br /> <span style="font-weight: bold;">CCOL</span> : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.<br /> <br /> </div><br /> <br /> <br /> <strong>Les caractéristiques des gadgets</strong><br /> <br /> <ul><li>Images sans perte de qualité jusqu'à 800 pixels de large</li> <li>Affiche les images en format *.jpg, *.gif et *.png</li> <li>Fond transparent ou couleurs à choix</li> <li>Temps d'affichage modifiable</li> <li>Ordre aléatoire des images en option</li> <li>Clic sur image désactivé par défaut</li> <li>Affichage des légendes de chaque image (version avec titre)</li> </ul><br /> <br /> <strong>Un exemple</strong><br /> <br /> Le diaporama des <a href="http://viti-vino-feed.blogspot.com/2010/12/domaines-viticoles-suisse.html" target="_blank" title="Diaporama - Domaines Viticoles Suisse">plus beaux domaines viticoles de Suisse</a>, affiché sur un Modèle <i>Picture Window</i> : <br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center;width: 281px; height: 303px;" src="http://www.liens-du-vin.ch/_pic062/exemple-diaporama.jpg" border="0" alt="Diaporama - Domaines Viticoles Suisse" title="Diaporama - Domaines Viticoles Suisse" /></center><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Gadget Google - Diaporama Picasa">Diaporama Picasa avec un Gadget Google</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Gadget Blogger - Diaporama des derniers messages">Diaporama des derniers messages avec un gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-photobucket-gadget-blogger.html" target="_blank" title="Gadget Blogger - Diaporama Photobucket">Diaporama Photobucket avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/gadget-blogger-diaporama-flickr.html" target="_blank" title="Gadget Blogger - Diaporama Flickr">Diaporama Flickr avec un Gadget Blogger</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-picasa.html" target="_blank" title="Gadget Blogger - Vignettes Picasa">Un Gadget Blogger pour afficher les vignettes de Picasa</a><br /> <br /> <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Créer un Diaporama à partir d'un Flux Média RSS</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <br /> </br><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-4724565253817414516?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/R8MWMnMNS7QtBUEW4pATbWGhqi0/0/da"><img src="http://feedads.g.doubleclick.net/~a/R8MWMnMNS7QtBUEW4pATbWGhqi0/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/R8MWMnMNS7QtBUEW4pATbWGhqi0/1/da"><img src="http://feedads.g.doubleclick.net/~a/R8MWMnMNS7QtBUEW4pATbWGhqi0/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/uu7xgj2JjVY" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com13http://viti-vino.blogspot.com/2011/01/gadget-diaporama-picasa.htmltag:blogger.com,1999:blog-30801821.post-25770699112104070472011-01-18T23:49:00.014+01:002011-08-26T20:24:52.163+02:002011-08-26T20:24:52.163+02:00<h1 itemprop="name" style="display: none;">Le Gadget Blogger pour afficher les Vignettes de Photobucket</h1><img itemprop="image" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TTYZtMDPXFI/AAAAAAAADco/yzaKNVpUQ-8/s400/photobucket-vignettes-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket.</p>Un <strong>Gadget Blogger</strong> pour afficher les vignettes d'un <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> de <a href="http://www.photobucket.com" target="_blank" title="Photobucket">Photobucket</a>.<br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TTYZtMDPXFI/AAAAAAAADco/yzaKNVpUQ-8/s400/photobucket-vignettes-screen.png" title="Gadget Blogger - Vignettes Photobucket" alt="Gadget Blogger - Vignettes Photobucket" id="BLOGGER_PHOTO_ID_5563662653782449234" /><br /> <br /> <br /> <strong>Ajouter le Gadget, avec ce bouton Add to Blogger</strong><br /> <br /> <center><a href="http://www.blogger.com/add-gadget?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget, avec Présentation / Ajouter un Gadget</strong><br /> <br /> Sélectionner <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml</strong><br /> <br /> </div><br /> <br /> <center><br /> <a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml" target="_blank" title="Gadget Blogger - Vignettes Photobucket"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 120px; height: 60px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TTYadO9zHAI/AAAAAAAADcw/EU08knSdC_g/s400/photobucket-vignettes-thumb.png" title="Gadget Blogger - Vignettes Photobucket" alt="Gadget Blogger - Vignettes Photobucket" id="BLOGGER_PHOTO_ID_5563663479198653442" /></a><br /> <a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml" target="_blank" title="Gadget Blogger - Vignettes Photobucket"><span style="font-size:85%;">photobucket-thumb-rssfeed.xml</span></a></center><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <center><a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/photobucket-thumb-rssfeed.xml" title="Gadget Blogger - Vignettes Photobucket"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic062/photobucket-thumb-parametres.png" alt="Gadget Blogger - Vignettes photobucket" title="Gadget Blogger - Vignettes Photobucket" /></a></center><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="font-weight: bold;">FEED</span> : Le Flux Media à utiliser.<br /> C'est l'adresse de l'Album, d'une recherche ou d'un utilisateur indiquée par l'icône RSS : <img src="http://www.liens-du-vin.ch/_pic02/feed-icon-32x32.png" style="border: 0px; width: 16px; height: 16px; display: inline;" alt="RSS" title="Flux RSS"><br /> <br /> <span style="font-weight: bold;">NBC</span> : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)<br /> <br /> <span style="font-weight: bold;">SIZE </span>: La taille des vignettes, en pixels (de 36 à 160, 72 par défaut)<br /> <br /> <span style="font-weight: bold;">SHA </span>: Ombre portée sous les vignettes (Oui - Non)<br /> <br /> <span style="font-weight: bold;">CLP </span>: Ouvrir l'image d'origine sur clic (Oui - Non), oui par défaut<br /> <br /> <span style="font-weight: bold;">URL</span> : L'URL du lien sur le titre<br /> <br /> <span style="font-weight: bold;">TITRE</span> : Le titre<br /> <br /> <span style="font-weight: bold;">LCOL</span> : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> </div><br /> <br /> <br /> <strong>Le résultat</strong><br /> <br /> Les vignettes de mon <a href="http://s266.photobucket.com/albums/ii244/prac53/" target="_blank" title="Album Photobucket - Swiss Wineries">Album Photobucket</a>, <a href="http://www.liens-du-vin.ch/_winemap/maps-clos-domaines-chateaux.htm" target="_blank" title="Swiss Wineries">Swiss Wineries</a>. Vignettes de 36 x 36 sur un Modèle <i>Picture Window</i>&nbsp;:&nbsp; <br /> <br /> <img style="display:block; margin:0px auto 10px; text-align:center;width: 281px; height: 283px;" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TTw_J77y68I/AAAAAAAADgc/Q1kolqSzlFQ/s400/vignettes-photobucket.png" border="0" alt="Vignettes Photobucket" title="Vignettes Photobucket" id="BLOGGER_PHOTO_ID_5565392679462955970" /><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Gadget Google - message du Blog">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'info</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/photobucket-thumbnails.htm" target="_blank" title="Un Gadget Google - Vignettes Photobucket">Un Gadget Google pour afficher les vignettes d'un Flux Media RSS de Photobucket</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-picasa.html" target="_blank" title="Un Gadget Blogger - Vignettes Picasa">Un Gadget Blogger pour afficher les vignettes d'un Album Picasa</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/vignettes-flickr.html" target="_blank" title="Un Gadget Blogger - Vignettes Flickr">Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos de Flickr</a><br /> <br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-2577069911210407047?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/mwMK8ummXkfJp--SMLadPfME83k/0/da"><img src="http://feedads.g.doubleclick.net/~a/mwMK8ummXkfJp--SMLadPfME83k/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/mwMK8ummXkfJp--SMLadPfME83k/1/da"><img src="http://feedads.g.doubleclick.net/~a/mwMK8ummXkfJp--SMLadPfME83k/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/f5B4eIN98YQ" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-photobucket.htmltag:blogger.com,1999:blog-30801821.post-76775877724686679132011-01-14T21:08:00.015+01:002011-08-26T20:27:38.278+02:002011-08-26T20:27:38.278+02:00<h1 itemprop="name" style="display: none;">Le Gadget Blogger pour afficher les Vignettes de Flickr</h1><img itemprop="image" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TUsM5rWJZzI/AAAAAAAADjc/-VbJwk9UWTU/s400/flickr-vignettes-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos (Photoset) de Flickr.</p>Un <strong>Gadget Blogger</strong> pour afficher les vignettes d'un <a href="http://www.flickr.com/photos/prac53/sets/72157609076361497/" target="_blank" title="Photoset Flickr">ensemble de photos (Photoset)</a> de <a href="http://www.flickr.com" target="_blank" title="Flickr">Flickr</a>.<br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TUsM5rWJZzI/AAAAAAAADjc/-VbJwk9UWTU/s400/flickr-vignettes-screen.png" title="Gadget Blogger - Vignettes Flickr" alt="Gadget Blogger - Vignettes Flickr" id="BLOGGER_PHOTO_ID_5569559549201442610" /><br /> <br /> <br /> <strong>Ajouter le Gadget, avec ce bouton Add to Blogger</strong><br /> <br /> <center><a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/flickr-thumbnails-b.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget, avec Présentation / Ajouter un Gadget</strong><br /> <br /> Sélectionner <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground; padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>http://prac-gadget.googlecode.com/files/flickr-thumbnails-b.xml</strong><br /> <br /> </div><br /> <br /> <center><br /> <a href="http://prac-gadget.googlecode.com/files/flickr-thumbnails-b.xml" target="_blank" title="Gadget Blogger - Vignettes Flickr"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 120px; height: 60px; border: 1px solid rgb(222, 112, 8);" src="http://2.bp.blogspot.com/_kbpHBa3_G9o/TUsNl4gx2cI/AAAAAAAADjk/k7D2WMJ26SA/s400/flickr-vignettes-thumb.png" title="Gadget Blogger - Vignettes Flickr" alt="Gadget Blogger - Vignettes Flickr" id="BLOGGER_PHOTO_ID_5569560308649941442" /></a><br /> <a href="http://prac-gadget.googlecode.com/files/flickr-thumbnails-b.xml" target="_blank" title="Gadget Blogger - Vignettes Flickr"><span style="font-size:85%;">flickr-thumbnails-b.xml</span></a></center><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <center><a href="http://prac-gadget.googlecode.com/files/flickr-thumbnails-b.xml" title="Gadget Blogger - Vignettes Flickr"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic062/parametres-vignettes-flickr.jpg" alt="Gadget Blogger - Vignettes Flickr" title="Gadget Blogger - Vignettes Flickr" /></a></center><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="font-weight: bold;">SET</span> : Identifiant du Photoset (ensemble d'images) à afficher.<br /> <br /> Ouvrir le Set, l'adresse est de cette forme&nbsp;:&nbsp;<br /> <br /> http://www.flickr.com/photos/prac53/sets/<span style="color: #cc0000;">72157609076361497</span>/<br /> <br /> <span style="color: #cc0000;">72157609076361497</span> est l'identifiant du Set.<br /> <br /> <span style="font-weight: bold;">NBC</span> : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)<br /> <br /> <span style="font-weight: bold;">SIZE </span>: La taille des vignettes, en pixels (de 36 à 240, 72 par défaut)<br /> <br /> <span style="font-weight: bold;">SHA </span>: Ombre portée sous les vignettes (Yes - No)<br /> <br /> <span style="font-weight: bold;">CLP </span>: Ouvrir l'image d'origine sur clic (Yes - No). Yes (oui) par défaut<br /> <br /> <span style="font-weight: bold;">URL</span> : L'URL du lien sur le titre<br /> <br /> <span style="font-weight: bold;">TITRE</span> : Le titre<br /> <br /> <span style="font-weight: bold;">LCOL</span> : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> </div><br /> <br /> <br /> <strong>Le résultat</strong><br /> <br /> Les vignettes du Photoset <a href="http://www.flickr.com/photos/prac53/sets/72157609076361497/" target="_blank" title="Album Photobucket - Swiss Wineries">Swiss Wineries</a>. Vignettes de 36 pixels, avec ombre portée, sur un modèle <i>Picture Window</i>&nbsp;:&nbsp; <br /> <br /> <img style="display:block; margin:0px auto 10px; text-align:center;width: 281px; height: 283px;" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TUsSzuWkTDI/AAAAAAAADjs/naU179I26Pc/s400/exemple-vignettes-flickr.jpg" border="0" alt="Vignettes Flickr" title="Vignettes Flickr" id="BLOGGER_PHOTO_ID_5569566043999063090" /><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://www.liens-du-vin.ch/flickr-thumbnails.htm" target="_blank" title="Gadget Google dans une message du Blog">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'info</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/flickr-thumbnails.htm" target="_blank" title="Un Gadget Google - Vignettes Flickr">Un Gadget Google pour afficher les vignettes d'un ensemble de Photos de Flickr</a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2011/01/photos-flickr-mur-images-tiltviewer.html" target="_blank" title="Ses photos Flickr sur un mur d'images">Ses photos Flickr sur un mur d'images</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-picasa.html" target="_blank" title="Un Gadget Blogger - Vignettes Picasa">Un Gadget Blogger pour afficher les vignettes d'un Album Picasa</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-photobucket.html" target="_blank" title="Un Gadget Blogger - Vignettes Photobucket">Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket</a><br /> <br /> Une video : <a href="http://www.liens-du-vin.ch/video-photos-sharing.htm" target="_blank" title="Video : sauvegarde et partage de photos sur Internet">Sauvegarde et partage de photos sur Internet</a><br /> <br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-7677587772468667913?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/MzejWeQ3y7oeko6GQFJuVrkyUD8/0/da"><img src="http://feedads.g.doubleclick.net/~a/MzejWeQ3y7oeko6GQFJuVrkyUD8/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/MzejWeQ3y7oeko6GQFJuVrkyUD8/1/da"><img src="http://feedads.g.doubleclick.net/~a/MzejWeQ3y7oeko6GQFJuVrkyUD8/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/lhvHBUkBpEI" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/01/vignettes-flickr.htmltag:blogger.com,1999:blog-30801821.post-16261381612073289492011-01-12T22:15:00.029+01:002011-08-26T20:30:46.115+02:002011-08-26T20:30:46.115+02:00<h1 itemprop="name" style="display: none;">Le Gadger Blogger pour afficher les Vignettes de Picasa Albums Web</h1><img itemprop="image" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TUMcqJ52hvI/AAAAAAAADiQ/g_KTbcAFeAQ/s400/picasa-slideshow-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Deux Gadgets Blogger pour afficher un Diaporama Picasa sur son Blog. Avec ces deux gadgets nous avons d'avantage de fonctionnalités que le Gadget proposé par Blogger.</p>Un <strong>Gadget Blogger</strong> pour afficher les vignettes d'un <a href="http://picasaweb.google.com/home" target="_blank" title="Picasa Albums Web">album Picasa</a> ou les dernières images téléchargées sur son compte.<br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TS4bB9IQFYI/AAAAAAAADbY/2NUSEgeBVYs/s400/picasa-vignettes-screen.PNG" title="Gadget Blogger - Vignettes Picasa" alt="Gadget Blogger - Vignettes Picasa" id="BLOGGER_PHOTO_ID_5561412310252131714" /><br /> <br /> <br /> <strong>Ajouter le Gadget, avec ce bouton Add to Blogger</strong><br /> <br /> <center><a href="http://www.blogger.com/add-gadget?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget, avec Présentation / Ajouter un Gadget</strong><br /> <br /> Sélectionner <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml</strong><br /> <br /> </div><br /> <br /> <center><a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml" target="_blank" title="Gadget Blogger - Vignettes Picasa"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 120px; height: 60px; border: 1px solid rgb(222, 112, 8);" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TS4juALgvbI/AAAAAAAADbo/h9DiWIpABfY/s400/picasa-vignettes-thumb.png" title="Gadget Blogger - Vignettes Picasa" alt="Gadget Blogger - Vignettes Picasa" id="BLOGGER_PHOTO_ID_5561421863078378930" /></a><a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml" target="_blank" title="Gadget Blogger - Vignettes Picasa"><span style="font-size:85%;">picasa-album-photostream.xml</span></a></center><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <center><a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml" title="Gadget Blogger - Vignettes Picasa"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; border: 1px solid rgb(222, 112, 8);" src="http://www.liens-du-vin.ch/_pic062/vignettes-parametres.png" alt="Gadget Blogger - Vignettes Picasa" title="Gadget Blogger - Vignettes Picasa" /></a></center><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="font-weight: bold;">USR</span> : Le nom de l'utilisateur Picasa<br /> <br /> <span style="font-weight: bold;">AID</span> : L'dentifiant de l'album. Vide si affichage des dernières images téléchargées.<br /> Pour obtenir le nom de l'utilisateur et l'identifiant de l'article, ouvrir un album et copier l'adresse marquée <b>RSS</b>. C'est une URL de cette forme :<br /> <br /> http://picasaweb.google.com/data/feed/base/user/<span style="color: rgb(255, 0, 0); font-weight: bold;">philippe.chappuis</span>/albumid/<span style="color: rgb(51, 204, 0); font-weight: bold;">5545812725123933217</span>?alt=rss&amp;kind=photo&amp;hl=fr<br /> <br /> L'utilisateur est <span style="color: rgb(255, 0, 0); font-weight: bold;">philippe.chappuis</span> et l'identifiant de l'album est <span style="color: rgb(51, 204, 0); font-weight: bold;">545812725123933217</span><br /> <br /> <span style="font-weight: bold;">NBC</span> : Le nombre de vignettes à afficher (de 1 à 200, 20 par défaut)<br /> <br /> <span style="font-weight: bold;">SIZE </span>: La largeur des vignettes, en pixels (de 32 à 160, 72 par défaut)<br /> <span style="font-weight: bold;">HSIZE </span>: La hauteur des vignettes, en pixels (de 32 à 160). <br /> <span style="font-weight: bold;">CROP </span>: Recadrage (Cropped), Yes ou No. Défaut No (non).<br /> Yes (oui), l image originale est recadrée dans un carré de taille SIZE.<br /> No (non), l'image originale est placée dans un rectangle de largeur SIZE.<br /> <br /> <span style="font-weight: bold;">SHA </span>: Ombre portée sous les vignettes (Oui - Non), défaut non.<br /> <br /> <span style="font-weight: bold;">CLP </span>: Ouvrir l'image sur un click (Oui - Non), défaut oui.<br /> <br /> <span style="font-weight: bold;">URL</span> : L'URL du lien sur le titre<br /> <br /> <span style="font-weight: bold;">TITRE</span> : Le titre<br /> <br /> <span style="font-weight: bold;">LCOL</span> : La couleur du lien sur le titre (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> </div><br /> <br /> <br /> <strong>Le résultat</strong><br /> <br /> Mes dernières images sur <a href="http://picasaweb.google.com/philippe.chappuis" title="Picasa Albums Web">Picasa</a>, affichées sous forme de vignettes 36 x 36, sur un Modèle <i>Picture Window</i>&nbsp;:&nbsp; <br /> <br /> <img style="display:block; margin:0px auto 10px; text-align:center;width: 281px; height: 352px;" src="http://2.bp.blogspot.com/_kbpHBa3_G9o/TTrvMCvNWCI/AAAAAAAADf4/dNHwombDMX8/s400/vignettes-picasa.png" border="0" alt="Vignettes Picasa" title="Vignettes Picasa" id="BLOGGER_PHOTO_ID_5565023279742015522" /><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Gadget Google - message du Blog">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/picasa-photostream-gadget-script.htm" target="_blank" title="Un Gadget Google - Vignettes Picasa">Un Gadget Google pour afficher les vignettes d'un Album Picasa</a><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/2008/12/des-gadgets-pour-son-blog.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-photobucket.html" target="_blank" title="Un Gadget Blogger - Vignettes de Photobucket">Un Gadget Blogger pour afficher les vignettes d'un Flux Media RSS de Photobucket</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/vignettes-flickr.html" target="_blank" title="Un Gadget Blogger - Vignettes de Flickr">Un Gadget Blogger pour afficher les vignettes d'un ensemble de photos de Flickr</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/01/gadget-blogger-commentaires-recents.html" target="_blank" title="Un Gadget Blogger - Commentaires récents">Un Gadget Blogger pour afficher les derniers commentaires du Blog</a><br /> <br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-1626138161207328949?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/SO-Rz2Ib9zlwQSqOjhjFNgRHz5A/0/da"><img src="http://feedads.g.doubleclick.net/~a/SO-Rz2Ib9zlwQSqOjhjFNgRHz5A/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/SO-Rz2Ib9zlwQSqOjhjFNgRHz5A/1/da"><img src="http://feedads.g.doubleclick.net/~a/SO-Rz2Ib9zlwQSqOjhjFNgRHz5A/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/orM5TF1WnHQ" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com17http://viti-vino.blogspot.com/2011/01/gadget-blogger-vignettes-picasa.htmltag:blogger.com,1999:blog-30801821.post-70306281704472657702011-01-11T00:11:00.027+01:002012-05-21T22:17:18.759+02:002012-05-21T22:17:18.759+02:00<h1 itemprop="name" style="display: none;">Le Gadget Blogger pour afficher les Commentaires récents</h1><img itemprop="image" src="http://2.bp.blogspot.com/_kbpHBa3_G9o/TSuS-8fptwI/AAAAAAAADaQ/Myeku3_cLUQ/s400/blogger-commentaires-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Un Gadget Blogger pour afficher les derniers commentaires d'un Blog.</p><br /> Il existe plusieurs versions de ce Gadget. Ils sont pour la plupart en anglais ou présentent le défaut d'afficher les caractères spéciaux avec leur valeur affichée en <a href="http://www.w3schools.com/tags/ref_entities.asp" target="_blank" title="entité HTML">entité HTML</a>. Ainsi l'apostrophe est affichée &amp;#39; (janvier 2011).<br /> <br /> Le <a href="http://www.madtomatoe.com/recent-comments-widget-for-blogger/" target="_blank" title="Gadget MadTomatoe">Gadget de Madtomatoe</a> affiche l'apostrophe correctement, mais le texte de présentation des commentaires est en anglais. Il s'agit en réalité d'un script javascript à insérer dans un <strong>gadget HTML / JAVASCRIPT</strong>.<br /> <br /> Le <strong>Gadget Blogger lecteur de Flux</strong>, permet d'afficher le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" title="Flux des commentaires" target="_blank">Flux des commentaires</a>, mais il n'affiche pas le texte du commentaire lui-même !<br /> <br /> J ai donc réalisé un véritable <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> qui est en français et affiche correctement les caractères spéciaux.<br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 120px; border: 1px solid rgb(222, 112, 8);" src="http://2.bp.blogspot.com/_kbpHBa3_G9o/TSuS-8fptwI/AAAAAAAADaQ/Myeku3_cLUQ/s400/blogger-commentaires-screen.png" alt="Gagdet Blogger - Commentaires récents" title="Gagdet Blogger - Commentaires récents" id="BLOGGER_PHOTO_ID_5560699775007438594" /><br /> <br /> <br /> <strong>Ajouter le Gadget, avec ce bouton Add to Blogger</strong><br /> <br /> <center><a href="http://www.blogger.com/add-gadget?url=http://prac-gadget.googlecode.com/files/commentaires-recents.xml" target="_blank" title="Ajouter ce Gadget à Blogger"><img alt="Ajouter ce Gadget à Blogger" title="Ajoutez ce Gadget à Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></center><br /> <br /> <br /> <strong>Ajouter le Gadget, avec Présentation / Ajouter un Gadget</strong><br /> <br /> Sélectionner <strong>Ajouter votre propre (Gadget)</strong>. Saisir l'URL du gadget à ajouter&nbsp;:&nbsp;<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>http://prac-gadget.googlecode.com/files/commentaires-recents.xml</strong><br /> <br /> </div><br /> <br /> <center><a href="http://prac-gadget.googlecode.com/files/commentaires-recents.xml" target="_blank" title="Gadget Blogger - Commentaires récents"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 120px; height: 60px; border: 1px solid rgb(222, 112, 8);" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TSuUYi_YJVI/AAAAAAAADaY/Q3h3zTtf7Ow/s400/blogger-commentaires-thumb.png" title="Gadget Blogger - Commentaires récents" alt="Gadget Blogger - Commentaires récents" id="BLOGGER_PHOTO_ID_5560701314349409618" /></a><a href="http://prac-gadget.googlecode.com/files/commentaires-recents.xml" target="_blank" title="Gadget Blogger - Commentaires récents"><span style="font-size:85%;">commentaires-recents.xml</span></a></center><br /> <br /> <br /> <strong>Les paramètres du Gadget</strong><br /> <br /> <img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px;" src="http://www.liens-du-vin.ch/_pic062/commentaires-parametres.png" alt="Paramètres - Commentaires récents" title="Paramètres - Commentaires récents" border="0" /><br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <br /> <span style="font-weight:bold;">BLOG</span> : L'adresse du Blog, par exemple viti-vino.blogspot.com.<br /> <b>Important&nbsp;:&nbsp;</b>L adresse sans <b>http://</b><br /> <br /> <span style="font-weight:bold;">NBC</span> : Le nombre de commentaires à afficher (de 1 à 20, 5 par défaut)<br /> <br /> <span style="font-weight:bold;">MAX </span>: La longueur du texte (de 50 à 500, 150 par défaut)<br /> <br /> <span style="font-weight:bold;">DATE</span> : Faire figurer la date (Oui ou Non, par défaut Oui)<br /> <br /> <span style="font-weight:bold;">TBLOG</span> : Afficher le titre du Blog (Oui ou Non, par défaut Oui)<br /> <br /> <span style="font-weight:bold;">TITRE</span> : Faire figurer le titre du message (Oui ou Non, par défaut Oui)<br /> <br /> <span style="font-weight:bold;">AUTEUR</span> : Faire figurer l'auteur (Oui ou Non, par défaut Oui)<br /> <br /> <span style="font-weight:bold;">TOP</span> : Ouvrir les liens dans la même fenêtre (Oui ou Non, par défaut Non)<br /> <br /> <span style="font-weight:bold;">TAILLE</span> : Taille police en % (par défaut 85)<br /> <br /> <span style="font-weight:bold;">LCOL</span> : La couleur des liens (par exemple #669922 ou green), par défaut le Gadget prend la couleur définie dans le modèle du Blog. Il faut préciser une couleur uniquement pour les anciens modèles de Blog, ou pour modifier la valeur standard.<br /> <br /> <span style="font-weight:bold;">TCOL</span> : La couleur du texte.<br /> <br /> <span style="font-weight:bold;">BCOL</span> : La couleur du fond.<br /> <br /> </div><br /> <br /> <br /> <strong>Le résultat</strong><br /> <br /> Les derniers commentaires du <a href="http://viti-vino.blogspot.com" target="_blank" title="Blog de Prac">Blog de Prac</a> sur un Modèle <i>Picture Window</i>&nbsp;:&nbsp;<br /> <br /> <img style="display:block; margin:0px auto 10px; text-align:center; width: 286px; height: 392px;" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TSuZ8F_iJUI/AAAAAAAADag/J7AxXPU-tWM/s400/commentaires-picture-window.png" border="0" alt="Blog de Prac - Commentaires" title="Blog de Prac - Commentaires" id="BLOGGER_PHOTO_ID_5560707422598866242" /><br /> <br /> <strong>Flux des commentaires</strong><br /> <br /> Le <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Les Flux de Blogger">Flux des commentaires</a> doit être activé pour le Blog. Pour cela utiliser <strong>Paramètres / Flux d'actualisation</strong>. Clic sur <strong>Mode Avancé</strong>, puis choisir&nbsp;:&nbsp;<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> Flux de commentaires de Blog : <b>Complet</b><br /> Flux de commentaires par message : <b>Complet</b><br /> <br /> </div><br /> <br /> <br /> <strong>Gadget Google ou Gadget Blogger</strong><br /> <br /> Un <a href="http://aide-blogger-fr.blogspot.com/2008/11/inserer-un-gadget-google-dans-le-corps.html" target="_blank" title="Gadget Google - message du Blog">Gadget Google</a> peut être placé dans un message du Blog. Un <a href="http://code.google.com/intl/fr/apis/blogger/docs/gadgets/gadgets_for_blogger.html" target="_blank" title="Gadget Blogger">Gadget Blogger</a> ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).<br /> <br /> <br /> <strong>Versions et mentions légales</strong><br /> <br /> Ancienne version&nbsp;:&nbsp;<a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/commentaires-recents.xml" target="_blank" title="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/commentaires-recents.xml">commentaires-recents.xml</a>. Hébergement sur <a href="https://developers.google.com/gadgets/docs/tools?hl=fr-FR" target="_blank" title="IG Gadget">IG Gadget</a>, obsolet<br/> <br/> <a href="http://www.google.com/webmasters/gadgets.html" target="_blank" title="Gadgets fournis par Google">Gadgets</a> fournis par Google.<br/> <br /><br /> <strong>Une alternative : partager ses abonnements de Google Reader</strong> <br /><br /> <a href="http://support.google.com/reader/?hl=fr" target="_blank" title="Google Reader">Google Reader</a> permet de créer un <strong><em>thème</em></strong> avec un <a href="http://aide-blogger-fr.blogspot.com/2007/10/flux-rss-quelques-explications.html" target="_blank" title="Flux RSS">Flux RSS</a>. En s'abonnant au <strong><em>Flux des Commentaires d'un Blog</em></strong>, il est possible de <a href="http://www.liens-du-vin.ch/lecteur-flux-google-reader.htm" target="_blank" title="Partager ses abonnements de Google reader">partager ses abonnements</a>.<br/><br/> Par exemple, le thème suivant affiche les <a href="http://www.google.com/reader/bundle/user/05980836729406198703/bundle/Commentaires" target="_blank" title="Derniers commentaires de mes Blogs">derniers commentaires de mes Blogs</a>, en utilisant un <a href="http://www.liens-du-vin.ch/gadget-blogroll-google-reader.htm" target="_blank" title="Gadget Google">Gadget Google</a>&nbsp;:&nbsp; <br/> <br/> <div style="width: 378px; border: solid 1px #de7008;margin: auto;"> <iframe width="378" height="860" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/blogroll-google-reader.xml&up_UID=05980836729406198703&up_BNA=Commentaires&up_TIT=Commentaires de mes Blogs&up_AUT=Prac&up_WBO=false&up_COL=khaki&up_NBR=18&up_CCOL=%23f6f6f6">Gadget Google - Afficher ses flux de Google Reader sur son Site ou son Blog - http://www.liens-du-vin.ch/gadget-blogroll-google-reader.htm</iframe> </div> <br/> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/blogroll-google-reader.xml" style="border: none; text-decoration: none;" target="_blank" title="Afficher un thème - blogroll-google-reader.xml"><img alt="Ajouter ce gadget à Google" src="http://prac-gadget.googlecode.com/svn/branches/add-to-google.gif" title="Ajouter ce gadget à Google" border="0" width="104"></a></div> <br/><br/> <strong>Plus d'informations</strong><br /> <br /> <a href="http://www.liens-du-vin.ch/gadget-blogroll-google-reader.htm" target="_blank" title="Un Gadget Google pour partager ses abonnements de Google Reader">Un Gadget Google pour partager ses abonnements de Google Reader</a><br /> <br /> <a href="http://viti-vino.blogspot.com/p/gadgets.html" target="_blank" title="Des Gadgets pour son Blog">Des Gadgets pour son Blog</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2011/02/diaporama-derniers-messages-blog.html" target="_blank" title="Un Gadget Blogger - Derniers messages d'un Blog">Afficher un diaporama avec les derniers messages d'un Blog</a><br /> <br /><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-7030628170447265770?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/9L-w9zIykyARrko8ufbFfNn2Am4/0/da"><img src="http://feedads.g.doubleclick.net/~a/9L-w9zIykyARrko8ufbFfNn2Am4/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/9L-w9zIykyARrko8ufbFfNn2Am4/1/da"><img src="http://feedads.g.doubleclick.net/~a/9L-w9zIykyARrko8ufbFfNn2Am4/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/Sd3SzNRhMaY" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com69http://viti-vino.blogspot.com/2011/01/gadget-blogger-commentaires-recents.htmltag:blogger.com,1999:blog-30801821.post-10060088080278693722011-01-06T21:17:00.015+01:002011-08-26T20:39:26.280+02:002011-08-26T20:39:26.280+02:00<h1 itemprop="name" style="display: none;">Un mur d'images avec une galerie en xml</h1><img itemprop="image" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TSYkUmd2RzI/AAAAAAAADZg/FTDIWtjCDlg/s400/tiltviewer-screen.png" style="display: none;" /><p itemprop="description" style="display: none;">Un Diaporama en 3D sous la forme d'un mur d'images avec Tiltviewer</p>Les diaporamas basé sur un <a href="http://www.liens-du-vin.ch/slide-show-media-rss.html" target="_blank" title="Flux Media RSS">Flux Media RSS</a> sont limités en terme d'effets graphiques. Il existe de nombreux prestataires tiers qui proposent un <strong>Diaporama en Flash</strong> avec des effets très élaborés.<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 /> <br /> Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash <strong>tiltviewer.swf</strong>.<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-gallery.xml" title="tiltviewer-gallery.xml" target="_blank"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 200px; height: 165px;" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TSYkUmd2RzI/AAAAAAAADZg/FTDIWtjCDlg/s400/tiltviewer-screen.png" alt="tiltviewer-gallery.xml" title="tiltviewer-gallery.xml" id="BLOGGER_PHOTO_ID_5559170726377178930" border="0" /></a><span style="font-size:78%;"><a href="http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml" target="_blank" title="Mur d'images avec Tiltviewer">tiltviewer-gallery.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 méthode 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="Un gadget Google dans le corps du message">message du Blog d'Aide pour Blogger</a>.<br /> <br /> Pour ce gadget, les codes sont donnés sur la page&nbsp;:&nbsp;<a href="http://www.liens-du-vin.ch/galerie-mur-images.htm" target="_blank" title="Un gadget Google pour afficher un mur d'images">un Gadget Google pour afficher un mur d'images avec Tiltviewer</a>.<br /> <br /> <br /> <strong>Le code du iframe</strong><br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> &lt;iframe<br /> style="width: 560px; height: 430px;"<br /> src="<br /> http://www.gmodules.com/gadgets/ifr?<br /> url=http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml<br /> <br /> &up_XML=URL du fichier xml decrivant la galerie<br /> &up_SWF=URL du lecteur Flash (tiltviewer.swf)<br /> <br /> <b>Important :</b> Les 2 fichiers <b>*.xml</b> et <b>*.swf</b> doivent être hébergés sur le même <b>Domaine Internet</b><br /> <br /> &up_TIT=titre du diaporama<br /> &up_LNK=lien sur le titre du diaporama<br /> <br /> &up_SW=largeur du diaporama<br /> &up_SH=hauteur du diaporama<br /> &up_MAX=la plus grande dimension de la plus grande image 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 /> <br /> &up_BFCOL=%23rrggbb couleur de l'entourage<br /> &up_BDCOL=%23rrggbb couleur de la bordure<br /> &up_CCOL=%23rrggbb couleur du conteneur<br /> "<br /> allowTransparency="true"<br /> frameborder="0"<br /> scrolling="no"&gt;<br /> &lt;/iframe&gt;<br /> <br /> </div><br /> <br /> <br /> <strong>Le fichier xml</strong><br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> &lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?&gt;<br /> &lt;tiltviewergallery&gt;<br /> &nbsp;&lt;photos&gt;<br /> <br /> &nbsp;&nbsp;&nbsp;&lt;photo imageurl="URL image" linkurl="lien plus d'infos"&gt;<br /> &nbsp;&nbsp;&nbsp;&lt;title&gt;titre de l'image&lt;/title&gt;<br /> &nbsp;&nbsp;&nbsp;&lt;description&gt;<br /> <br /> &nbsp;&nbsp;&nbsp;&lt;![CDATA[ La description de l image.<br /> Les tags &lt;u&gt;, &lt;i&gt; et &lt;b&gt; sont admis ]]&gt; <br /> &nbsp;&nbsp;&nbsp;&lt;/description&gt;<br /> &nbsp;&lt;/photo&gt;<br /> &nbsp;&nbsp;&nbsp;........................<br /> <br /> &nbsp;&nbsp;&nbsp;&lt;/photos&gt;<br /> &lt;tiltviewergallery&gt;<br /> <br /> </div><br /> <br /> Un exemple de fichier xml valide&nbsp;:&nbsp; <a href="http://www.liens-du-vin.ch/_files/gallery-swiss-wineries.xml" target="_blank" title="gallery-swiss-wineries.xml">gallery-swiss-wineries.xml</a><br /> <br /> <br /> <strong>Affichage plein écran</strong><br /> <br /> Faire un clic droit puis choisir <i>Plein écran</i><br /> <br /> <br /> <strong>Hébergement sur Google Sites</strong><br /> <br /> Le <strong>lecteur Flash</strong> (Tiltviewer.swf) ainsi que la <strong>galerie xml</strong> peuvent être hébergés sur <a href="http://sites.google.com/site/annuairevin/tips-and-tricks-for-google-sites" target="_blank" title="Google Sites">Google Sites</a> (page classeur).<br /> <br /> Il faut cependant respecter les restrictions suivantes&nbsp;:&nbsp;<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <strong>Fichier xml</strong> : - Ne pas utiliser l'adresse classique du fichier xml :<br /> <br /> http://sites.google.com/site/NOMSITE/.../galerie.xml<br /> <br /> mais utiliser la forme sécurisée de l'adresse :<br /> <br /> http://nnn...nnn-a-mmm...mmm-s-sites.googlegroups.com/site/NOMSITE/.../galerie.xml<br /> <br /> Pour obtenir l'adresse du fichier, télécharger le fichier xml depuis la page classeur (sous IE), puis avec l'explorateur Windows, retouvez ce fichier dans les fichiers temporaires Windows et recopier l'adresse Internet (Documents and Settings/user/local Settings/Temporary Internet Files)<br /> <br /> <strong>Images</strong> - Les fichiers définis dans la galerie xml doivent être hébergés par un site appartenant à un Domaine Google (Google Sites, Picasa, ...)<br /> <br /> </div><br /> <br /> <br /> <strong>Un exemple</strong><br /> <br /> Les images des plus beaux <a href="http://viti-vino-feed.blogspot.com/2010/12/domaines-viticoles-suisse.html" target="_blank" title="Les plus beaux domaines viticoles suisses">domaines viticoles suisses</a><br /> <br /> <br /> <center><iframe style="width: 480px; height: 380px;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml&amp;up_XML=http://prac-gadget.googlecode.com/svn/branches/gallery-swiss-wineries.xml&amp;up_SWF=http://prac-gadget.googlecode.com/svn/branches/tiltviewer.swf&amp;up_TIT=Clos%20Domaines%20et%20Ch%C3%A2teaux&amp;up_LNK=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&amp;up_SW=460&amp;up_SH=340&amp;up_MAX=520&amp;up_TCOL=%23993300&amp;up_BBOCOL=%23c3d9ff&amp;up_BBICOL=%23000000&amp;up_PFCOL=%23c3d9ff&amp;up_PBCOL=%23cccccc&amp;up_BFCOL=%23c3d9ff&amp;up_BDCOL=%23cc0000&amp;up_CCOL=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Un mur d'images avec le diaporama Flash de TiltViewer - http://www.liens-du-vin.ch/galerie-mur-images.htm</iframe></center><br /> <br /> <div style="text-align: center;"><a href="http://fusion.google.com/add?moduleurl=http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml" style="border: 0px none; text-decoration: none;" target="_blank" title="Tiltviewer pour Flickr - tiltviewer-gallery.xml"><img alt="Ajouter ce gadget a Google" src="http://www.liens-du-vin.ch/_pic02/add-to-google.gif" title="Ajouter ce gadget a Google" border="0" height="17" width="104"></a></div><br /> <br /> <strong>Plus d'informations</strong><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2011/01/photos-flickr-mur-images-tiltviewer.html" target="_blank" title="Ses photos de Flickr sur un mur d'images">Ses photos de Flickr sur un mur d'images</a><br /> <br /> <a href="http://viti-vino.blogspot.com/2010/12/galerie-horizontale-images-accordeon.html" target="_blank" title="Une galerie horizontale en accordéon">Une galerie horizontale 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://www.liens-du-vin.ch/picasa-gadget-script.htm" target="_blank" title="Un gadget Google pour ajouter un diaporama dans le corps du message">Un gadget Google pour ajouter un diaporama 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" title="Association Clos Domaines et Châteaux" target="_blank">Association Clos Domaines et Châteaux</a><br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-1006008808027869372?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/CxH1yze3eEzyjGkEFsfUTxdhLdI/0/da"><img src="http://feedads.g.doubleclick.net/~a/CxH1yze3eEzyjGkEFsfUTxdhLdI/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/CxH1yze3eEzyjGkEFsfUTxdhLdI/1/da"><img src="http://feedads.g.doubleclick.net/~a/CxH1yze3eEzyjGkEFsfUTxdhLdI/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/7pYa9KX4GO8" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2011/01/mur-images-galerie-xml.htmltag:blogger.com,1999:blog-30801821.post-39802736614967938112010-12-12T18:08:00.013+01:002011-01-28T22:15:01.032+01:002011-01-28T22:15:01.032+01:00L'affichage en accordéon se réalise simplement avec quelques lignes de CSS. La méthode est décrite dans l'article de Stu Nicholls : <a href="http://www.cssplay.co.uk/menu/gallery3l.html" target="_blank" title="Stu Nicholls - Sliding Photograph Galleries">Sliding Photograph Galleries</a>.<br /><br />J'avais utilisé cet exemple pour utiliser <a href="http://viti-vino.blogspot.com/2008/02/un-style-pour-un-seul-message.html" target="_blank" title="Une feuille de style pour un seul message">une feuille de style pour un seul message</a>.<br /><br />Un <a href="http://spreadsheets.google.com/pub?key=0AoyfJJJSNrfucC1EZVdQaG85U3FtWVJLdE12bC1ESkE&amp;hl=fr&amp;single=true&amp;gid=0&amp;outp%20ut=html" target="_blank" title="Gadget Google">Gadget Google</a> permet d'insérer une <strong>galerie horizontale</strong>, avec les photos affichées <i>en accordéon</i>.<br /><br /><strong>URL du gadget</strong><br /><br /><center><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml" target="_blank" title="Galerie horizontale - images en accordéon"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 180px;" src="http://3.bp.blogspot.com/_kbpHBa3_G9o/TQUB9JR_roI/AAAAAAAADWo/y_qINQT6wpQ/s400/horizontal-slide-screen.png" alt="Galerie horizontale" id="BLOGGER_PHOTO_ID_5549844265779048066" title="Galerie horizontale - images en accordéon" border="0" /></a><span style="font-size:78%;"><a href="http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml" target="_blank" title="Galerie horizontale - images en accordéon">gadget-slide-horizontal.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 sur le Blog d'Aide pour Blogger</a>.<br /><br />Pour le gadget, les codes sont donnés sur la page <a href="http://www.liens-du-vin.ch/galerie-horizontale-script.htm" target="_blank" title="galerie horizontale">galerie horizontale</a>.<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;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br />&lt;iframe style="width: 540px; height: 260px;"<br />src="<br />http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml<br /><br />&amp;up_Pic1=<span style="color: rgb(255, 0, 0);">URL image 1 (taille 320 x 240)</span><br />&amp;up_Title1=<span style="color: rgb(255, 0, 0);">Titre image 1</span><br />&amp;up_Pic2=<span style="color: rgb(255, 0, 0);">URL image 2 </span><br />&amp;up_Title2=<span style="color: rgb(255, 0, 0);">Titre image 2</span><br />&amp;up_Pic3=<span style="color: rgb(255, 0, 0);">URL image 3 </span><br />&amp;up_Title3=<span style="color: rgb(255, 0, 0);">Titre image 3</span><br />&amp;up_Pic4=<span style="color: rgb(255, 0, 0);">URL image 4 </span><br />&amp;up_Title4=<span style="color: rgb(255, 0, 0);">Titre image 4</span><br />&amp;up_Pic5=<span style="color: rgb(255, 0, 0);">URL image 5 </span><br />&amp;up_Title5=<span style="color: rgb(255, 0, 0);">Titre image 5</span><br />&amp;up_Pic6=<span style="color: rgb(255, 0, 0);">URL image 6 </span><br />&amp;up_Title6=<span style="color: rgb(255, 0, 0);">Titre image 6</span><br />&amp;up_Pic7=<span style="color: rgb(255, 0, 0);">URL image 7 </span><br />&amp;up_Title7=<span style="color: rgb(255, 0, 0);">Titre image 7</span><br />&amp;up_BackPic=<span style="color: rgb(255, 0, 0);">URL image de fond (taille 488 x 240)</span><br /><br />&amp;up_BorderCol=%23<span style="color: rgb(255, 0, 0);">rrggbb couleur bordure</span><br />&amp;up_BackCol=%23<span style="color: rgb(255, 0, 0);">rrggbb couleur fond</span><br />"<br />allowTransparency="true"<br />frameborder="0"<br />scrolling="no"&gt;<br />Gadget Google - Galerie horizontale de photos affichées en accordéon&lt;/iframe&gt;<br /><br /></div><br /><br /><br /><strong>Un exemple</strong><br /><br />J utilise le code suivant pour afficher les images des <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><br /><br /><div style="background: none repeat scroll 0% 0% infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br />&lt;iframe style="width: 540px; height: 260px;"<br />src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml&amp;up_Pic1=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-maison-blanche.jpg</span>&amp;up_Title1=<span style="color: rgb(255, 0, 0);">Ch%C3%A2teau</span><span style="color: rgb(255, 0, 0);">%20Maison%20Blanche</span>&amp;up_Pic2=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-manoir.jpg</span>&amp;up_Title2=<span style="color: rgb(255, 0, 0);">Domaine%20du%20Manoir</span>&amp;up_Pic3=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-vufflens-c-d-c.jpg</span>&amp;up_Title3=<span style="color: rgb(255, 0, 0);">Ch%C3%A2teau%20de%20Vufflens</span>&amp;up_Pic4=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-allaman.jpg</span>&amp;up_Title4=<span style="color: rgb(255, 0, 0);">Ch%C3%A2teau%20d'Allaman</span>&amp;up_Pic5=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-chatagnereaz.jpg</span>&amp;up_Title5=<span style="color: rgb(255, 0, 0);">Ch%C3%A2teau%20de%20Ch%C3%A2tagner%C3%A9az</span>&amp;up_Pic6=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-martheray.jpg</span>&amp;up_Title6=<span style="color: rgb(255, 0, 0);">Domaine%20du%20Martheray&amp;up_Pic7=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-autecour.jpg</span>&amp;up_Title7=<span style="color: rgb(255, 0, 0);">Domaine%20de%20Autecour</span>&amp;up_BackPic=<span style="color: rgb(255, 0, 0);">http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fback-slide-brown.jpg</span>&amp;p_BorderCol=%23<span style="color: rgb(255, 0, 0);">9e5205</span>&amp;up_BackCol=%23<span style="color: rgb(255, 0, 0);">f6f6f6</span>" allowTransparency="true" frameborder="0" scrolling="no"&gt;Gadget Google - Galerie horizontale de photos affichées en accordéon&lt;/iframe&gt;<br /><br /></div><br /><br /><center><iframe style="width: 540px; height: 260px;" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml&up_Pic1=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-maison-blanche.jpg&up_Title1=Ch%C3%A2teau%20Maison%20Blanche&up_Pic2=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-manoir.jpg&up_Title2=Domaine%20du%20Manoir&up_Pic3=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-vufflens-c-d-c.jpg&up_Title3=Ch%C3%A2teau%20de%20Vufflens&up_Pic4=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-allaman.jpg&up_Title4=Ch%C3%A2teau%20d'Allaman&up_Pic5=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-chatagnereaz.jpg&up_Title5=Ch%C3%A2teau%20de%20Ch%C3%A2tagner%C3%A9az&up_Pic6=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-martheray.jpg&up_Title6=Domaine%20du%20Martheray&up_Pic7=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-autecour.jpg&up_Title7=Domaine%20de%20Autecour&up_BackPic=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fback-slide-brown.jpg&up_BorderCol=%239e5205&up_BackCol=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Galerie horizontale de photos affichées en accordéon</iframe></center><br /><br /><br /><strong>Plus d'informations</strong><br /><br /><a href="http://aide-blogger-fr.blogspot.com/2011/01/photos-flickr-mur-images-tiltviewer.html" target="_blank" title="Ses photos Flickr sur un mur d'images">Ses photos Flickr sur un mur d'images</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://viti-vino.blogspot.com/2008/02/un-style-pour-un-seul-message.html" target="_blank" title="Un style pour un seul message">Un style pour un seul message de Blogger</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 /><strong>Crédit photos</strong><br /><br />Association <a href="http://www.c-d-c.ch" target="_blank" title="Association Clos Domaines et Châteaux">Clos Domaines et Châteaux</a><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-3980273661496793811?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/XNW05mwsV_8tf2wRHiW2EzqyZDw/0/da"><img src="http://feedads.g.doubleclick.net/~a/XNW05mwsV_8tf2wRHiW2EzqyZDw/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/XNW05mwsV_8tf2wRHiW2EzqyZDw/1/da"><img src="http://feedads.g.doubleclick.net/~a/XNW05mwsV_8tf2wRHiW2EzqyZDw/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/K3wZKJxNu3Q" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2010/12/galerie-horizontale-images-accordeon.htmltag:blogger.com,1999:blog-30801821.post-62936416678515669432010-10-19T22:27:00.019+02:002011-03-28T18:36:31.146+02:002011-03-28T18:36:31.146+02:00<strong>Modifier le Bouton Partager</strong><br /><br />Blogger utilise 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>, pour afficher 5 liens sur 1 image et modifier le fond au survol de la souris.<br />Le coeur de la méthode consiste à définir la grande image comme image de fond, et à se positionner sur celle-ci à des endroits différents. Le positionnement change grâce à la clause CSS <a href="http://www.w3schools.com/css/pr_background-position.asp" target="_blank" title="background-position">background-position</a>.<br /><br /><strong>L image de départ utilisée par Blogger</strong><br /><br /><center><a href="http://www.blogger.com/img/share_buttons.png" title="share_buttons.png" target="_blank"><img src="http://lh6.ggpht.com/_kbpHBa3_G9o/TL39loJyxGI/AAAAAAAADPw/b0Gut3SWQYs/s800/share_buttons.png" title="share_buttons.png" style="width: 106px;" /></a></center><br /><br />Elle comporte 4 rangées de 5 icônes (5 x 22 x 22 pixels). Le bouton standard utilise la première rangée pour les liens, et affiche la dernière ligne (transparente) au survol par la souris. <br /><br /><strong>Le bouton Partager standard</strong><br /><br /><center><div class='post-share-buttons'><br /><a class='share-button1 sb-email' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=email' target='_blank' title='Envoyer par e-mail'><span class='share-button-link-text'>Envoyer par e-mail</span></a><a class='share-button1 sb-blog' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='share-button1 sb-twitter' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=twitter' target='_blank' title='Partager sur Twitter'><span class='share-button-link-text'>Partager sur Twitter</span></a><a class='share-button1 sb-facebook' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Partager sur Facebook'><span class='share-button-link-text'>Partager sur Facebook</span></a><a class='share-button1 sb-buzz' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=buzz' onclick='window.open(this.href, "_blank", "height=415,width=690"); return false;' target='_blank' title='Partager sur Google Buzz'><span class='share-button-link-text'>Partager sur Google&#160;Buzz</span></a><br /></div></center><br /><br /><strong>Le bouton Partager en couleur</strong><br /><br />Nous allons afficher la troisième rangée de l'image de base. Au survol (pseudo-classe a:hover), nous allons afficher les icônes de la deuxième rangée (haut du bouton clair).<br /><br /><center><div class='post-share-buttons'><a class='share-button1 sb1-email' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=email' target='_blank' title='Envoyer par e-mail'><span class='share-button-link-text'>Envoyer par e-mail</span></a><a class='share-button1 sb1-blog' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='share-button1 sb1-twitter' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=twitter' target='_blank' title='Partager sur Twitter'><span class='share-button-link-text'>Partager sur Twitter</span></a><a class='share-button1 sb1-facebook' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Partager sur Facebook'><span class='share-button-link-text'>Partager sur Facebook</span></a><a class='share-button1 sb1-buzz' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=buzz' onclick='window.open(this.href, "_blank", "height=415,width=690"); return false;' target='_blank' title='Partager sur Google Buzz'><span class='share-button-link-text'>Partager sur Google&#160;Buzz</span></a></div></center><br /><br />Le CSS à placer dans le Blog, redéfinit la clause <strong>background-position</strong>. -44px correspond à la rangée 3 (2 x 22) et -22px à la rangée 2 (1 x 22). La mention !important indique que cette clause CSS prime sur toute autre. <br /><br /><div style="background: infobackground;"><br />/* bouton de partage en couleur */<br /><br />a.sb-email {background-position: 0px <b>-44px</b> !important;}<br />a.sb-blog {background-position: -21px <b>-44px</b> !important;}<br />a.sb-twitter {background-position: -42px <b>-44px</b> !important;}<br />a.sb-facebook {background-position: -63px <b>-44px</b> !important;}<br />a.sb-buzz {background-position: -84px <b>-44px</b> !important; width: 24px;}<br /><br />a.sb-email:hover {background-position: 0px <b>-22px</b> !important;}<br />a.sb-blog:hover {background-position: -21px <b>-22px</b> !important;}<br />a.sb-twitter:hover {background-position: -42px <b>-22px</b> !important;}<br />a.sb-facebook:hover {background-position: -63px <b>-22px</b> !important;}<br />a.sb-buzz:hover {background-position: -84px <b>-22px</b> !important;}<br /><br /></div><br /><br /><strong>Le bouton Partager transparent</strong><br /><br />L'image de base comporte une quatrième rangée transparente. Nous allons l'afficher pour les liens, et au survol, nous ferons apparaître les icônes de la troisième rangée (bas du bouton clair).<br /><br /><center><div class='post-share-buttons'><br /><a class='share-button1 sb2-email' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=email' target='_blank' title='Envoyer par e-mail'><span class='share-button-link-text'>Envoyer par e-mail</span></a><a class='share-button1 sb2-blog' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='share-button1 sb2-twitter' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=twitter' target='_blank' title='Partager sur Twitter'><span class='share-button-link-text'>Partager sur Twitter</span></a><a class='share-button1 sb2-facebook' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Partager sur Facebook'><span class='share-button-link-text'>Partager sur Facebook</span></a><a class='share-button1 sb2-buzz' href='http://www.blogger.com/share-post.g?blogID=30801821&postID=6293641667851566943&target=buzz' onclick='window.open(this.href, "_blank", "height=415,width=690"); return false;' target='_blank' title='Partager sur Google Buzz'><span class='share-button-link-text'>Partager sur Google&#160;Buzz</span></a><br /></div></center><br /><br />Le CSS à placer dans le Blog, redéfinit la clause background-position. -66px correspond à la rangée 4 (3 x 22) et -44px à la rangée 3 (2 x 22). Il faut ajouter width: 22px pour afficher le bord de l'icône au survol.<br /><br /><div style="background: infobackground;"><br />/* bouton de partage transparent */<br /><br />a.sb-email {background-position: 0px <b>-66px</b> !important;}<br />a.sb-blog {background-position: -21px <b>-66px</b> !important;}<br />a.sb-twitter {background-position: -42px <b>-66px</b> !important;}<br />a.sb-facebook {background-position: -63px <b>-66px</b> !important;}<br />a.sb-buzz {background-position: -84px <b>-66px</b> !important; width: 22px;}<br /><br />a.sb-email:hover {background-position: 0px <b>-44px</b> !important; width: 22px;}<br />a.sb-blog:hover {background-position: -21px <b>-44px</b> !important; width: 22px;}<br />a.sb-twitter:hover {background-position: -42px <b>-44px</b> !important; width: 22px;}<br />a.sb-facebook:hover {background-position: -63px <b>-44px</b> !important; width: 22px;}<br />a.sb-buzz:hover {background-position: -84px <b>-44px</b> !important; width: 22px;}<br /><br /></div><br /><br /><strong>Correction du style</strong><br /><br />Dans les 2 cas (bouton en couleur et bouton transparent), ajouter ceci au style du Blog, pour éviter un décalage vers le bas du dernier bouton de la rangée, au survol de la souris :<br /><br /><div style="background: infobackground;"><br />.post-share-buttons<br />{<br />width: 112px !important;<br />}<br /><br /></div><br /><br /><strong>Adaptation du style pour les modèles personnalisés</strong><br /><br />Depuis mars 2011, les modèles personnalisés doivent avoir cette correction pour afficher les boutons partagés&nbsp;:&nbsp;<br /><br /><div style="background: infobackground;"><br />.post-share-buttons a<br />{<br />position: relative;<br />display: inline-block;<br />}<br /><br /></div><br /><br /><strong>Nouveau bouton de partage (25 mars 2011)</strong><br /><br />Depuis le 25 mars 2011, Blogger a introduit un nouveau bouton de partage dans la feuille de style associée au Blog. <br /><br /><center><a href="http://www.blogger.com/img/share_buttons_20.png" title="share_buttons_20.png" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;width: 120px; height: 60px;" src="http://1.bp.blogspot.com/-EhSMMCLhygw/TZC1jqpw4ZI/AAAAAAAAD1A/FHTmtQMRS_w/s400/share_buttons_20.png" border="0" alt="Version 2 : bouton de partage" title="Version 2 : bouton de partage" id="BLOGGER_PHOTO_ID_5589166761916293522" /></a></center><br /><br />Cette image de 120 par 60 pixels comprend le partage sur <a href="http://www.orkut.com/Main#Profile?uid=8229604736153683346" target="_blank" title="Orkut">Orkut</a>. Les petites icônes sont réduites en largeur par rapport à la version 1 (20 x 30 pixels au lieu de 22 x 22 pixels).<br /><br /><span style="font-weight:bold;">Important : </span>Les modifications ci-dessus ne s'appliquent pas à ce nouveau bouton de partage !<br /><br /><br /><strong>En savoir plus</strong><br /><br />Sprite CSS pour afficher jusqu'à 50 <a href="http://viti-vino.blogspot.com/2010/10/profils-reseaux-sociaux-sprite-css.html" target="_blank" title="Profils de Réseaux Sociaux">Profils de Réseaux sociaux</a>.<br /><br /><a href="http://buzz-fr.blogspot.com/2010/06/nouveaux-boutons-de-partage.html" target="_blank" title="Bouton de Partage">Le bouton de Partage de Blogger</a>.<br /><br/><div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-6293641667851566943?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/xYho3D3O2_GG4VzUfZuSMTAYXf8/0/da"><img src="http://feedads.g.doubleclick.net/~a/xYho3D3O2_GG4VzUfZuSMTAYXf8/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/xYho3D3O2_GG4VzUfZuSMTAYXf8/1/da"><img src="http://feedads.g.doubleclick.net/~a/xYho3D3O2_GG4VzUfZuSMTAYXf8/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/_8YhAxIA3os" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com13http://viti-vino.blogspot.com/2010/10/colorer-bouton-partager.htmltag:blogger.com,1999:blog-30801821.post-80144560076374315282010-10-17T23:43:00.034+02:002011-08-26T20:50:31.258+02:002011-08-26T20:50:31.258+02:00<h1 itemprop="name" style="display: none;">Profils des Réseaux Sociaux avec Sprite CSS</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/sprite-css.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Sprite CSS est une technique permettant d'utiliser une seule image pour afficher plusieurs icones ou effets graphiques</p><br /> <strong>Sprite CSS : Afficher vos Profils dans 50 Réseaux Sociaux</strong><br /> <br /> La méthode décrite ici est appelée <strong>Sprite CSS</strong>, par analogie avec la méthode utilisée par les premiers jeux vidéos (<span lang="en">Sprite</span> en anglais : le lutin, le farfadet). Ces jeux affichaient un personnage animé à partir de pixels pris sur une seule image, par souci d'économie de ressources.<br /> <br /> La base de cet article est un Plugin pour <a href="http://wordpress.org/" target="_blank" title="Wordpress">Wordpress</a>, <a href="http://www.clickonf5.org/cute-profiles" target="_blank" title="Cute Profiles - Show Social Profiles">Cute Profiles : Free WordPress Plugin To Show Vertically Floating Social Profiles</a>.<br /> <br /> <strong>Le CSS background-position</strong><br /> <br /> La clause CSS <strong>background-image</strong> permet de définir l'image de fonds d'un bloc. La position de cette image est fixée par <a href="http://www.w3schools.com/css/pr_background-position.asp" target="_blank" title="CSS background-position">background-position</a>. Nous allons utiliser 2 coordonnées, l'axe horizontal et l'axe vertical en pixels pour <strong><i>afficher une partie de l'image de fonds</i></strong>.<br /> Partons d'une image de 120 x 90 pixels, et divisons cette image en 4 cadrans (haut / bas et gauche / droite).<br /> <br /> <center><img src="http://www.liens-du-vin.ch/ascreen.jpg" alt="Image de fonds - 120 x 90" title="Image de fonds - 120 x 90" /></center><br /> <br /> <strong>Un lien avec une image</strong><br /> <br /> En utilisant la clause <a href="http://www.w3schools.com/css/pr_background-image.asp" target="_blank" title="background-image">background-image</a> nous pouvons créer un lien sur une image. Le tag a (ancre) doit normalement contenir le texte du lien. Nous supprimons l'affichage du lien par la clause CSS display: none;<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.test1<br /> {<br /> border: 0px;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> <br /> div.test1 a<br /> {<br /> display: inline-block;<br /> width: 60px;<br /> height: 45px;<br /> padding: 0px;<br /> margin: 0px 0px 4px;<br /> <br /> background-image: url(http://www.liens-du-vin.ch/ascreen.jpg);<br /> background-repeat: no-repeat;<br /> background-position: 0px 0px;<br /> <br /> }<br /> <br /> div.test1 <span style="font-weight: bold;">a.haut_gauche</span><br /> {<br /> background-position: <span style="color: rgb(255, 0, 0);">0px 0px</span>; /* CADRAN HAUT GAUCHE */<br /> }<br /> <br /> div.test1 <span style="font-weight: bold;">a.haut_droite</span><br /> {<br /> background-position: <span style="color: rgb(255, 0, 0);">-60px 0px</span>; /* CADRAN HAUT DROITE */<br /> }<br /> <br /> div.test1 <span style="font-weight: bold;">a.bas_gauche</span><br /> {<br /> background-position: <span style="color: rgb(255, 0, 0);">0px -45px</span>; /* CADRAN BAS GAUCHE */<br /> }<br /> <br /> div.test1 <span style="font-weight: bold;">a.bas_droite</span><br /> {<br /> background-position: <span style="color: rgb(255, 0, 0);">-60px -45px</span>; /* CADRAN BAS DROITE */<br /> }<br /> <br /> div.test1 a span<br /> {<br /> display: none; /* SUPPRIMER LE TEXTE DU LIEN */<br /> }<br /> <br /> </div><br /> <br /> Le code HTML, place les liens sur les 4 cadrans, dans un bloc div :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> &lt;div class="test1"&gt;<br /> <br /> &lt;a <strong>class="haut_gauche"</strong> href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Gauche"&gt;&lt;span&gt;Liens Du Vin&lt;&lt;/a&gt;<br /> &lt;a <strong>class="haut_droite"</strong> href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Droite"&gt;&lt;span&gt;Liens Du Vin&lt;/span&gt;&lt;/a&gt;<br /> &lt;a <strong>class="bas_gauche"</strong> href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Gauche"&gt;&lt;span&gt;Liens Du Vin&lt;/span&gt;&lt;/a&gt;<br /> &lt;a <strong>class="bas_droite"</strong> href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Droite"&gt;&lt;span&gt;Liens Du Vin&lt;/span&gt;&lt;/a&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> </div><br /> <br /> Ce qui donne le résultat suivant :<br /> <br /> <div class="test1"><br /> <center><table style="text-align: center;font-size:80%;"><tbody> <tr><td>Haut Gauche (<span style="color: rgb(255, 0, 0);">0 0</span>)</td><td>Haut Droite (<span style="color: rgb(255, 0, 0);">-60 0</span>)</td></tr> <tr><td><a class="haut_gauche" href="http://www.liens-du-vin.ch/" target="_blank" title="Liens Du Vin - Haut Gauche"><span>Liens Du Vin</span></a></td><td><a class="haut_droite" href="http://www.liens-du-vin.ch/" target="_blank" title="Liens Du Vin - Haut Droite"><span>Liens Du Vin</span></a></td></tr> <tr><td>Bas Gauche (<span style="color: rgb(255, 0, 0);">0 -45</span>)</td><td>Bas Droite (<span style="color: rgb(255, 0, 0);">-60 -45</span>)</td></tr> <tr><td><a class="bas_gauche" href="http://www.liens-du-vin.ch/" target="_blank" title="Liens Du Vin - Bas Gauche"><span>Liens Du Vin</span></a></td><td><a class="bas_droite" href="http://www.liens-du-vin.ch/" target="_blank" title="Liens Du Vin - Bas Droite"><span>Liens Du Vin</span></a></td></tr> </tbody></table></center><br /> </div><br /> <br /> <strong>Changer le fonds au survol</strong><br /> <br /> Nous allons utiliser une <a href="http://www.w3schools.com/css/pr_pseudo_hover.asp" title="pseudo-classe hover" target="_blank">peudo-classe CSS a:hover</a> pour modifier le fonds du lien au survol de celui-ci.<br /> Affichons le cadran <b>Haut Gauche</b> sur le lien, et affichons le cadran <b>Bas Droite</b> lorsque le curseur survole le lien. Il suffit de définir la clause CSS <strong>hover</strong> (à placer après la clause a:link) :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.test1 <span style="font-weight: bold;">a.haut_gauche:hover</span><br /> {<br /> background-position: <span style="color: rgb(255, 0, 0);">-60px -45px</span>;<br /> }<br /> <br /> </div><br /> <br /> En pratique, l'image change pour le cadran Bas Droite au survol par la souris :<br /> <br /> <center><div class="test1"><br /> <a class="haut_gauche1" href="http://www.liens-du-vin.ch/" target="_blank" title="Liens Du Vin - Haut Gauche - Bas Droite sur Hover"><span>Liens Du Vin</span></a><br /> </div></center><br /> <br /> <strong>La Mise en oeuvre avec les icônes de Profil</strong><br /> <br /> L'image *.png des Profils des Réseaux Sociaux (50 icônes) ainsi que la feuille de style complète pour toutes les icônes peuvent être obtenues à l'adresse du <a href="http://downloads.wordpress.org/plugin/cute-profiles.zip" target="_blank" title="Plugin Wordpress - Cutes Profiles">Plugin Wordpress</a> citée plus haut.<br /> <br /> L'image de base comprend 50 icônes de 32 pixels, sur 2 rangées. La première rangée est l'image du lien, la deuxième comporte l'image à afficher au survol du lien.<br /> <br /> <center><img src="http://www.liens-du-vin.ch/_pic062/profiles32.png" title="Profils sur 50 Réseaux sociaux" alt="Profils sur 50 Réseaux sociaux" style="width: 640px;" /></center><br /> <br /> <strong>Les coordonnées de background-position pour le lien</strong><br /> <br /> Par exemple, nous voulons afficher comme lien, l'icône no 3 de la première rangée (facebook). Le CSS du lien sera :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.profil_sprite a.facebook<br /> {<br /> background-position: <span style="font-weight: bold;">-64px 0px</span>;<br /> }<br /> <br /> </div><br /> <br /> En généralisant, le lien pour l'icône n, -32 * (n - 1). Par exemple, l'icône YouTube (no 9, donc -32 * (9-1) = -256) :<br /> <br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.profil_sprite a.youtube<br /> {<br /> background-position: -256px 0px; /* ICONE 9 : -32 * (9 - 1) */<br /> }<br /> <br /> </div><br /> <br /> <strong>Les coordonnées de background-position pour le survol de la souris</strong><br /> <br /> Nous devons changer la coordonnée y de background-position, en nous déplaçant de 32px vers le bas. Pour Facebook (icône no3) :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.profil_sprite a.profil_facebook:hover<br /> {<br /> background-position: -64px -32px;<br /> }<br /> <br /> </div><br /> <br /> Et pour YouTube (icône no 9) :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.profil_sprite a.youtube:hover<br /> {<br /> background-position: -256px -32px;<br /> }<br /> <br /> </div><br /> <br /> <strong>Un exemple complet avec mes profils</strong><br /> <br /> Le CSS :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> /* LE BLOC DIV CONTENANT LES LIENS */ <br /> {<br /> text-align: center;<br /> border: 0px;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> <br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> a /* LE LIEN DANS LE BLOC DIV */<br /> {<br /> width: 32px;<br /> height: 32px;<br /> padding: 0px;<br /> margin: 0px 0px 4px;<br /> background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);<br /> background-repeat: no-repeat;<br /> background-position: 0px 0px;<br /> }<br /> <br /> /* LES ICONES QUI DOIVENT FIGURER */<br /> <br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> a.<span style="color: rgb(255, 102, 0);">profil_twitter</span><br /> {<br /> background-position: -32px 0px; /* ICONE NO 2 */<br /> }<br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> a.<span style="color: rgb(255, 102, 0);">profil_twitter</span>:hover<br /> {<br /> background-position: -32px -32px; /* ICONE NO 2 */<br /> }<br /> ...<br /> ...<br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> a.<span style="color: rgb(255, 102, 0);">profil_google</span><br /> {<br /> background-position: -160px 0px; /* ICONE no 6 */<br /> }<br /> div.<span style="color: rgb(0, 153, 0);">profil_sprite</span> a.<span style="color: rgb(255, 102, 0);">profil_google</span>:hover<br /> {<br /> background-position: -160px -32px; /* ICONE no 6 */<br /> }<br /> <br /> .<span style="color: rgb(0, 153, 0);">profil_sprite</span> span<br /> {<br /> display: none; /* SUPPRIMER LE TEXTE DU LIEN */<br /> }<br /> <br /> </div><br /> <br /> La barre horizontale de mes Profils :<br /> <br /> <center><div class="profil_sprite"><a title="Google - Philippe Chappuis" class="profil_google" href="http://www.google.com/profiles/philippe.chappuis" target="_blank"><span>Google - Philippe Chappuis</span></a><a title="Twitter - Prac53" class="profil_twitter" href="http://twitter.com/prac53" target="_blank"><span>Twitter - Prac53</span></a><a title="Facebook - Chappuis" class="profil_facebook" href="http://www.facebook.com/profile.php?id=721432116" target="_blank"><span>Facebook - Chappuis</span></a><a title="YouTube - Chappuis" class="profil_youtube" href="http://www.youtube.com/user/chappuis53" target="_blank"><span>YouTube - Chappuis</span></a><a title="Linkedin - Prac53" class="profil_linkedin" href="http://ch.linkedin.com/in/prac53" target="_blank"><span>Linkedin - Prac53</span></a><a title="Flickr - Prac53" class="profil_flickr" href="http://www.flickr.com/people/prac53/" target="_blank"><span>Flickr - Prac53</span></a><a title="Technorati - Prac53" class="profil_technorati" href="http://technorati.com/people/prac53/" target="_blank"><span>Technorati - Prac53</span></a><a title="Xing - Philippe Chappuis" class="profil_xing" href="http://www.xing.com/profile/Philippe_Chappuis2" target="_blank"><span>Xing - Philippe Chappuis</span></a><a title="Delicious - Prac53" class="profil_delicious" href="http://www.delicious.com/prac53" target="_blank"><span>Delicious - Prac53</span></a><a title="StumbleUpon - Prac53" class="profil_stumble" href="http://www.stumbleupon.com/stumbler/prac53/" target="_blank"><span>StumbleUpon - Prac53</span></a><a title="Wikio - Prac53" class="profil_wikio" href="http://www.wikio.fr/user/prac53" target="_blank"><span>Wikio - Prac53</span></a><a title="Slideshare - Prac53" class="profil_slideshare" href="http://www.slideshare.net/prac53" target="_blank"><span>Slideshare - Prac53</span></a><a title="Flux RSS - Blog de Prac" class="profil_rss" href="http://viti-vino.blogspot.com/feeds/posts/default" target="_blank"><span>Flux RSS - Blog de Prac</span></a></div></center><br /> <br /> Le html de l'exemple :<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> &lt;div class="<span style="color: rgb(0, 153, 0);">profil_sprite</span>"&gt;<br /> &lt;a href="URL profil Google" title="Profil Google" class="<span style="color: rgb(255, 102, 0);">profil_google</span>"&gt;&lt;span&gt;Profil Google&lt;/span&gt;&lt;/a&gt;<br /> ...<br /> &lt;/div&gt;<br /> <br /> </div><br /> <br /> <strong>Afficher la barre des profils verticalement</strong><br /> <br /> Il suffit de définir les liens comme étant display: block;<br /> <br /> <div style="background: none repeat scroll 0% 0% infobackground;"><br /> div.profil_sprite_v a<br /> {<br /> <br /> <span style="font-weight: bold;">display: block;</span><br /> <br /> width: 32px;<br /> height: 32px;<br /> padding: 0px;<br /> margin: 0px 0px 4px;<br /> background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);<br /> background-repeat: no-repeat;<br /> background-position: 0px 0px;<br /> }<br /> <br /> </div><br /> <br /> <center><div class="profil_sprite_v"><a title="Google - Philippe Chappuis" class="profil_google" href="http://www.google.com/profiles/philippe.chappuis" target="_blank"><span>Google - Philippe Chappuis</span></a><a title="Twitter - Prac53" class="profil_twitter" href="http://twitter.com/prac53" target="_blank"><span>Twitter - Prac53</span></a><a title="Facebook - Chappuis" class="profil_facebook" href="http://www.facebook.com/profile.php?id=721432116" target="_blank"><span>Facebook - Chappuis</span></a><a title="YouTube - Chappuis" class="profil_youtube" href="http://www.youtube.com/user/chappuis53" target="_blank"><span>YouTube - Chappuis</span></a><a title="Linkedin - Prac53" class="profil_linkedin" href="http://ch.linkedin.com/in/prac53" target="_blank"><span>Linkedin - Prac53</span></a><a title="Flickr - Prac53" class="profil_flickr" href="http://www.flickr.com/people/prac53/" target="_blank"><span>Flickr - Prac53</span></a><a title="Technorati - Prac53" class="profil_technorati" href="http://technorati.com/people/prac53/" target="_blank"><span>Technorati - Prac53</span></a><a title="Xing - Philippe Chappuis" class="profil_xing" href="http://www.xing.com/profile/Philippe_Chappuis2" target="_blank"><span>Xing - Philippe Chappuis</span></a><a title="Delicious - Prac53" class="profil_delicious" href="http://www.delicious.com/prac53" target="_blank"><span>Delicious - Prac53</span></a><a title="StumbleUpon - Prac53" class="profil_stumble" href="http://www.stumbleupon.com/stumbler/prac53/" target="_blank"><span>StumbleUpon - Prac53</span></a><a title="Wikio - Prac53" class="profil_wikio" href="http://www.wikio.fr/user/prac53" target="_blank"><span>Wikio - Prac53</span></a><a title="Slideshare - Prac53" class="profil_slideshare" href="http://www.slideshare.net/prac53" target="_blank"><span>Slideshare - Prac53</span></a><a title="Flux RSS - Blog de Prac" class="profil_rss" href="http://viti-vino.blogspot.com/feeds/posts/default" target="_blank"><span>Flux RSS - Blog de Prac</span></a></div></center><br /> <br /> <strong>Plus d'informations</strong><br /> <br /> Une introduction aux <a href="http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html" title="Sprites CSS" target="_blank">Sprite CSS</a>, par <a href="http://www.alsacreations.com/" target="_blank" title="alsacréations">alsacréations</a>.<br /> <br /> Jouer avec <a href="http://aide-blogger-fr.blogspot.com/2007/12/opacite-et-transparence-appliquer-un.html" target="_blank" title="Opacité et transparence">l'opacité et la transparence</a> pour ses images.<br /> <br /> Utiliser les <a href="http://www.liens-du-vin.ch/test-062.html" target="_blank" title="Filtres d'opacité">filtres d'opacité</a> pour ses images.<br /> <br /> Colorer le <a href="http://viti-vino.blogspot.com/2010/10/colorer-bouton-partager.html" target="_blank" title="Bouton Partager">Bouton Partager de Blogger</a>.<div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-8014456007637431528?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/cTivsxJP1i-CY-x4idingVOt6VU/0/da"><img src="http://feedads.g.doubleclick.net/~a/cTivsxJP1i-CY-x4idingVOt6VU/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/cTivsxJP1i-CY-x4idingVOt6VU/1/da"><img src="http://feedads.g.doubleclick.net/~a/cTivsxJP1i-CY-x4idingVOt6VU/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/K_UYGT1fHQ8" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com4http://viti-vino.blogspot.com/2010/10/profils-reseaux-sociaux-sprite-css.htmltag:blogger.com,1999:blog-30801821.post-76079598516793809942010-07-20T16:12:00.042+02:002011-08-26T20:55:19.112+02:002011-08-26T20:55:19.112+02:00<h1 itemprop="name" style="display: none;">Ombrer ses Boîtes avec box-shadow</h1><img itemprop="image" src="http://www.liens-du-vin.ch/_pic063/ombre-portee.jpg" style="display: none;" /><p itemprop="description" style="display: none;">Les nouveaux modèles de Blogger utilisent la propriété CSS3 box-shadow. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html</p><br /> <span style="font-weight:bold;">Créer une ombre portée pour ses boîtes avec box-shadow</span><br /> <br /> Les nouveaux modèles de Blogger utilisent la propriété CSS3 <span style="font-weight:bold;">box-shadow<span style="font-style:italic;"></span></span>. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html.<br /> <br /> <span style="font-weight:bold;">L'élément de style box-shadow</span><br /> <br /> La propriété CSS box-shadow fait partie de la norme <a href="http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade" target="_blank" title="CSS évolution vers CSS3">CSS3</a>. Elle permet d'ajouter une ombre portée sur un élément HTML (span, div, img, ...). <br /> <br /> La propriété s'applique sur la boîte de l'élément et non sur sa bordure. Blogger utilise cette propriété avec <a href="http://buzz-fr.blogspot.com/2010/06/loutil-de-creation-de-modeles-est_28.html" target="_blank" title="Blogger - Nouveaux modèles">les nouveaux modèles</a>.<br /> <br /> En regardant la source du modèle <span style="font-weight:bold;">Filigrane<span style="font-style:italic;"></span></span> (<span lan="en">Watermark</span>) de Josh Peterson nous trouvons ce code CSS&nbsp;:<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> .post-body img, .post-body .tr-caption-container, .Profile img,<br /> .Image img, .BlogList .item-thumbnail img<br /> {<br /> padding: 5px;<br /> background-color: #fff;<br /> -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);<br /> -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);<br /> -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);<br /> <span style="font-weight:bold;">box-shadow</span>: 1px 1px 5px rgba(0, 0, 0, .5);<br /> }<br /> <br /> </div><br /> <br /> La propriété <span style="font-weight:bold;">box-shadow</span> n'est pas encore implémentée par l'ensemble des navigateurs (juillet 2010). Il faut donc utiliser un <span style="font-weight:bold;">préfixe CSS<span style="font-style:italic;"></span></span> pour qu'un navigateur spécifique la reconnaisse.<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight:bold;">-moz-box-shadow :</span> Mozilla (FireFox)<br /> <span style="font-weight:bold;">-webkit-box-shadow :</span> Webkit (Safari et Chrome)<br /> <span style="font-weight:bold;">-goog-ms-box-shadow :</span> Chrome sous Internet Explorer (?)<br /> <br /> </div><br /> <br /> Internet Explorer (IE), version 8 incluse, ne reconnaît pas la propriété box-shadow. Il existe un filtre propriétaire Microsoft permettant d'obtenir un résultat similaire. Il s'agit du <a href="http://msdn.microsoft.com/fr-ch/library/ms533086(v=VS.85).aspx" target="_blank" title="filtre Shadow - Microsoft">filtre Shadow</a> dont nous verrons l'utilisation plus loin.<br /> <br /> <br /> <span style="font-weight:bold;">La syntaxe de box-shadow</span><br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <span style="font-weight:bold;">box-shadow: décalage-horizontal décalage-vertical dégradé taille couleur <span style="font-style:italic;">inset</span>;</span><br /> <br /> <span style="font-weight:bold;">décalage-horizontal :</span> obligatoire<br /> <span style="font-weight:bold;">décalage-vertical :</span> obligatoire<br /> <span style="font-weight:bold;">dégradé :</span> facultatif,par défaut 0. Une valeur positive augmente le flou de l'ombre. On parle de <span style="font-weight:bold; font-style:italic;">rayon de flou</span> pour cette propriété (<span lan="en">blur</span>)<br /> <span style="font-weight:bold;">taille :</span> facultatif. Par défaut 0, ce qui donne une ombre à la même taille que l'élément ombré. Une valeur positive augmente l'ombre, une valeur négative la diminue<br /> <span style="font-weight:bold;">couleur :</span> facultatif<br /> <span style="font-weight:bold;"><span style="font-style:italic;">inset</span> :</span> facultatif. Si inset est mentionné il s'applique à toutes les couleurs utilisées comme fond<br /> <br /> </div><br /> <br /> <br /> <span style="font-weight:bold;">La couleur</span><br /> <br /> La couleur peut-être indiquée selon un <span style="font-weight:bold;">code couleur #rrggbb</span> ou en notation <span style="font-weight:bold;">rgb(r,g,b)</span>. Nouveauté de CSS3, la notation <span style="font-weight:bold;">rgba</span> (a pour filtre alpha) permet d'indiquer un degré d'opacité entre 0 et 1. L'opacité (la transparence d'une couleur) est définie par la propriété <a href="http://www.liens-du-vin.ch/test-062.html" target="_blank" title="Opacité et transparence">CSS opacity</a>. Si opacity s'applique à un élément html et à tous ses descendants, la notation rgba ne s'applique elle qu'à une seule propriété de l'élément sélectionné.<br /> <br /> <br /> <span style="font-weight:bold;">Principe de la notation rgba</span><br /> <br /> La notation rgba est identique à la notation rgb(r,g,b) mais comporte un dernier paramètre qui indique l'opacité de la couleur. L'opacité se défini par un nombre compris entre 0 et 1. A titre d'exemple, appliquons un filtre orange (#ff4500 rgb(255,69,0)), à cette photo en noir et blanc :<br /> <br /> <center><img src="http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg" title="Vigneron - Domaine du Manoir" /></center><div style="margin-top: 10px; font-size: 0.7em; text-align: center;"><a title="La Vigne : Le Travail de l&#39;Homme" href="http://www.liens-du-vin.ch/vision_vigne.htm" target="_blank">Le travail de l&#39;Homme</a></div><br /> <br /> Nous voulons une opacité de 20% (autrement dit 20% d'opacité correspond à 80% de transparence).<br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 280px; height: 114px;" src="http://1.bp.blogspot.com/_kbpHBa3_G9o/TEYG-Drgj1I/AAAAAAAADJk/hoOtHaDhvV0/s400/opacite-20.jpg" border="0" alt="Opacité - Orange 100% et 20%" title="Opacité - Orange 100% et 20%"id="BLOGGER_PHOTO_ID_5496088058461720402" /></center><br /> <br /> Le résultat obtenu sur la photo d'origine&nbsp;:<br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 252px; height: 216px;" src="http://4.bp.blogspot.com/_kbpHBa3_G9o/TEYH0hNl3XI/AAAAAAAADJs/J2iNBc4Anas/s400/sepia-noir-blanc.jpg" border="0" alt="Filtre sépia" title="Filtre sépia" id="BLOGGER_PHOTO_ID_5496088994102238578" /></center><div style="margin-top: 10px; font-size: 0.7em; text-align: center;"><a title="La Vigne : Le Travail de l&#39;Homme" href="http://www.liens-du-vin.ch/vision_vigne.htm" target="_blank">Le travail de l&#39;Homme</a></div><br /> <br /> Le CSS utilisé pour le filtre<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> background-color: rgb<b>a</b>(255,69,0<b>,.2</b>); <br /> <br /> /* fond orangé : #ff4500 rgb(255,69,0) */<br /> /* opacité : 20% (.2) */<br /> <br /> </div><br /> <br /> Le filtre spécifique à Internet Explorer<br /> <br /> La notation rgba n'est pas reconnue par IE. Il faut donc utiliser un filtre alpha spécifique, suivi de la couleur de fond en notation rgb. Ces 2 éléments sont à placer avant la définition rgba&nbsp;:<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* filtre IE */<br /> background-color: rgb(255,69,0); /* couleur de fond pour IE; FF et Chrome vont appliquer rgb<b>a</b> */<br /> <br /> background-color: rgb<b>a</b>(255,69,0<b>,.2</b>);<br /> <br /> </div><br /> <br /> Ce qui donne le code complet suivant :<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> &lt;div style="background-image: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); width: 240px; height: 207px; margin: auto;"&gt;<br /> <br /> &lt;div style="width: 240px; height: 207px; filter:alpha(opacity=20); background-color: rgb(255,69,0); background-color: rgba(255,69,0,.2); "&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> </div><br /> <br /> <span style="font-weight:bold;">Une ombre portée légérement floue</span><br /> <br /> Créons une ombre portée décalée de 10px, avec un flou de 3px. L'ombre possède la même taille que l'élément ombré. Le CSS utilisé&nbsp;:<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> box-shadow: 10px 10px 3px #044eff; /* ombre de couleur bleu #044eff = rgb(4,78,255) */<br /> -moz-box-shadow: 10px 10px 3px rgba(4,78,255, .8); /* opacité 80% */<br /> -webkit-box-shadow: 10px 10px 3px rgba(4,78,255, .8);<br /> -goog-ms-box-shadow: 10px 10px 3px rgba(4,78,255, .8);<br /> <br /> </div><br /> <br /> ce qui donne l'image suivante&nbsp;:<br /> <style type="text/css">.ombre {box-shadow: 10px 10px 3px #044eff;-moz-box-shadow: 10px 10px 3px rgba(4,78,255, .8);-webkit-box-shadow: 10px 10px 3px rgba(4,78,255, .8);-goog-ms-box-shadow: 10px 10px 3px rgba(4,78,255, .8);filter:progid:DXImageTransform.Microsoft.Shadow(color='#044eff', Direction=120, Strength=10); }</style><br /> <center><img class="ombre" src="http://www.liens-du-vin.ch/_pic062/chateau-vufflens.jpg" title="Ombre portée - Château de Vufflens" alt="Ombre portée - Château de Vufflens" /></center><div style="margin-top: 20px; font-size: 0.7em; text-align: center;"><a title="Château de Vufflens" href="http://www.liens-du-vin.ch/_winemap/maps-vufflens.htm" target="_blank">Château de Vufflens</a></div><br /> <br /> <span style="font-weight:bold;">Note :</span> L'affichage de cette page avec Internet Explorer ou FireFox fait apparaître une légère différence.<br /> <br /> <br /> <span style="font-weight:bold;">Simuler l'ombre portée sous IE</span><br /> <br /> IE ne supportant pas box-shadow, il faut utiliser un filtre alpha. Le CSS pour Internet Explorer&nbsp;:<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> filter:progid:DXImageTransform.Microsoft.Shadow(color='#044eff', Direction=120, Strength=10); <br /> <br /> </div><br /> <br /> <br /> <span style="font-weight:bold;">Un effet d'halo</span><br /> <br /> Créons une ombre portée centrée sur l'élément ombré. Donnons à l'ombre un rayon de flou important (12px) et agrandissons l'ombre de 5px. Le CSS utilisé&nbsp;:<br /> <br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> <br /> box-shadow: 0 0 12px 5px #c00; /* pas de décalage de l ombre */<br /> -moz-box-shadow: 0 0 12px 5px #c00; /* rayon de flou : 12px */<br /> -webkit-box-shadow: 0 0 12px 5px #c00; /* l'ombre dépasse de 5px de l'objet ombré */<br /> -goog-ms-box-shadow: 0 0 12px 5px #c00;<br /> <br /> </div><br /> <br /> Le résultat, qu'il faut afficher sous FF et IE pour visualiser les différences&nbsp;:<br /> <style type="text/css">.halo{box-shadow: 0 0 12px 5px #c00;-moz-box-shadow: 0 0 12px 5px #c00;-webkit-box-shadow: 0 0 12px 5px #c00;-goog-ms-box-shadow: 0 0 12px 5px #c00;}</style><br /> <br /> <center><img class="halo" src="http://www.liens-du-vin.ch/_pic062/chateau-vufflens.jpg" title="Effet d'halo - Château de Vufflens" alt="Effet d'halo - Château de Vufflens" /><div style="margin-top: 20px; font-size: 0.7em; text-align: center;"><a title="Château de Vufflens" href="http://www.liens-du-vin.ch/_winemap/maps-vufflens.htm" target="_blank">Château de Vufflens</a></div></center><br /> <br /> <br /> <span style="font-weight:bold;">L'effet d'halo sous Internet Explorer</span><br /> <br /> L'image ci-dessus ne possède pas d'halo sous Internet Explorer. Pour l'afficher, la solution retenue est la même que celle utilisé dans Blogger pour les nouveaux modèles. Un fond de couleur est défini pour l'élément, et une valeur de padding positive fait apparaître un cadre coloré. <br /> <style type="text/css">.haloie{background-color: #c00;padding: 3px;}</style><br /> <center><img class="haloie" src="http://www.liens-du-vin.ch/_pic062/chateau-vufflens.jpg" title="Cadre coloré - Château de Vufflens" alt="Cadre coloré - Château de Vufflens"/><div style="margin-top: 10px; font-size: 0.7em; text-align: center;"><a class="pw clk" title="Château de Vufflens" href="http://www.liens-du-vin.ch/_winemap/maps-vufflens.htm" target="_blank">Château de Vufflens</a></div></center><br /> <br /> Le CSS, compatible IE et FF&nbsp;:<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> background-color: #c00;<br /> padding: 3px;<br /> <br /> </div><br /> <br /> On peut aussi utiliser la technique du <a href="http://www.liens-du-vin.ch/border-pictures.html" target="_blank" title="Cadre semi-transparent">cadre semi-transparent</a>. Mais, contrairement à l'emploi de box-shadow, le cadre semi-transparent empiète sur l'image.<br /> <br /> En utilisant un <a href="http://www.liens-du-vin.ch/transparent-border-script.htm" target="_blank" title="Gadget Google - cadre semi-transparent">Gadget Google</a>, cette technique permet de rapidement insérer une photo avec un cadre semi-transparent&nbsp;: <br /> <br /> <center><iframe allowtransparency="true" scrolling="no" frameborder="0" width="330" height="220" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/transparent-border.xml&up_URLPic=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-vufflens.jpg&up_Title=Ch%C3%A2teau%20de%20Vufflens&up_PicWidth=320&up_PicHeight=210&up_BorderCol=%23fff&up_ContainerCol=%23ffffff">Afficher une photo avec un cadre semi-transparent</iframe><br /> </center><div style="margin-top: 5px; font-size: 0.7em; text-align: center;"><a title="Château de Vufflens" href="http://www.liens-du-vin.ch/_winemap/maps-vufflens.htm" target="_blank">Château de Vufflens</a></div><br /> <br /> <br /> <span style="font-weight:bold;">L'utilisation de box-shadow dans le modèle Filigrane</span><br /> <br /> Le code utilisé par Blogger pour le modèle <span style="font-weight:bold;">Filigrane</span> (<span lan="en">Watermark</span>)est le suivant&nbsp;<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> border: solid 1px #c00;<br /> padding: 5px;<br /> background-color: #fff;<br /> -moz-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);<br /> -webkit-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);<br /> -goog-ms-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);<br /> box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);<br /> <br /> </div><br /> <br /> Ce code produit une légère ombre portée, dont le rayon de flou est de 5px. Le décalage est de 1px. L'opacité de 50%. Le padding de 5px crée un cadre blanc (background-color: #fff;) autour de l'image. Pour afficher une ombre portée avec Internet Explorer il faut ajouter un filtre alpha comme ceci&nbsp;<br /> <br /> <div style="background: infobackground;padding: 4px; font-family: Arial, sans-serif; font-size: 0.9em;"><br /> filter:progid:DXImageTransform.Microsoft.Shadow(color='#cc0000', Direction=120, Strength=3);<br /> <br /> </div><br /> <br /> L'image obtenue&nbsp;:<br /> <br /> <center><img style="display:block; margin:0px auto 10px; text-align:center; width: 179px; height: 346px;" src="http://3.bp.blogspot.com/_kbpHBa3_G9o/TEYQrDCqqZI/AAAAAAAADJ0/0pCeyrG8axA/s400/box-shadow.jpg" border="0" alt="Ombre portée - modèle Filigrane" title="Ombre portée - modèle Filigrane" id="BLOGGER_PHOTO_ID_5496098726989179282" /></center><br /> <br /> <br /> <span style="font-weight:bold;">En savoir plus</span><br /> <br /> <a href="http://www.liens-du-vin.ch/transparent-border-script.htm" target="_blank" title="Gadget Google - photo avec un cadre semi-transparent">Un Gadget Google pour afficher une photo avec un cadre semi-transparent</a><br /> <br /> <a href="http://www.liens-du-vin.ch/test-062.html" target="_blank" title="Opacité et transparence, animer ses images">Opacité et transparence, animer ses images</a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2007/12/opacite-et-transparence-appliquer-un.html" target="_blank" title="Opacité et transparence, appliquer un filtre">Opacité et transparence, appliquer un filtre</a><br /> <br /> <a href="http://www.liens-du-vin.ch/border-pictures.html" target="_blank" title="Encadrer ses photos avec CSS">Encadrer ses photos avec du CSS</a> <br /> <br /> <a href="http://sites.google.com/site/annuairevin/border-picture-css" target="_blank" title="Des cadres pour ses photos avec du CSS en ligne sous Google Sites">Des cadres pour ses photos avec du CSS en ligne sous Google Sites </a><br /> <br /> <a href="http://aide-blogger-fr.blogspot.com/2008/07/des-cadres-pour-ses-photos-de-vacances.html" target="_blank" title="Des cadres pour ses photos sur Blogger">Des cadres pour ses photos sur Blogger</a><br /> <br /> <br /> <span style="font-size: 0.8em;">© Photos : <a href="http://www.diapo.ch" target="_blank" title="Diapo.ch">Diapo.ch</a>, <a href="http://www.c-d-c.ch" target="_blank" title="Clos Domaines et Châteaux">Clos Domaines et Châteaux</a> et <a href="http://www.liens-du-vin.ch" target="_blank" title="Les Liens du Vin">Les Liens du Vin</a></span><br /> <br /> <div class="blogger-post-footer"><p style="text-align: center;"><br /> &nbsp;<img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <a href="http://www.liens-du-vin.ch" title="Liens du Vin" target="_blank">&nbsp;Les Liens du Vin&nbsp;</a> <img src="http://www.liens-du-vin.ch/_pic01/vin004.gif" width="20" height="56" /> <br /></p><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/30801821-7607959851679380994?l=viti-vino.blogspot.com' alt='' /></div> <p><a href="http://feedads.g.doubleclick.net/~a/CfKfrGXk8BGmpVCjAFeCUxxXgUw/0/da"><img src="http://feedads.g.doubleclick.net/~a/CfKfrGXk8BGmpVCjAFeCUxxXgUw/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/CfKfrGXk8BGmpVCjAFeCUxxXgUw/1/da"><img src="http://feedads.g.doubleclick.net/~a/CfKfrGXk8BGmpVCjAFeCUxxXgUw/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/blogspot/viti-vino/~4/CMu7A_s2U70" height="1" width="1"/>Philippe Chappuisnoreply@blogger.com0http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html