blog d'aide pour blogger

Lire la Suite... suite

2009-09-11T17:55:00.007+02:00

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

Plus d'informations

- L'article de l'aide de Blogger

- Couper le message : les erreurs fréquentes

modération des commentaires (message d'administration)

2009-09-02T16:03:00.003+02:00

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.

Mini Lecteur Deezer pour son Blog

2009-08-26T22:30:00.010+02:00

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

Sonoriser ses images avec Dewplayer

Des gadgets pour son Blog

Geolocaliser les messages du blog

2009-02-25T22:33:00.024+01:00

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

Insérer une carte sur Google Sites

Les vignes vues du ciel

Videos de YouTube en Haute Qualite

2008-12-30T14:59:00.026+01:00

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é Normale

YouTube - Qualité Très haute
YouTube - Qualité Très haute

Plus d'informations

Des Gadgets pour son Blog

Utiliser le Le lecteur YouTube avec Google Sites

Encadrer ses textes

2008-11-23T17:55:00.021+01:00

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

Placer des Gadgets dans les éléments de la page

2008-11-19T22:54:00.011+01:00

Eléments de la page

Selon le template Blogger utilisé, les éléments de la page ne comportent pas de gadgets (anciennement appelés widgets) dans l'en-tête ou avant et après les messages du blog.

Ajouter des gadgets dans l'en-tête

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

2. Avant toute correction, faire une copie du template en cliquant sur le lien Télécharger le modèle dans son intégralité

3. Cocher l'option Développer des modèles de gadget

4. Rechercher dans le code html :

<b:section class='header' id='header' showaddelement='no'>

5. Remplacer par :

<b:section class='header' id='header' showaddelement='yes'>

6. Les nouveaux éléments de la page :

Ajouter des gadgets avant ou après les messages du blog

1. Rechercher dans le code html :

<b:section class='main' id='main' showaddelement='no'>

2. Remplacer par :

<b:section class='main' id='main' showaddelement='yes'>

3. Les nouveaux éléments de la page :

Les attributs optionnels

<b:section... maxwidgets='n' growth='vertical' ou growth='horizontal' ...>

maxwidgets : n est le nombre maximum de gadgets acceptés dans la section. Pas de limite si l'attribut ne figure pas

growth : Indique comment sont placés les gadgets, l'un sous l'autre (vertical - la valeur par défaut) ou l'un à côté de l'autre (horizontal)

Plus d'informations

Placer des Gadgets Google dans le corps du message blog. Un gadget Blogger (widget) peut contenir un Gadget Google.

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

L'aide de Blogger : Balises d'éléments de page pour la fonctionnalité de mise en page

Inserer un Gadget Google dans le corps du message

2008-11-15T22:23:00.027+01:00

Gadget Google

Si Blogger permet facilement l'ajout de Gadget dans les éléments de la page, rien n'est prévu pour ajouter un gadget dans le corps du message.

Un Gadget Google est une page xml dont le code exécutable est hébergé par Google. Ce code reçoit les paramètres du Gadget définis par l'utilisateur.

Sur la page HTML qui contient le gadget, celui-ci est encapsulé dans une balise <iframe> dont l'attribut src (source) donne l'adresse du Gadget avec ses paramètres.

Cette encapsulation est réalisée par Blogger lorsque l'utilisateur ajoute le Gadget dans les éléments de la page. Certaines pages encapsulent le gadget avec un script Javascript.

Malheureusement cette méthode est déconseillée avec Blogger, l'insertion du code entre les balises <script> et </script> devant être réalisée sans retour à la ligne (sinon Blogger insère des balises <br/> qui ne sont pas valides en Javascript - pour le cas où l'option Convertir les sauts de ligne est à Oui).

Où trouver des Gadgets Google

Le répertoire de Google en recense plus de 50'000 (état fin 2008). A la même date l'Unofficial Google Modules en compte plus de 10'000.

Sur un Blog ou une page Web visitée, un Gadget est généralement suivi du bouton Ajouter à Google (Add to Google) :

Un exemple

A la suite de l'article Un Diaporama pour Blogger, j'ai développé un Gadget Google qui regroupe tout le code nécessaire à l'affichage d'un Diaporama dans le corps du message.

Admettons que l'on veuille insérer dans le corps du message le gadget : Diaporama Picasa. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.

Obtenir le code du gadget

1. Ouvrir iGoogle (Mon Google) et cliquer sur Ajouter des Modules, puis sur Ajouter un flux ou un gadget et saisir l'adresse du gadget :

http://URL/nomdugadget.xml

ou cliquer sur le bouton Ajouter à Google si vous vous trouvez sur une page qui contient le gadget désiré.

2. Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option à propos de ce gadget :

3. Dans la rubrique Pour webmasters, choisir l'option Insérer ce gadget

4. Ajuster le gadget à la dimension désirée, ignorer les paramètres d'affichage, mais définir les paramètres du Gadget :

5. Cliquer sur obtenir le code. On obtient un script javascript, avec les paramètres URL encodés :

<script src="hebergeur?url=adresse_gadget&parametres ... parametres&w=xxx&h=yyy&title=titre-gadget...output=js"></script>

hébergeur : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr

adresse_gadget : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml

paramètres ... paramètres : Les paramètres du Gadget, sous la forme de couple up_nom=valeur séparés par le caractère & (ampersand - et commercial) URL encodé par &

w=xxx h=yyy : Les dimensions du Gadget, w pour width (largeur) et h pour height (hauteur).

&title=titre-gadget...output=js : la fin de la source, à ignorer !

Convertir le script en <iframe>

width="xxx" : La largeur du iframe

height="yyy" : la hauteur du iframe

allowTransparency="true" : La couleur de fond de la page hôte prime sur celle du iframe

frameborder="0" : pas de bord

scrolling="no" : pas d'ascenseurs

Le résultat

Intégrons cette iframe sur ce blog, avec un tag <div style="text-align: center;"> pour centrer le cadre (saisie sans retour à la ligne) :

<div style="text-align:center;"><iframe src="http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit
&url=http%3A%2F%2Fhosting.gmodules.com
%2Fig%2Fgadgets%2Ffile%2F108621208120033273647
%2Fpicasa-gadget-blog.xml
&up_File=http%3A%2F%2Fpicasaweb.google.fr
%2Fdata%2Ffeed%2Fbase
%2Fuser%2Fphilippe.chappuis
%2Falbumid
%2F5008507738518598193
%3Fkind%3Dphoto%26alt%3Drss
%26authkey%3D3wuzt3CsXf0%26hl%3Dfr
&up_Link=http%3A%2F%2Fwww.tendance9.com
&up_Titre=tendance9%20-%20light%20wine&up_Textcol=%23f00
&up_TextBcol=%23558866
&up_Bordercol=%23f00
&up_SlideBcol=%23eeeecc
&up_BoxBcol=%23558866" height="342" width="398" allowTransparency="true" frameborder="0" scrolling="no">URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div>

Et nous obtenons le Diaporama :

URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml

Plus d'informations

Placer des Gadgets Blogger (widgets) dans les éléments de la page

Créer un Gadget Google

Un Diaporama pour Picasa, Photobucket, Flickr et Yahoo News (Media RSS)

Lire un Diaporama en Flash, pour oublier la balise <embed>

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Ajouter une carte Google Maps dans ses messages.

Un WebClip pour son Blog

2008-10-24T23:02:00.014+02:00

Un WebClip est une icône de 57 par 57 pixels affichée sur la page des favoris de l'iPhone. C'est pour l'écran tactile (Apple-touch) l'équivalent de la favicon de la barre d'adresse d'un navigateur classique.

L'image

Un carré de 57 par 57 pixels qui est traditionnellement appelé apple-touch-icon.png.

Comme Blogger n'est pas un hébergeur, il faut enregistrer cette image sur un site qui accepte le format png.

Reconnaissance automatique de l'icône

Il faut informer le navigateur de la présence de l'icône (activation de la reconnaissance automatique - auto-discovery). Pour cela, placer une balise <link> dans l'en-tête du blog, entre les tags <head> et </head>.

Safari

Safari, le système d'exploitation qui équipe l'iPhone, se charge lui-même de créer l'arrondi sur le WebClip et d'ajouter les effets de transparence.

Article connexe

Une favicon pour son blog.

Des cadres pour ses photos de vacances

2008-07-26T22:19:00.016+02:00

Un cadre semi-transparent

En jouant sur l'opacité et la transparence, d'un bloc div, nous allons créer un cadre semi-transparent.

Un bloc extérieur va recevoir la photo comme image de fond et le bloc intérieur, sans contenu, servira à définir la bordure.

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 10.
Le bloc interne fait donc 320 - 2 * 10 = 300 par 210 - 2 * 10 = 190.

Chardonne - Mont-Pélerin : La carte

Un cadre doré

Un seul bloc div contenant l'image. Le cadre est réalisé par la propriété bordure. La couleur dorée, gold correspond au code couleur #ffd700.

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 6.
Le bloc fait donc 320 + 2 * 6 = 332 par 210 + 2 * 6 = 222.
Pour certain template de Blogger, ajouter margin-bottom: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin : La carte

Un cadre façon Polaroid

Un bloc div externe contenant la photo et un bloc div pour le bas, simulant la bande papier du polaroid.

<div style="width: 320px; margin: auto; padding: 15px;
background-color: #eeeecc; border: 1px solid black;
text-align: center; font-size: 0.75em;"><a href="URL lien sur l'image" title="titre du lien dur l'image" target="_blank"
style="border: 0 none; text-decoration: none; background-">
<img style="width: 320px; height: 210px; border: 1px solid black;"
src="URL image" title="titre image" alt="texte alternatif image" /></a><div style="margin: 10px auto 10px auto; ">
<a href="URL titre" target="_blank" title="titre"
style="border: 0 none ; text-decoration: none;">Titre</a></div></div>

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 15. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin - La carte

Un cadre double

Un seul bloc div contenant la photo.
C'est la bordure du bloc qui fait office de cadre.

<div style="border: medium double #558866; padding: 6px; background: #eeeecc;
width: 320px; margin: auto; text-align: center; font-size:11px; font-weight: bold; color: #a90707;">Titre de l'image<br/><br/><a href="URL lien sur l'image" title="titre du lien sur l'image" style="border: 0 none; text-decoration: none;" target="_blank"><img src="URL image" style="border: 1px solid #000; width: 320px; height: 210px; margin: 3px 0;" title="titre image" alt="texte alternatif image" /></a><br/><br/><a href="URL lien" title="titre du lien" target="_blank" style="border: 0 none ; text-decoration: none;">Lien</a></div>

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure latérale de 6. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Château de Chardonne

Chardonne - Mont-Pélerin - La carte

(*) : Les corrections spécifiques, selon le template de Blogger utilisé

Il s'agit de corriger le style du message qui spécifie le style par défaut d'une image, par exemple pour ce blog :

.post img
{
margin-top:0;
margin-right:0;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #bbbbbb;
}

Afficher ses photos sur Blogger

Le gadget (widget) Diaporama de Blogger et les Flux Media RSS

Une ligthbox (slimbox) pour afficher ses images

Sauvegarder et partager ses photos sur Internet. Une video explicative

Encadrer ses textes

Un article du Blog d'Aide pour Blogger

Crédit

L'article original, le blog Mandarin Design

Photos, Regis Colombo et Clos Domaines et Châteaux

Un filtre de couleur pour ses photos noir blanc

2008-06-23T21:16:00.016+02:00

En complément de l'article Opacité et transparence - Appliquer un filtre, une petite astuce pour appliquer un filtre de couleur à ses photos noir blanc.

Rappelons que le taux d'opacité varie de 0 à 100 sous Internet Explorer et de 0.0 à 1.0 sous Firefox. Une opacité de 80% filtre 20% de lumière.

1. L'image de base

Utilisons l'image de base comme fond d'un bloc div :

240px et 207px étant les dimensions de l'image originale. On obtient :

2. L'application du filtre

Sous Internet Explorer, il faut appliquer un filtre alpha, et utiliser l'instruction opacity sous Firefox

3. La source de couleur

Créons la source de couleur avec un bloc div de la taille de la photo, de couleur rouge orangé (orangered - #ff4500)

Ce bloc source va servir de conteneur à l'image de base, ce qui donne comme code :

Et le résultat, la photo en sépia :

Le travail de l'Homme

La même photo, en utilisant le vert (#007700) comme source de couleur :

Le travail de l'Homme

Crédit photos : Régis Colombo et Clos Domaines et Châteaux.

Une vignette au survol du lien

2008-05-03T21:13:00.007+02:00

Pour afficher une vignette (thumbnail / screenshot / aperçu miniature) du site au survol de la souris sur un lien, j'utilise websnapr.

Obtenir les fichiers

Télécharger le fichier previewbubble.zip .

La clé d'accès

S'identifier sur websnapr, pour obtenir une clé d'accès.

L'image de fond

Enregister l'image de fond, bg.png chez un hébergeur, par example Google Page Creator

Modifier le javascript

Ouvir le fichier previewbubble.js avec notepad et effectuer les 3 modifications suivantes :

1 - Introduire la clé d'accès

var developerKey = 'nnnnnnnn';

2 - Définir le chemin d'accès de l'image de fond

var bubbleImagePath = 'URL/bg.png';

3 - Fixer le nom de classe qui déclenchera l'affichage de la vignette

lbActions=WSR_getElementsByClassName(document,"a","nom_de_classe");

Introduire le script dans le blog

Paramètres / Modifier le code HTML

Placer le script previewbubble.js entre </b:skin> et </head>

On peut aussi enregister le script chez un hébergeur, et placer le script suivant :

Mise en oeuvre - code html

Il suffit d'ajouter le nom de la classe définie plus haut, dans l'attribut class du lien

Des exemples

L'aperçu du Blog d'Aide pour Blogger

En savoir plus sur les vignettes : Vignettes et DMOZ

Afficher une partie du message

2008-03-13T16:52:00.008+01:00

Comment présenter son Blog en n'affichant qu'une partie du message

Quelques Blogs affichent le début du message suivi de l'indication Lire la suite... (Read more...) sous la forme d'un lien. En cliquant sur le lien, le message complet s'affiche.

Ce que voit le lecteur

Le début du message ...
Lire la suite...

Ce que l'auteur du blog doit saisir

Il faut utiliser Modifier le code HTML pour enregistrer les 2 tags <span>

Le début du message ...<span class="fullpost">
la fin du message</span>

Le tag <span class="fullpost"> joue le rôle d'un marqueur qui délimite la première partie du message, celle qui va figurer sur la page du Blog. Le nom de classe CSS fullpost (message complet) peut être choisi librement, mais j'ai choisi de conserver ce nom proposé par Blogger.

Definir le style du lien Lire la suite...

En utilisant les pseudo-classes du CSS il est possible de créer un style spécifique pour le lien qui encapsule le texte Lire la suite...

Les styles doivent figurer entre les balises <head> et </head> du blog (Mise en page / Modifier le code HTML). Nous pouvons définir la classe fullpost ainsi que les styles associées au lien Lire la suite... en utilisant la classe cl_suite. Les pseudos-classes doivent être saisies dans l'ordre link, visited, hover et active (en anglais, mnémotechniquement LoVe-HAte). Un exemple ci-dessous (les pseudo-classes peuvent être modifiées) :

.cl_suite a:hover
{color: #00ff00; background: #ffff00;}

.cl_suite a:active
{color: #ff0000;}

.cl_suite a:focus

{color: #ff0000;}

</style>

Modifier la structure du Blog

Il ne reste plus qu'à modifier la structure du Blog (Mise en page / Modifier le code HTML / cocher développer le modèle de widget). Rechercher le code :

et insérer après <data:post.body/> et avant </p> :

<b:if cond='data:blog.pageType != "item"'>
<span class='cl_suite'><a expr:href='data:post.url' target='_blank'>
Lire la suite...</a></span>
</b:if>

Enlever target='_blank' pour afficher le message complet dans la même fenêtre.

Limitation

Attention si votre blog comporte beaucoup de messages, lors de l'introduction de cette modification, tous les messages comporteront Lire la suite... en fin de chaque message.

Exemple

Mon blog de test : chappuis.blogspot.com

Mise à jour

Blogger intègre depuis le 9 septembre 2009, cette facilité de saut (lien vers la page de message). Consultez l'article Lire la Suite... suite

Un Diaporama pour Blogger

2008-02-23T00:45:00.061+01:00

Ajouter un Diaporama (Slideshow) à son Blog

Il est possible depuis novembre 2007 d'ajouter un Diaporama comme élément de page. Ce nouveau widget est compatible avec les hébergeurs qui fournissent un flux media RSS.

Le Flux Media RSS

La source du Diaporama doit être un flux RSS au format media RSS. Les principaux hébergeurs de photos sur Internet proposent maintenant ce format. C'est simplement un fichier texte en format xml/rss, contenant le descriptif des medias à diffuser (son, image ou vidéo).

Titre

Le titre du Diaporama. Limiter le nombre de caractères si le diaporama doit être dans une colonne.

Source - Picasa Albums Web

Picasa, l'hébergeur d'images de Google, offre 2 options, soit l'affichage des images avec une sélection par mot clé, soit l'affichage d'un album précis. Dans ce cas il faut saisir le nom de l'utilisateur Picasa, suivi du nom de l'album.
Important : L'option mot clé doit être utilisée avec précaution car elle affiche toutes les images publiques ayant ce mot clé (tag / étiquette). Pensons aussi aux éventuels problèmes liés au droit d'auteur.

Source - Flickr

Flickr offre aussi 2 options, sélection des images par mot clé et par client. Mot clé fonctionne comme pour Picasa, l'otion client quant à elle demande le nom d'utilisateur Flickr. Celui-ci figure dans la barre d'adresse de Flickr, après avoir ouvert votre compte et cliqué sur Your Photos. Dans mon cas, l'adresse est :

http://www.flickr.com/photos/prac53/

Et le client à saisir : prac53

Source - Photobucket

Cet hébergeur n'offre qu'une seule possibilité, par mot clé. Ce sont les tags placés sur les images. Ne jamais perdre de vue qu'avec cette option l'ensemble des photos de Photobucket, avec un mot clé donné, sera affiché.

Source - Autre

Cette dernière option est certainement la plus utile. La sélection par mot clé ne permettant pas d'afficher uniquement ses propres images, l'option autre va nous permettre d'indiquer le flux media RSS de l'album à afficher.
Pour Photobucket, par exemple, se rendre dans afficher un album, puis copier le raccourci du bouton Album Feed. On obtient alors une URL comme celle-ci :

http://s266.photobucket.com/albums/ii244/prac53/feed.rss

Il suffit de recopier cette adresse dans la zone Flux.

Modifier la taille du Diaporama

Créer le Diaporama, puis se rendre dans le panneau de contrôle de Blogger. Cliquer sur Paramètres puis Mise en page et Modifier le code HTML. Choisir Développer des modèles de Gadget.
Rechercher le bloc div suivant :

Ajouter les dimensions désirées, par exemple 350 x 260 :

Exemple

Un diaporama réalisé à partir de mon album sur Flickr, Les Clos Domaines et Châteaux, sur le blog tendance9.

Utiliser directement le flux media RSS

Google, grâce à Google AJAX Feed API permet de configurer soi-même un diaporama, et d'y incorporer ses propres effets de transition et ses propres contrôles.

Incorporer la bibliothèque de code AJAX

Il suffit de 2 scripts :

Appel du Diaporama

Il est réalisé par le script suivant, qui définit la fonction de callback. Le détail des valeurs est donné dans le manuel de référence. La variable flux contient le nom du flux media RSS à traiter.

Positionner le Diaporama

Le code html suivant appelle le Diaporama :

<div id="travail_vigne" class="gss">En cours de chargement...</div>

Le style du Diaporama

Le style pour la classe gss :

.gss a img
{
border : none;
}

.gss
{
width: 229px;
height: 206px;
color: #dddddd;
background-color: #558868;
border: 1px solid red;
padding: 4px;
}

Pour ne pas alourdir ce blog avec ce style, je charge la feuille de style uniquement pour ce message, avec l'astuce décrite ici : Un style pour un seul message. La feuille de style peut être téléchargée ici.

Le résultat

Un Diaporama Le Travail de la Vigne - La Valeur de l'Homme (crédit photos : Regis Colombo pour l'Association Clos Domaines et Châteaux) :

En cours de chargement...

Le cas particulier de Yahoo

Yahoo, bien qu'à l'origine des spécifications du format media RSS fournit un flux d'actualité de photos qui n'est pas compatible avec ses propres recommandations.
Il faut corriger l'adresse du flux avec cette fonction :

function myUrlResolver(entry) {
var content = entry.content;
var start = content.indexOf("src=")+5;
var stop = content.indexOf(".jpg?",start)+4;
var thumburl = content.substring(start,stop);
return(thumburl); }

Ce qui donne la fonction callback suivante :

function load_yahoo() {
var flux = "http://rss.news.yahoo.com/imgrss/832";
var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize: GFslideShow.THUMBNAILS_SMALL,
scaleImages : true,
pauseOnHover: true,
displayTime: 2000,
transitionTime: 500,
linkTarget: google.feeds.LINK_TARGET_BLANK,
thumbnailUrlResolver : myUrlResolver
}

Et voici le résultat, avec le flux media RSS des photos des actualités science (disponible seulement sur yahoo.com en anglais) : :

En cours de chargement...

Rappel : Insertion de scripts sur Blogger

Les scripts mentionnés ici peuvent être insérés entre les balises <head> et </head> (Paramètres/Mise en page/Modifier le code HTML).
Dans ce cas ils seront actifs pour tous les messages du blog. Pour ne les activer que pour un seul message, il est possible de les saisir au début du texte. Attention cependant, dans ce cas, saisir le script sans retour à la ligne entre les balises <script> et </script>.

En savoir plus

Incorporer un Diaporama dans le corps du message, plus d'explications

Placer un Gadget Google dans le corps du message. Une façon pratique d'incorporer un Diaporama

Video : Utilité et fonctionnement des flux RSS

Utiliser un flux media RSS avec Google Page Creator ou avec Google Sites

Publier les Flux de ses Diaporamas sur www.takeslides.com

des problèmes de gestion des blogs avec Blogger et Google

2008-02-21T13:57:00.006+01:00

Sur le groupe d'aide Blogger, nous constatons une recrudescence soudaine des demandes de ré-installation de blogs "disparus". Je dois rappeler en préambule que, tant sur ce blog que sur le groupe d'aide, aucun représentant de Blogger n'est présent - en tous cas en tant que tel car il y en a peut-être pour s'inspirer de nos réponses pour améliorer leur service... - et que, par conséquent, il est inutile de les interpeler directement par ces canaux d'information.

Je vais essayer de synthétiser des remarques et réponses concernant certains points qui reviennent régulièrement ces derniers temps sur le groupe d'aide, ce blog ou bien directement sur mon mail. Je tiens à remercier les différents contributeurs et, en particulier, prac pour leur sérieux et leur disponibilité pour tenter de répondre à toutes vos demandes. L'informatique est une science exacte et tout le monde n'a pas la tournure d'esprit pour cela.

Les blogs marqués comme spam par erreur

Il suffit de suivre l'adresse indiquée lorsque l'on se connecte et Google libère le blog dans un délai de 1 à 7 jours.

Les problèmes temporaires d'accès à vos blogs

Il ne faut pas oublier de toujours consulter la page des statuts de Blogger (en anglais). Elle indique les pays et horaires de maintenance : http://status.blogger.com/

On peut aussi se reporter, en cas de problèmes, à la liste des erreurs connues ici : http://knownissues.blogspot.com/

Les blogs "disparus"

1/ Si l'on est co-auteur d'un blog, vérifier avec l'administrateur du blog que l'on figure toujours dans la liste des auteurs autorisés.
2/ Pour les autres cas, Google a prévu une procédure : http://help.blogger.com/?page=troubleshooter.cs&problem=&contact_type=blogdisappeared&Submit=Submit

Dans les cas de disparition définitive

Les conditions générales de Google signalent, et cela semble normal étant donné la gratuité du service, que ledit service est offert sans garantie. Google se réserve le droit de le supprimer n'importe quand et sans préavis !!!

Conclusion (provisoire?)

Toutes ces difficultés pourraient être relayées auprès de l'équipe technique de Blogger afin qu'ils soient au moins au courant. C'est pourquoi, je me propose de rechercher les moyens les plus rapides et les plus efficaces pour les joindre. Et je vous tiens au courant.

Une lightbox pour afficher ses images

2008-01-31T22:45:00.014+01:00

lightbox.js est un script de Lokesh Dhakar permettant d'afficher une image dans la page courante, avec un effet de transparence.

Un exemple, à partir d'une vignette ou d'un lien, affichons l'image agrandie à l'intérieur de la page courante :

Château de Vufflens - La noblesse des vins suisses

Les éléments à télécharger

Utiliser un hébergeur comme Google Page Creator, pour enregistrer à partir du site original :

Le script : lightbox.js

La feuille de style : lightbox.css

Une animation chargement en cours : loading.gif

L'icône fermer la fenêtre : close.gif

L'image utilisée pour l'effet de transparence (opacité 80 %) : overlay.png

Les modifications à apporter

Complèter l'adresse de 2 images dans le script (*URL* est à remplacer par le chemin de votre hébergement) :

var loadingImage = '*URL*/loading.gif';

var closeButton = '*URL*/close.gif';

De même, donner l'adresse de l'image de fond, dans la feuille de style (l'image blank.gif n'existe pas, c'est un leurre pour assurer le traitement correct de la transparence des fichiers PNG sous IE) :

#overlay {
background-image: url(*URL*/overlay.png) }

* HTML #overlay {
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="*URL*/overlay.png", sizingMethod="scale");}

Pour configurer le conteneur de l'image, il faut modifier l'id lightbox :

#lightbox /*style du conteneur */
{
border-right: #666 2px solid; /* la bordure du conteneur */
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: #666 2px solid;
background-color: #eee; /* la couleur du conteneur */
}

L'utilisation avec Blogger

Pour utiliser lightbox dans un seul post, ajouter au début du post l'appel au script :

Placer ce script entre les balise <head> et </head> si lightbox doit être utilisé dans plusieurs posts.

De même, entre les balises <head> et </head>, faire l'appel à la feuille de style destinée à configurer l'affichage de l'image :

L'appel d'une image avec l'effet lightbox se fait simplement en ajoutant rel="lightbox" dans l'ancre :

<a href="URL de l'image à afficher" title="titre image" rel="lightbox">le lien pour l'image à afficher ou un tag <img> avec une vignette</a>

Le cas particulier des grandes images

Si l'ancre contient l'adresse d'une grande image (cas fréquent sur Blogger), l'adresse est du type :

L'insertion de rel="lightbox" ne fonctionnera pas ! Le répertoire s1600-h contient en effet des pages html avec l'image à afficher, et non pas une image en tant que telle. Il faut remplacer le nom du répertoire à utiliser :

Un exemple

lightbox 2 : Afficher un ensemble d'images

La version 2, du même auteur, utilise le Framework Prototype et la bibliothèque Scriptaculous. Si elle autorise des effets graphiques plus performants, elle impose néanmoins de charger sur les pages qui utilisent lightbox2, plus de 50K de code. Les images sont appelées en utilisant la technologie AJAX.
Le principal avantage de cette version réside dans la possibilité d'afficher un ensemble d'images.

Sauvez la DPI a réalisé une version française (des images gif avec les textes en français). Un grand merci donc, de mettre à notre disposition un fichier *.zip complet.

Plus d'informations

Une explication plus complète sur mon site : Display your Pictures with Lightbox.

Un ensemble d'images affiché avec la version 2.

Un clone de lightbox, slimbox

La série complète des photos (la noblesse des vins suisses) présentée avec un slideshow

Les article originaux : la version 1 de lightbox.js et la version 2. Slimbox, un clone de lightbox.

Sauvegarde intégrale du blog Blogger

2008-01-18T08:56:00.000+01:00

Blogger ne dispose pas d'une fonction d'exportation ou de téléchargement pour sauvegarder vos blogs. Toutefois, vous pouvez utiliser les instructions suivantes afin de créer un seul fichier contenant tous les messages que vous avez publiés et le copier ensuite sur votre propre ordinateur pour l'utiliser comme vous le souhaitez. Note: Si vous avez l'intention de continuer à utiliser votre blog, enregistrez une copie de votre modèle actuel dans un fichier sur votre ordinateur.

1. Connectez-vous à votre compte Blogger, puis 'modèle'>'modifier le code html'.

2. Faites une copie de votre modèle actuel ('sauvegarder/restaurer un modèle'>'Télécharger le modèle dans son intégralité').
Vous allez remplacer votre modèle Blogger par le modèle de page unique à l'étape 3, mais vous ne voulez probablement pas perdre votre modèle d'origine.

3. Remplacez votre modèle Blogger par le texte suivant (vous devrez remplacer les ' au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):

'Blogger>
AUTHOR: <$BlogItemAuthor$>
DATE: <$BlogItemDateTime$>
-----
BODY:
<$BlogItemBody$>
--------
'/Blogger>

4. Cliquez sur 'Paramètres'> 'Publication' et modifiez le nom de fichier de votre blog dans "adresse BlogSpot", ce qui vous empêchera d'écraser votre fichier actuel d'index principal.
Notez le nom de fichier actuel de votre blog afin que vous puissiez restaurer une fois la procédure finie. [Note: Cela s'applique uniquement aux utilisateurs qui publient par FTP. Les utilisateurs de BlogSpot devront écraser leur page de blog existante, mais elle sera remplacée dès que le blog sera republié avec le modèle initial.]

5. Dans l'onglet 'Paramètres'> 'mise en forme', configurez votre blog afin d'afficher tous vos messages sur la page d'index principale. Il n'existe pas d'option spécifique pour cela : au lieu de cela, vous devez modifier le nombre de jours affichés sur votre page d'accueil (Voir N jours de messages sur la page principale, avec la limite de 500 messages) qui devra être supérieur ou égal au nombre de jours pendant lesquels vous avez posté depuis le début.

6. Dans le même onglet 'Paramètres'>'Mise en forme', donnez aux formats "Date/heure" les valeurs : JJ / MM / AAAA HH: MM: SS AM | PM. (Remarque: le format par défaut n'est pas comme ça dans le menu. Notez le paramètre actuel afin de pouvoir le restaurer après avoir fini.

7. Toujours dans 'Paramètres' > 'Mise en forme', configurez les sauts de ligne à la valeur "non".

8. Dans l'onglet 'Paramètres' > 'Archivage', configurez "fréquence d'archivage " à " aucune archive". Cela évitera que vos archives actuelles soit écrasées par le nouveau modèle.

9. Republiez votre blog, vous vous retrouverez avec un seul fichier contenant tous vos messages, présenté à l'aide du modèle ci-dessus, à l'emplacement spécifié dans vos paramètres (à l'étape 4, ci-dessus : nom de fichier BlogSpot). Ouvrez ce fichier dans votre navigateur Web et enregistrez le fichier sur votre disque dur local.

10. Restaurez les paramètres précédents (nom de fichier du blog, fréquence d'archivage, horodatage, etc) dans votre blog et remplacez le modèle temporaire, que vous venez de créer, avec votre copie enregistrée. Publiez le blog et la page pour vérifier que tout est correct.

Pour inclure les commentaires dans cette sauvegarde, il convient d'ajouter le code suivant à votre modèle, juste au-dessus du tag (vous devrez remplacer les ' au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):

'BlogItemCommentsEnabled>
'BlogItemComments>
COMMENT-AUTHOR:<$BlogCommentAuthor$>
COMMENT-DATE:<$BlogCommentDateTime$>
COMMENT-BODY:<$BlogCommentBody$>
--------
'/BlogItemComments>
'/BlogItemCommentsEnabled>

J'ai rédigé cet article en traduisant l'aide blogger qui se trouve ici et j'ai l'impression que cette dernière manipulation n'est pas très recommandée, je ne comprends pas très bien pourquoi. Si quelqu'un pouvait préciser ce point - ainsi que corriger les erreurs éventuelles probables de traduction - ce serait bien.

Opacité et transparence - Appliquer un filtre

2007-12-18T23:11:00.002+01:00

Opacité et transparence

Firefox et Internet Explorer (5.5 et au-delà) disposent d'un filtre qui peut s'appliquer sur une image ou un bloc de texte.

La théorie

L'opacité (opacity) est définie comme le complément à 100 du taux de transparence (!) du filtre. Ainsi une opacité de 95% ne filtre que 5% de couleur, alors qu'une opacité de 5% retient 95% des couleurs.
Sous Firefox, le paramètre opacity varie de 0 à 1, alors que sous Internet Explorer, on utilise un filtre alpha (opacity) variant de 0 à 100.

L'utilisation

L'opacité peut être utilisée pour un bloc div, un paragraphe, des titres, une table complète ou des cellules. Elle s'utilise aussi avec une image. Pour le cas d'une image, Internet Explorer impose de définir au moins l'une des dimensions (width ou height).

Utilisation dans un bloc div

Le bloc div sans filtre

Le bloc div opaque à 90 % - filtre de 10 %

Le bloc div opaque à 70 % - filtre de 30 %

Le bloc div opaque à 50 % - filtre de 50 %

Le bloc div opaque à 30 % - filtre de 70 %

Le bloc div opaque à 10 % - filtre de 90 %

Le style du bloc div

// le bloc div opaque à 70 se définit comme suit, la clause opacity pour FF et le filtre pour IE
.opaque70 {
opacity: .7;
color: white;
filter: alpha(opacity=70);
}

Un filtre sur une image

L'image initiale est affichée avec une opacité de 20 %, le filtre est supprimé en passant le curseur de la souris sur l'image.

Les Liens du Vin

Le code

// la fonction agit comme un flip-flop et passe d'une opacite de 20 % à 100 % (pas de filtre)
// document.all permet de tester le type de navigateur
//
function changevisibility(lowvis,highvis)
{
force=(highvis==0)? 1 : 0.2
if (document.all)
lowvis.filters.alpha.opacity=force*100
else
lowvis.style.opacity=force
}

Un filtre sur une image qui change continuellement

Pour Noël, une image dont l'opacité varie par incrément de 5 %

Les images des Liens du Vin

Le code

// setInterval permet l'appel toutes les 250 millisecondes de la fonction
// l increment d opacite est de 5 %
// document.all permet de tester le type de navigateur
//
op=0;
var op_plus = 1;
var op_moins = 0;
//
function f_opacity()
{
if (op < op_plus="0" op_moins="1"> 0.05 && op_moins)
op-=0.05
else
{
op_plus=1
op_moins=0
}
if (document.all)
document.getElementById("testop_change").style.filter="alpha(opacity=" + 100 * op +")";
else
document.getElementById("testop_change").style.opacity=op;
}
setInterval("f_opacity()",250);

Le fichier style et le javascript sont enregistrés sur Google Page

Le fichier Javascript, opacity.js

La feuille de style, style-blogger-testopaque.css

Créer un effet de transition entre images

Un exemple sur Google Page, cliquer sur la vignette pour voir l'effet de transition

Mes meilleurs voeux à tous les amoureux de Blogger

Ameliorer la visibilite de son Blog

2007-11-13T21:03:00.011+01:00

Mieux référencer son Blog

Si la visibilité d'un Blog sur les moteurs de recherche dépend surtout du contenu des billets, le blogueur débutant oublie souvent quelques points de détail qui permettent d'améliorer le positionnement de son Blog dans les résultats de recherche pour une requête. Rappelons qu'en moyenne 80% des internautes cliquent sur les 3 premieres réponses dans les résultats de recherche.

Les paramètres du Blog

Sous Standard, Ajouter le blog à nos listes (Add your Blog to our listings) : Oui

Permettre aux moteurs de recherche de trouver votre Blog (Let search engines find your blog) : Oui

Le Blog va figurer sous Blog Search et des Pings seront envoyés

Ping : envoyer un signal vers d'autres sites ou blogs dès qu'on publie un nouveau billet

Sous Flux d'actualisation, définir tous les flux sous complet

Flux : le fichier XML contenant les billets publiés sur le blog, voir un billet précédent

Modèle, Modifier le code HTML, Dans la section <head> :

Créer un tag <meta> title : Définir en 80 mots au plus, le titre du Blog

Créer un tag <meta> description : Une courte description (200 caractères maximum) du Blog

Créer un tag <meta> keywords : De 15 à 20 mots clés ou expressions, séparés par une virgule

Inscrire son blog

Dans l'index Google

Sur Site Explorer de Yahoo

Sur Microsoft Bing

Créer un sitemap

Sitemap : un fichier en format xml, qui liste l'ensemble des billets du Blog

Pour Google, rendez-vous sur les outils pour webmasters et inscrivez l'adresse du Blog.

Comme sitemap, indiquez (en remplaçant aide-blogger-fr par le nom du blog) :

http://aide-blogger-fr.blogspot.com/atom.xml

Plus d'informations ici

Pour prouver à Google que l'on est propriétaire du Blog, il faut placer une balise <meta> dans le Blog. Ajouter, dans la section <head> :

Pour Site Explorer de Yahoo, le principe est le même.

Choisir le titre de ses billets

Ne jamais utiliser des caractères accentués, Blogger crée une adresse URL à partir du titre.

Par exemple, Partager ses lieux géographiques favoris deviendra, malheureusement, partager-ses-lieux-gographiques-favoris , et le mot clé gographique n'amènera que peu de visiteurs !

Inscrire son Blog sur FeedBurner

FeedBurner propose un traducteur de Flux, et permet la création d'un bandeau de promotion pour son flux :

Publier ses Billets

Les Digg-like les plus courants :

Blogasty

Blog Memes

Bluegger

Digg

Fuzz

NUOUZ

Romanding

Scoopeo

Paperblog

Pour Pinguer son blog :

Pingoat

Ping-o-matic

Les conseils de Google

Optimisez aussi votre site pour le moteur de recherche Google. Un article du Blog Inside AdSense, en français.

Optimisez vos contenus - Guide pour des éditeurs de sites web, une brochure de Google en anglais ou en français, en format *.pdf (180 K).

Le guide pdf pour débuter en SEO (Search Engine Optimization), 22 pages de conseils selon Google (en anglais).

Faire la promotion de son Blog, selon le Centre d'aide Blogger

Référencer son Blog

Référencer son blog sur ToutLeMondeEnBlogue, selon ce billet

Autres trucs et astuces :

L'atelier de Mousie
Le Blog des Liens du Vin
Utiliser Google Sites
Gpooo

Libellés "en nuage"...

2007-11-01T14:06:00.001+01:00

-Les libellés sont extrèmement utiles sur les blogs, mais la présentation proposée par Blogger n'est pas très esthétique...Alors lorsque j'ai découvert les "Libellés en nuage", j'ai craqué et je suis en train de les installer sur mes blogs...Pour voir un exemple voyez ce blog ou cet autre.

.............................................................
Réalisation:

-Elle est très bien expliquée en français dans ce blog: Narrow street, précisément à cette page ...
C'est assez simple, il suffit d'avoir de la patience, de bien ouvrir la page html en développant les gadgets.

-Lorsque vous aurez réalisé votre "nuage" vous pourrez personnaliser la taille des libellés et les couleurs...
Les petites lettres ont la taille 10 et les plus grandes 20. J'ai augmenté la taille des petites et mis 11.

-Quant aux couleurs, vous les trouverez à cette adresse:
RGB Color codes
Utilisez les codes RGB (uniquement composés de chiffres) pour les "nuages", séparez chaque groupe de trois chiffres par une virgule.

-Exemple : modèle de base:
var maxFontSize = 20;
taille de police la plus grande
var maxColor = [0,0,255];
couleur de la police la plus grande
var minFontSize = 10;
taille de la police la plus petite
var minColor = [0,0,0];
couleur de la police la plus petite
modifié comme suit:

var maxFontSize = 20; taille de police la plus grande
var maxColor = [255,222,173];couleur de la police la plus grande
var minFontSize = 11; taille de la police la plus petite
var minColor = [255,255,240]; couleur de la police la plus petite

.....................................................
Les codes de couleurs pourront aussi vous servir pour les polices, fonds, bordures...de votre blog. Dans ce cas utilisez les codes comprenant des chiffres et des lettres, code Hexadecimal.
.....................................................
Récapitulatif : adresses utiles pour ce travail:
Hélène Marcy
Narrow street
RGB Color codes

Commentaires...couleurs...

2007-10-24T18:11:00.001+02:00

Réponse à Sophie
..........................................
Il semble que tu n'as pas vu mes messages ...ce qui me fait penser que les nouveaux n'ont pas forcément vu qu'ils pouvaient être prévenus par mail à chaque fois que quelqu'un dépose un message sur leur blog...
Alors tu vas dans "paramètres", "commentaires"...
Au bas de la page tu vois une case : "adresse de notification des commentaires"...
Tu mets ton email et tu enregistres les changements...
et tu reçois chaque commentaire dans ta boite à lettres... c'est très pratique...
.......................................
Deuxième question: pour changer la couleur du fond d'un blog modèle "rounder" comme celui-ci, aller dans la page html et remplacer
body {
background:#aba
par
body {
background:#000000
Ok?
........................................
quand vous ne connaisssez pas le code d'une couleur, par exemple 000000 pour le noir, allez dans personnaliser, modèle, polices et couleurs
en cliquant sur une couleur le code s'affiche...celà vous permet des modifications plus faciles si vous avez une idée précise des couleurs désirées...

Bannière...image...en-tête...ultra simple...

2007-10-17T18:34:00.000+02:00

En raison des modifications de Blogger, il est maintenant très facile de mettre une bannière sur son blog. Allez sur "Modèle", "Eléments", "Modifier En-tête"...

Choisissez une image ou une photo sur votre ordinateur par "Parcourir" ou "sur le web"...

Mais attention à la taille de votre image, celle-ci ne doit pas bien sûr être trop grande...celle de mon blog atelier est de 709/431 et fait 183 ko
voir ici: L'atelier
et celle de la page d'accueil de mes blogs anglais
voir ici: Plumpiemousie
fait 659/163 et 45, 8 ko...
ensuite enregistrez le tout...

L'image que vous placez en bannière se cale sur le côté gauche de la case réservée à cet effet...si elle est trop grande elle déborde sur la droite et n'est plus centrée pour un blog à deux colonnes...Voir ici...
Par contre on peut jouer sur la hauteur de l'image ...

images de fond ...suite...

2007-10-15T18:52:00.001+02:00

Résumé des épisodes précédents et nouvelle page plus précise...
Pour installer ces images, j'ai utilisé le service , en langue anglaise , du guide betabloggersfordummies...
Ceci est une traduction...
...................................................................
le paragraphe à insérer est le suivant:
body {
background:$bgcolor;
background-image:url(WEB URL OF YOUR PICTURE);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
...............................................................
Le nombre 120% contrôle le placement horizontal de l'image et le nombre 10% le placement vertical. Un pourcentage négatif poussera l'image vers le haut ou vers la droite. Pour certaines de mes images je suis desendue à 0,9% et 0,2%...Il faut avoir un peu de patience et jouer avec ces deux nombres.
............................................................

En fonction de l'image choisie pour le fond, vous pouvez désirer que le texte défile sur un fond fixe ou que l'ensemble défile.
Exemple de ensemble "fond + texte" mobile
Exemple de fond fixe et texte mobile
..................................................
Dans le paragraphe créé précédemment vous avez la phrase suivante:
background-attachment: scroll;
elle correspond au fond+texte mobile
Pour un texte mobile sur un fond fixe , remplacez scroll par fixed , comme ceci:
background-attachment: fixed;
.......................................................
et n'oubliez pas d'enregistrer vos changements...

Flux RSS - Quelques explications

2007-10-15T16:41:00.004+02:00

Définition

C'est un fichier texte dans un format particulier, le xml, dont le contenu est produit automatiquement. Ce fichier est composé de balises spécifiques encadrant du contenu.
Le format xml est un format texte lisible par un grand nombre d'outils informatiques. On parle de syndication de contenu (de l'anglais syndication - publication) . L'acronyme RSS signifie Really Simple Syndication.

En savoir plus : Une vidéo explicative sur les flux RSS

Dans Blogger

L'onglet flux d'actualisation (un autre terme pour flux RSS) regroupe les paramètres des 3 flux produits par Blogger.

L'adresse des flux

Les messages : http://NOMBLOG.blogspot.com/feeds/posts/default

Les commentaires : http://NOMBLOG.blogspot.com/feeds/comments/default

Les commentaires par message : http://NOMBLOG.blogspot.com/feeds/IDENTIFIANT/default

default peut être remplacé par summary ou full

Un libellé :
http://NOMBLOG.blogspot.com/feeds/posts/default/-/NOMDULIBELLE

En savoir plus : Le flux RSS des commentaires dans Blogger

Lire les flux

Les navigateurs récents (IE 7 et FF 2) détectent automatiquement les flux. On peut utiliser Google Reader comme lecteur de flux.

En savoir plus : Créer un clip à intégrer sur son site ou son blog.

Un gadget pour insérer un flux sur son Site ou son Blog.

Signaler la présence d'un flux sur une page

Blogger ajoute automatiquement, en fonction des paramètres de la page flux d'actualisation, les balises link nécessaires. Pour une page Web, si la page contient un flux, il faut ajouter la balise link :

<link rel="alternate" type="application/rss+xml" title="Titre du flux"
href="http://ADRESSEDUFLUX/rss.xml">

Autres trucs et astuces :

L'atelier de Mousie

Le Blog des Liens du Vin

Trucs et astuces pour Google Sites

Gpooo

Ouvrir les liens dans une nouvelle fenêtre

2007-09-26T16:20:00.002+02:00

La théorie

L'attribut target permet de désigner le cadre (au sens large) dans lequel la ressource désignée par l'hyperlien doit s'ouvrir. Par défaut le lien s'ouvre dans la fenêtre d'appel (formellement target="_self").
Pour ouvrir le lien dans une nouvelle fenêtre, il faut utiliser :

target="_blank"

La polémique

target a été indroduit en html 4 mais supprimé de la norme html 4.1 strict. Sans rentrer dans la polémique, relevons quelques arguments pour et contre :
Pour :
Ouvrir le lien dans la même fenêtre entraîne des déperditions de pages visitées pour le site initial
Présenter une information supplémentaire légère en appui de la page principale (aide contextuelle ou agrandissement d'une vignette)
Contre :
L'attribut target contribue au mélange du code relatif à la présentation et au contenu
L'espace de travail de l'utilisateur est encombré de fenêtres supplémentaires

Un lien textuel

Il suffit d'ajouter l'attribut target="_blank" au tag <a>. Par exemple :

Un nouveau site sur <a href="http://www.mauricegay.ch" target="_blank" title="Les vins du Valais">les vins du Valais</a>

Un nouveau site sur les vins du Valais

Un lien sur une image

Le tag <img> doit être encapsulé dans une ancre. Comme pour un lien textuel, il suffit d'ajouter l'attribut target="_blank" au tag <a>. Par exemple :

Ajouter automatiquement l'attribut target="_blank" dans la liste des liens du Blog

Pour que les liens du Widget Liste de Liens s'ouvrent dans une nouvelle fenêtre, il faut modifier le template :

Paramètres/Modèle/Modifier le code HTML/Développer des modèles de gadget

Rechercher : b:widget id='LinkList

(Il peut y avoir plusieurs listes de liens, LinkList1, LinkList2, ...)

<b:widget id='LinkList1' locked='false' title='Titre de la liste' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a href='data:link.target' target='_blank'>
<data:link.name/></a>
</li>
</b:loop>
</ul>
...

Il suffit d'ajouter target='_blank' (attention, encadré par une apostrophe).

Ajouter automatiquement l'attribut target="_blank" pour les posts

Paramètres/Modèle/Modifier le code HTML/Développer des modèles de gadget

Rechercher : b:includable id='post'

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' target='_blank'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
...

Ajouter deux fois target='_blank'

Autres trucs et astuces :

L'atelier de Mousie
Le Blog des Liens du Vin
Trucs et astuces pour Google Sites
Gpooo