Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2012/04/26

Google Drive et Blogger - Améliorer son Blog


Google Drive et Blogger - Améliorer son Blog

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.

Google Drive permet le stockage gratuit jusqu'à 5 Giga. Une petite astuce d'adressage permet de disposer de cet espace de stockage comme un hébergement internet. Nous allons en profiter pour améliorer notre Blog.

Google Drive - Blogger


Intégrer sur son Blog une page html hébergée sur Google Drive

A titre d'exemple, j'ai copié la page Diaporama des Premiers Grands Crus Vaudois, hébergée sur mon site Les Liens du Vin, sur Google Drive.
Une fois le document partagé et rendu public, Google Drive nous donne l'adresse suivante comme lien de partage (lien aperçu de l'affichage) : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm



Cette URL peut être utilisée comme lien, Le Diaporama des Premiers Grands Crus vaudois, ou comme adresse source pour l'intégration de la page sur le Blog.

Le code d'intégration, avec un tag iframe : 


<iframe src="https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></iframe>



Les Premiers Grands Crus des Clos Domaines et Châteaux

© Photos : Régis Colombo et Clos Domaines et Châteaux


Feuille de style pour un seul message

Pour une mise en page particulière, une feuille de style peut être hébergée sur Google Documents. Pour qu'elle s'applique à l'ensemble du Blog il faut placer cette instruction avant </head> : 


<link rel="stylesheet" type="text/css" href="URL feuille de style" />



Pour appliquer un style particulier à un seul message, il est possible de placer le style entre les 2 balises <style> et </style> 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.
Il suffit de placer ce petit script dans le html du message : 


<script> var cssNode = document.createElement('link');
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "URL feuille de style";
cssNode.media = "screen";
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>



Pour obtenir l'URL, nous effectuons les mêmes transformations que ci-dessus, sur l'URL fournie par Google Documents : 


https://docs.google.com/open?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg

https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg



La feuille test_style.css devient accessible et peut être utilisée sur le Blog.

A titre d'exemple, cette feuille de style est utilisée pour mettre en forme la liste ci-dessous : 

Quelques services Google


Les fichiers son (*.mp3)

Google Documents accepte les fichiers *.mp3. En effectuant le changement d'URL, le fichier devient lisible par un lecteur standard. J'ai utilisé le lecteur mp3 de Google Mail pour jouer un extrait du Gloria Patri de Jean-Sébastien Bach.


https://docs.google.com/open?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0

https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0



Le Gadget Google est inséré dans le html du message avec un tag iframe : 


<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">
</iframe>




Extrait J.S. Bach - Gloria Patri


Animation Flash

Un fichier Flash peut être hébergé sur Google Drive. A titre d'exemple, j'ai placé l'horloge Google et obtenu l'URL suivante : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf



Pour intégrer l'animation Flash dans un message, il suffit de placer les 2 scripts suivants dans le html du message : 


<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
var flashvars = { };
var params = { wmode: "transparent" };
var attributes = { id: "player_swf" };
swfobject.embedSWF("https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf",
"player_content", "200", "200", "9.0.0", false, flashvars, params, attributes);
</script>



Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message : 


<div id="player_content"></div>





Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit. Il faut creéer un répertoire en accès public puis placer les fichiers html dans ce répertoire.
Le répertoire public peut contenir tous les fichiers nécessaires à l'affichage d'une page Internet, en plus des pages html  : script (*.js), images (*.png ou *.jpg), fichiers sons (*.mp3) ou animation flash (*.swf).

J ai par exemple placé cette mini page html sur Google Drive : Etiquette de vin. Elle peut être intégrée sur le Blog par un tag iframe : 





Plus d'informations

Google Drive

Afficher une feuille Excel sur son Blog avec Google Viewer

Le lecteur de documents de Google Documents

Insérer la Timeline de Twitter sur son Blog

Les lecteurs MP3 de Google

Nivo Slider - Comment insérer un diaporama en utilisant Google Drive

Cloud Carousel - Comment insérer un carousel d'images en utilisant Google Drive

Insérer des Gadgets de iGoogle sur son Site

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE