blog d'aide pour blogger

dimanche 10 janvier 2010

Jouer un fichier *.mp3 sur son Blog

Jouer un Mp3 sur son Blog

Pour insérer un son sur son Blog, il faut un lecteur Flash qui joue le fichier *.mp3. IL faut donc héberger un lecteur Flash en plus des fichiers *.mp3.
Pour mémoire, Blogger n'offre pas d'hébergement de fichiers.

L'hébergement gratuit

Google Sites autorise l'hébergement (gratuit) de fichiers Flash (*.mp3) ainsi que de fichiers son (*.mp3). La limite d'un compte gratuit est de 100 Mégas. Les fichiers doivent être téléchargés dans une Page Classeur (File Cabinet).

Les lecteurs Dewplayer

Alsacréations a développé plusieurs lecteurs Flash.
Le fichier *.zip disponible en téléchargement contient tous les modèles, pour utiliser le modèle Classic par exemple, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Carl Orff, Carmina Burana, O Fortuna) :

Le lecteur audio de Google

C'est le lecteur intégré dans Google Mail :

http://mail.google.com/mail/html/audio.swf

Pour l'utiliser, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Bach BWV 243, Gloria Patri) :

Le lecteur multi-média de Google

Le lecteur multi-média de Google Reader est disponible à l'adresse suivante :

http://www.google.com/reader/ui/3247397568-audio-player.swf

Pour l'utiliser, nous allons l'appeler avec un Gadget Google, selon la technique décrite dans le Blog d'Aide pour Blogger, en utilisant le Gadget suivant :

google-audio_player.xml

Le code du iframe à saisir dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) :

Le résultat (Mozart, Requiem Dies Irae) :

Plus d'informations

Podcasting et fichiers joints sur Blogger

Des Gadgets Google pour son Blog

Le mini lecteur Deezer sur son Blog

Des lecteurs multi-média pour son Site ou son Blog (anglais)

Sonoriser ses images avec Dewplayer

Une Playlist sur son Site ou son Blog (anglais)

Trucs et astuces pour Google Sites (anglais)

vendredi 11 septembre 2009

Lire la Suite... suite

Un cadeau pour les 10 ans de Blogger

Intégrer le mécanisme Lire la Suite demandait plusieurs modifications importantes du modèle.

Blogger vient d'intégrer ce mécanisme dans l'éditeur de message.

Pour activer l'insertion d'un saut

- Utiliser Blogger in Draft ou avec la version classique de Blogger, le nouvel éditeur : Outil / Insérer un saut

- Plus simplement, avec l'onglet Modifier le code HTML, il suffit d'insérer le commentaire HTML

Pour définir le texte du saut

- Paramètres / Mise en page / Eléments de la page

- Messages du Blog / Modifier

Texte du lien de la page de messages

Problème connu

Depuis janvier 2010, les insertions d'objets Flash (code embed / object) placées avant le "lire la suite..." ne sont pas affichées, dans la version courte du message.

S'agissant de Youtube, il est possible d'utiliser un gadget ou, plus simplement de remplacer le code fournit par YouTube par un tag iframe (à insérer dans le html du message).

Le code fournit par YouTube :

Le même code dans un iframe :

Plus d'informations

- L'article de l'aide de Blogger

- Couper le message : les erreurs fréquentes

mercredi 2 septembre 2009

modération des commentaires (message d'administration)

Bonjour à tous,

En raison des pourriels incessants quoique japonais, j'ai pris la décision (pénible pour vous comme pour les administrateurs...) d'activer la modération des commentaires en attendant une possible intervention de Blogger pour assainir leur truc.

Merci de bien vouloir nous excuser pour ces désagréments. Je crois que vous pouvez éviter la modération de vos commentaires si vous vous abonnez au blog, bouton 'devenir un abonné fidèle' dans la barre supérieure "Blogger".

a+
BB.

mercredi 26 août 2009

Mini Lecteur Deezer pour son Blog

Installer un Mini Lecteur Deezer sur son Blog

Depuis la version 3 (juillet 2009) du site Deezer, le mini lecteur n'est plus disponible en standard.

La nouvelle version ne permet pas de choisir les couleurs du lecteur.

Le code à insérer

Le code HTML s'ajoute en utilisant l'onglet Modifier le code HTML ou par Ajouter Gadget. Dans ce cas choisir le gadget Javascript / HTML. Saisir le code suivant, sans retour à la ligne :

Les paramètres

idSong : S'obtient sur Deezer à partir de l'onglet Partager, rubrique Permalien. On obtient une adresse URL, contenant l'identifiant à jouer :

http://www.deezer.com/listen-1429492

autoplay : 0 ou 1 pour démarrer le morceau au chargement de la page

Le résultat

Plus d'informations

Insérer une PlayList avec le lecteur exportable Deezer, en version 3 : la procédure détaillée sur le Blog de BigBen

Sonoriser ses images avec Dewplayer

Jouer un fichier *.mp3 sur son Blog

Des gadgets pour son Blog

mercredi 25 février 2009

Geolocaliser les messages du blog

Le Geotagging pour Blogger

Même si l'insertion d'une carte dans les messages du blog reste une opération simple, il est fastidieux d'ajouter une carte après chaque message si l'on désire géolocaliser son message.

Blogger in draft vient à notre secours en permettant de géolocaliser le message par un simple lien vers une carte de Google Maps.

Modifier le modèle du Blog

S'enregistrer sous Blogger in draft. Cette version Brouillon, ne réalise pas les opérations suivantes qu'il faut (encore) effectuer soi-même.

1 - Effectuer une sauvegarde du modèle, en cliquant sur Télécharger le modèle dans son intégralité.

2 - Modifier le modèle pour enregistrer un espace de noms supplémentaire, l'espace georss

Paramètres / Mise en Page / Modifier le code HTML

Ajouter l'espace de noms georss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:georss='http://www.georss.org/georss'>

3 - Cliquer sur Développer des modèles de gadgets

4 - Rechercher le pied de message :


<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
           <span class='fn'>
   <data:post.author/>
  </span>
        </b:if>
</span>

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url'
  rel='bookmark' title='permanent link'>
  <abbr class='published'
  expr:title='data:post.timestampISO8601'>
  <data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
</span

 *** INSERER ICI ***

<span class='post-comment-link'>
...

5 - Avant le lien des commentaires (post-comment-link) insérer


<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'>
 <data:post.location.name/></a>
</b:if>
</b:if>
<br/>
</span>

6 - Sauver le modèle

Le geotagging des messages

A partir de l'article de référence, voyons comment géolocaliser un message.

1 - Rester sous la version draft (brouillon), et éditer le message

2 - L'éditeur de message comporte une nouvelle option : Pays/territoire, ajouter un lieu (onglet edition HTML)

3 - Saisir le lieu géographique en effectuant une recherche, de la même manière que dans la grille de recherche de Google Maps

4 - Effectuer les règlages détaillés (centrage, type de carte, niveau de zoom) et modifier éventuellement le libellé qui apparaîtra en regard du texte Pays/territoire

5 - Enregistrer. On a ainsi saisi la latitude et la longitude du point géographique à associer au message

Le résultat

Chaque message géolocalisé va comporter la mention Pays/Territoire et l'indication du lieu géographique.

Le code source du blog comporte un lien vers Google Maps avec les paramètres suivants (exemple, Rolle, Suisse) :

http://maps.google.com/maps?q=Rolle, Suisse@46.4707,6.3360&z=10

Le lien va s'ouvrir dans une fenêtre indépendante, comme dans l'exemple ci-dessous (le pied du message géolocalisé) :

Blogger va modifier les Flux RSS et Atom du blog et ajouter les tags :

<thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">
0
</thr:total>
<georss:point>lat long</georss:point>

Ces tags permettront aux agrégateurs de flux d'associer le message à sa position géographique. Nous allons voir que cela permet de réaliser l'opération inverse, associer un point géographique à un message du blog.

Verifier le nouveau flux avec Google Maps

Le nouveau flux du blog contenant maintenant les coordonnées des points géographiques, nous pouvons l'importer sur une carte de Google Maps

Ouvrir une carte, et cliquer sur Modifier. Choisir l'option Importer et saisir l'adresse du flux RSS du blog :

http://NOMDUBLOG.blogspot.com/feeds/posts/default?alt=rss

La carte doit comporter tous les géotags définis dans chaque message. Le marqueur donne accès à l'article correspondant du blog.
Nous passons ainsi de la carte sur le blog, à l'inverse, le blog sur la carte !!

Un exemple avec la carte des Découvertes des Liens du Vin :

Le Blog sur la carte

Limitation

Lorqu'un message est géolocalisé selon la méthode décrite ci-dessus, la géolocalisation ne peut pas être supprimée. Pour l'enlever du message il faut supprimer celui-ci et recréer le message sans la géolocalisation.

Un gadget pour créer le blog sur la carte de façon dynamique

Pour générer une carte Google Maps, avec tous les articles geocodés, Blogger propose le gadget :

http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml

L'insertion de ce gadget se fait avec :

Paramètres / Mise en Page / Eléments de la page / Ajouter gadget

Choisir l'option Ajouter votre propre (gadget) et saisir l'adresse URL du gadget.

Pour ajouter le gadget dans un message, suivre les indications de l'article du blog d'aide.

Pour configurer le gadget, saisir l'adresse du flux RSS du blog

http://NOMDUBLOG.blogspot.com/feeds/posts/default?alt=rss

Une fois le champ Blog's geoRSS feed URL renseigné, cliquer sur Mettre à jour, saisir à nouveau l'adresse du flux et ajuster la carte

La carte générée par le gadget positionne les marqueurs en fonction de la géolocalisation des messages du blog.
La bulle d'information du marqueur permet d'ouvrir une fenêtre indépendante avec le message intégral.

Plus d'informations

L'article de référence, Blogger in draft, Geotagging

Placer une carte personnalisée dans le message du blog

Géolocaliser rapidement une adresse avec un Google Web Elements

Insérer une carte sur Google Sites

Les vignes vues du ciel

mardi 30 décembre 2008

Videos de YouTube en Haute Qualite

Depuis fin 2008, YouTube permet d'enregistrer et de visionner des vidéos en Haute Qualité.

Les formats disponibles :

Visionner une vidéo en Haute Qualité

Pour visionner en Haute Qualité la Vidéo : Dance - Where the Hell is Matt?(2008), il faut indiquer l'adresse normale d'une vidéo YouTube, suivie du paramètre fmt=22 :

http://www.youtube.com/watch?v=zlfKdbWwruY&fmt=22

Insérer une vidéo en Haute Qualité sur son Blog

YouTube fournit le code suivant à insérer sur son blog (à insérer sans retour à la ligne) :

L'ajout du paramètres fmt=22 ne permet pas d'insérer la version Haute Qualité de la vidéo sur son blog !
Pour celà il faut ajouter un paramètre caché : ap, avec le paramètre fmt=22 URLEncodé . Ce qui donne :

ap=%2526fmt%3D22

Le code à insérer sur le blog devient donc (toujours sans retour à la ligne) :

On obtient le résultat suivant (lecteur 356 x 228, bordure verte, texte français) :

Dancing - Video YouTube Haute Qualité (fmt=22)

En cas de problèmes

YouTube affiche le message suivant : Désolé, cette vidéo n'est plus disponible (We're sorry, this video is no longer available) si la vidéo n'est pas disponible dans le format indiqué ou si la bande passante est trop faible pour le niveau de qualité demandé. Certains pare-feux limitent également le visionnage en Haute Qualité.

Un gadget pour insérer une Video YouTube

Google a développé une API comportant un lecteur Flash. Le gadget suivant utilise ce lecteur et évite l'insertion des codes <object> et <embed> pour afficher un lecteur YouTube sur son blog.

youtube-player.xml

Insérer le Gadget Google lecteur YouTube

Blogger permet facilement l'ajout d'un Gadget dans les éléments de la page : Mise en page / Eléments de la page / Ajouter Gadget / Ajouter votre propre (... Gadget) et saisir l'Url du Gadget à insérer.

Rien n'est prévu pour ajouter un Gadget dans le corps du message. Il faut utiliser la technique décrite dans un message précédent.

Les paramètres du Gadget :

Video : Le code de la Video YouTube, zlfKdbWwruY dans l'exemple ci-dessus
Taille : En pixels, 223 x 142, 425 x 264, 480 x 295, 560 x 345, 640 x 385, 848 x 500 (223 x 142 force Bordure à non)
Couleurs : gris blanc, noir gris, bleu gris, bleu, vert, orange, rose, violet, rouge
Bordure : oui ou non
Recherche : Grille de recherche YouTube, oui ou non (oui n'est valide que si Videosim est à oui)
Videosim : Videos similaires à la fin de la vidéo, oui ou non
Démarrage : Automatique lors de l'affichage de la page, oui ou non
Qualite : Normal, Haute, Haute (iPod), Très Haute
Plein : oui ou non, autoriser l'affichage plein écran
BoxBcol : Code #rrggbb couleur du fond

Note : Indiquer une taille pour le gadget en fonction de la taille choisie pour la Vidéo (par défaut, 860 x 520)

La comparaison

YouTube - Qualité Normale

YouTube - Qualité Très haute

Plus d'informations

Le Player de YouTube dans un message du Blog

Des Gadgets pour son Blog

Les Actualités sur YouTube, avec un Google Web Elements

Utiliser le Le lecteur YouTube avec Google Sites

dimanche 23 novembre 2008

Encadrer ses textes

Un cadre pour ses textes

Avec un peu de CSS (Cascading Style Sheets) il est possible d'encadrer ses textes avec des blocs div

Une boîte de texte

Nous allons créer une boîte de texte, avec un bloc div comprenant 3 blocs encastrés (le titre, le contenu et le pied).

Le code html

<div class="textbox">
<div class="textboxtop">Le titre</div>
<div class="textboxcontent">Le contenu</div>
<div class="textboxbottom">Le pied</div>
</div>

Le style CSS

A configurer selon l'aspect que l'on veut donner à sa boîte de texte. L'ordre border: style size color définit le cadre de la boîte. Les autres instructions se comprennent d'elles-mêmes.

.textbox
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
border: solid 2px #de7008;
}

.textboxcontent
{
font-size: 0.75em;
padding: 10px;
}

.textboxtop
{
padding: 5px;
background-color: #f2e9ca;
}

.textboxbottom
{
padding: 5px;
background-color: #f2e9ca;
}

Le résultat

pour centrer la boîte l'encadrer par <div style="text-align: center;"> ... </div>

Viti-Vino *** Liens du Vin ***

Le Blog des Liens du Vin. Le site pour apprécier les vins suisses et découvrir les vins du monde. L'historique du site réalisé avec Google Page Creator (GPC). Les outils Google et le cybermarketing

Les Liens du Vin

Des coins arrondis

L'arrondi est réalisé par une image. Le site Cornershop permet de les réaliser en ligne. Définir la couleur de la boîte ainsi que la couleur de la page. Choisir un arrondi de 10 pixels et Transparent = None.

Sauvergarder les 4 images *.gif obtenues. Elles peuvent être hébergées sur Picasa.

La structure des blocs

Le bloc principal comprend 3 blocs div encastrés. Le contenu viendra dans les blocs marqués en jaune.

Le code html

<div class="box">
<div class="boxtop"><div>Le titre</div></div>
<div class="boxcontent">Le contenu</div>
<div class="boxbottom"><div>Le pied</div></div>
</div>

Le style CSS

Il faut reporter dans les classes CSS boxtop, boxtop div, boxbottom et boxbottom div les 4 images *.gif des coins arrondis.

.box
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
}

.boxtop
{
background: url(URL/ne.gif) no-repeat right top;
}

.boxtop div
{
background: url(URL/nw.gif) no-repeat left top;
height: 10px;
padding: 5px;
}

.boxbottom
{
background: url(URL/se.gif) no-repeat right bottom;
}

.boxbottom div
{
background: url(URL/sw.gif) no-repeat left bottom;
height: 10px;
padding: 5px;
}

.boxcontent
{
font-size: 0.75em;
padding: 10px;
}

Le résultat

Annuaire du Vin

Annuaire du Vin avec Google Sites. Les outils Google et le cybermarketing duVin.

Google Sites : Annuaire du Vin

Faire flotter sa boîte de texte

Une boîte de texte flottante est un bloc div affiché à gauche ou à droite d'un bloc de texte qui s'enroule autour du bloc.

Un exemple

*** Flux Media RSS ***

Des gadgets pour afficher un Diaporama à partir du Flux Media RSS de Picasa, Photobucket, Flickr et Yahoo News. Incorporer ces diaporamas dans le corps du message - l'article du blog d'aide pour Blogger

Gadget Google

Le bloc div ci-contre est flottant à gauche. Il suffit d'ajouter dans le style du bloc style="float:left;". La marge entre le bloc flottant et le texte (marge de droite pour un bloc flottant à gauche) se définit dans le style du bloc flottant.
Pour stopper le flottement, créer un paragraphe avec style="clear:both;".
Si le texte en regard du bloc flottant est plus long que la hauteur du bloc, il s'écoule sous le bloc. Le bloc encadré donne ainsi l'impression de flotter sur le texte.

Modifier le style du blog

Pour incorporer ces nouvelles clauses de style dans le blog, 3 façons

1. Créer une feuille de style externe, qu'il faut héberger ailleurs que chez Blogger, et insérer l'appel de cette feuille entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)

2. Modifier le style du blog et créer une clause style entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)

3. Si le style ne s'applique qu'à un seul message, il est possible d'appliquer la clause de style en utilisant un petit code javascript qui va charger le style lors de l'affichage du message. C'est la méthode retenue pour ce billet, j'ai chargé la feuille de style externe avec ce petit javascript :

Ce script peut être placé au debut du message. Il faut saisir le code sans retour à la ligne (sinon Blogger incorpore la balise <br/> )

Plus d'informations

Créer ses coins arrondis en ligne avec CornerShop

Arrondir ses Photos en ligne avec RoundPic

Les codes couleurs en ligne avec ColorSchemer

Un style pour un seul message, une explication sur le Blog Viti-Vino

Encadrer ses photos, quelques astuces sur le Blog d'Aide pour Blogger