Blogger : astuces, gadgets et templates

Un formulaire de contact sur une seule page

noreply@blogger.com (Jimmy) — Sat, 25 Oct 2014 13:43:00 +0000

Finie l'utilisation d'un service externe pour ajouter un formulaire de contact sur son blog, il y a maintenant un widget pour ça !
Seul bémol, le widget s'affiche sur toutes les pages du blog, et n'est pas adapté à une utilisation classique.
Vous souhaitez afficher le formulaire de contact uniquement sur une page de votre blog ? Voici comment le faire, en 3 minutes.

Etape 1 : ajouter le widget à votre blog

Dans le menu de Mise en page, ajoutez juste en bas de la zone Articles du blog le widget de formulaire de contact, que vous trouverez dans la section "plus de gadgets".

A ce stade, nous avons un formulaire de contact géré par Blogger, qui fonctionne, et qui s'affiche en bas de toutes les pages. Et ça, c'est plutôt moyen...

Etape 2 : masquer le widget sur toutes les pages

Le widget a été automatiquement nommé par Blogger ContactForm1. Dans le code HTML de votre modèle, juste avant la ligne

]]></b:skin>

Ajoutez le bloc ci-dessous

#ContactForm1{
display: none;
}

Résumons : on a maintenant un formulaire de contact, mais on ne l'affiche plus du tout sur le blog. Pas exactement ce qu'on souhaite, mais vous verrez qu'on en est proche.

Etape 3 : n'afficher le widget que sur la page de contact

Créez une page Blogger, avec le texte d'introduction de votre choix. Passez au mode d'édition HTML de votre page, et ajoutez le bloc ci-dessous dans votre page :

<style type="text/css">
 #ContactForm1 {
 display: block;
}

#blog-pager, .blog-feeds, .post-footer,  #ContactForm1 .title {
 display: none;
}
</style>

Voilà, le formulaire ne s'affiche que sur cette page (c'est le but de la ligne display:block, et les éléments superflus (pieds de page article, flux, etc. sont masqués sur cette page.
Simple non ?

5 critères pour bien choisir son template Blogger

noreply@blogger.com (Jimmy) — Tue, 21 Oct 2014 10:46:00 +0000

Si trouver des templates Blogger sur internet n'est pas d'une grande difficulté, il se révèle en revanche plus délicat de choisir le bon. Je vous propose 5 critères pour vous aider à choisir un template pour votre blog.

L'aspect visuel et la mise en page

L'aspect visuel reste évidemment le premier critère à prendre en compte.

Selon la nature de votre blog, vous pourrez adopter un style de blog-magazine (mettant en avant les articles), un style de blog-photo (une plus grande place donnée aux image), un style de blog-social (mettant en avant les interactions avec vos visiteurs et les réseaux sociaux), ou d'autre encore.

La performance

Rappelez-vous, il n'est pas toujours bon de multiplier les widgets sur un blog Blogger.

Blogger est une plateforme de blogs hébergée, elle ne donne accès qu'à la conception de widgets qui s’exécutent sur la navigateur du visiteur. Dès lors, un widget personnalisé utilise généralement du temps de navigateur (et donc du temps du visiteur) pour afficher des données.

Utilisez l'outil PageSpeed de Google pour une idée des performances globale d'un template. Les templates fournissant souvent une page de démonstration, vos pouvez utiliser cet outil directement sur la page de démo.

Un design adaptatif

Depuis plusieurs années, les visiteurs sur mobiles et tablettes sont à prendre en considération au même titre que les visiteurs sur ordinateurs. Vous avez déjà fait l'expérience de sites agréables à consulter depuis votre PC, mais inutilisable depuis un mobile non ?

Votre modèle doit être adaptatif, c'est-à-dire qu'il doit proposer à vos visiteurs une expérience de navigation de qualité, quel que soit le support qu'il utilise pour le consulter. Choisissez les templates marqués responsive.

Là aussi PageSpeed se révèle très utile car il doit un score à l'expérience de navigation sur mobile proposée par vitre site. En complément, essayer également de naviguer sur la page de démo d'un template avec votre mobile perso pour vous faire une idée.

Astuce : si vous souhaitez aller au plus simple sans vous préoccuper de l'aspect adaptatif de votre template, choisissez d'utiliser un des modèles standards mobiles proposés par Blogger. S'ils ne sont pas complètement personnalisés, ils ont au moins le mérite d'être utilisables sur mobile.

Les références externes

Attention, danger ! Beaucoup de templates intègrent des widgets spécifiques, faisant appel à des codes (javascript) hébergés par des sites tiers. Qu'est-ce que ça signifie ? Que du jour au lendemain, votre beau widget affichant les derniers articles de votre blog ne fonctionne plus, car le code source utilisé et hébergé ailleurs aura été supprimé par son propriétaire.

Mon conseil : identifiez les références externes dans votre template (cherchez les "src=" dans le code HTML) comme autant de dépendances non maîtrisées.

Il est fréquent que le téléchargement d'un template intègre des fichiers complémentaires tels que les codes sources javascript ou les images de mise en page. Prenez la maîtrise de ces éléments en les déposant vous même sur un de vos hébergements en ligne (type free.fr), et en modifiant les références dans le code HTML de votre template.

Un modèle qui est vraiment un modèle

Faire des modèles, c'est un métier. Et comme certains professionnels en font une source de revenus, ils ont parfois tendance à en créer à la chaîne, sans se préoccuper dans la maintenabilité du code pour vous.

De fait, il est donc très fréquent que les modèles intègrent la plupart des éléments "en dur" dans le code HTML. Ce qui signifie que pour la moindre modification, il faudra aller à la pêche dans les 3000 lignes de codes HTML et espérer ne pas tout casser.

Le principe d'un modèle n'est-il pas d'être facilement personnalisable ?

Blogger propose des outils rapides d'éditions et de paramétrages, il est dommage que les éditeurs de templates ne cherchent pas plus à utiliser les variables de modèles ou les balises de données...

Mon conseil : installer votre template sur un blog de test et jouez avec. Essayer de personnaliser le widget "Articles du blog" par exemple, et observez l'effet des modifications sur votre blog. Si la plupart des modifications n'ont aucun effet, c'est que le contenu est intégralement défini en dur dans le code HTML.

Posez-vous la question : si vous souhaitez modifier quelques éléments de votre template et que le code HTML vous rebute, n'auriez-vous pas intérêt à utiliser un modèle facilement personnalisable ?

Utiliser les balises de données

noreply@blogger.com (Jimmy) — Mon, 20 Oct 2014 11:22:00 +0000

Lorsqu'on personnalise son modèle Blogger, ou qu'on utilise un modèle tiers, arrive toujours le moment où il est nécessaire d'apporter quelques retouches. Plutôt que d'aller faire des modifications "en dur" dans le code HTML du modèle, il est préférable d'utiliser dans la mesure du possible les balises de données mises à disposition par Blogger.
Cette page a pour vocation de compléter la page officielle relative aux balises de données. Elle sera mise à jour progressivement,

Données générales du blog

Ces données sont accessibles sous la forme <data:blog.xxx/>, où,xxx prend une des valeurs ci-dessous.

title : titre du blog, défini dans Paramètres > Basiques.

Exemple, pour ajouter un copyright automatique en pied de page :

Copyright 2014 <data:blog.title/>

pageType : type de la page courante, selon la classification suivante

item : page web unique d'un article
static_page : page statique (menu Pages de Blogger)
archive : page d'archives (contenant _archive.html dans l'URL)
index : page listant les articles, comme la page d'accueil ou une page de résultat de recherche

Exemple, pour afficher un élément uniquement sur les pages articles :

<b:if cond='data:blog.pageType == "item"'>
/* Elément à afficher */
</b:if>

pageTitle : titre de la page courante, généré automatiquement par Blogger et intégrant le titre du blog et des informations complémentaires, comme le titre d'un article. Généralement utilisé par défaut dans les modèles Blogger, il est préférable d'utiliser pageName pour optimiser le référencement des pages.

Exemple, pour définir le titre des pages du blog :

<title>data:blog.pageTitle/></title>

url : adresse URL de la page courante.

Exemple, pour n'afficher un élément que sur la page d'accueil :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
/* Elément à afficher *
</b:if>

homepageUrl : Adresse URL de la page d'accueil du blog.
(voir exemple précédent)

Données des widgets HTML/Javascript

Ces données sont accessibles sous la forme <data:xxx/> dans une section b:widget où,xxx prend une des valeurs ci-dessous.

title : titre du widget

content : contenu du widget.

Exemple : Par défaut, Blogger définit le code d'un widget en affichant titre et contenu.

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'> </h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Il peut être utile de donner un titre à ses widgets pour les reconnaître facilement dans la mise en page de son modèle, sans vouloir afficher le titre du widget sur son blog. Dans ce cas, il suffira simplement de changer le code généré en :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

Ainsi, dans tous les cas, seul le contenu du widget sera affiché.

Données liées aux articles du blog

Données générales

top.showAuthor : indique si le widget affiche l'auteur de l'article, tel que paramétré dan la fenêtre de configuration du widget (<data:top.showAuthor/>)

authorLabel : libellé "Publié par" paramétré dans la fenêtre de configuration du widget Options de la page d'articles (<data:authorLabel/>)

top.timestampLabel: libellé préfixant l'heure de publication, tel que paramétré dan la fenêtre de configuration du widget (<data:top.timestampLabel/>)

top.postLabelsLabel: libellé présentant les tags associés à l'articles (<data:top.postLabelsLabel/>)

top.sharePostUrl : Indique si les boutons de partage sur les réseaux sociaux sont affichés (<data:top.sharePostUrl/>)

top.reactionsLabel : libellé présentant les réactions à l'article (<data:top.reactionsLabel/>)

top.showLocation : Indique si les données de géolocalisation de l'article sont affichées (<data:top.showLocation/>)
postLocationLabel : libellé de géolocalisation des articles (<data:postLocationLabel/>)

Classe posts

Les articles du blog sont parcourus au sein d'une boucle b:loop

<b:loop values='data:posts' var='post'>

Chaque article est alors référencé dans la boucle par la variable post, donnant ainsi accès aux données ci-dessous, par <data:post.xxx/>

id : l'identifiant de l'article (<data:post.id/>)

title : titre de l'article (<data:post.title/>)

url : permalien (URL unique et fixe) de l'article (<data:post.url/>)

link : lien hypertexte intégrant titre de l'article et permalien (<data:post.link/>)

body : contenu l'article (<data:post.body/>)

isFirstPost : indique si l'article est le premier de la liste d'articles d'une page index (home ou recherche)
Exemple : pour afficher un élément uniquement pour le premier article d'une page :

<b:if cond='data:post.isFirstPost'>
 /* Elément à afficher */
</b:if>

isDateStart : par défaut Blogger regroupe les articles par date de publication. Ce flag indique si la date du post considéré est une nouvelle date (ie. date du premier post, ou date différente du post précédent).
Exemple : pour afficher un séparateur avant chaque date de publication :

<b:if cond='data:post.isDateStart'>
 /* Séaparateur */
</b:if>

dateHeader : date de l'article, uniquement pour le premier article de chaque date

firstImageUrl : URL de la première image de l'article. Peut être utilisé pour générer des vignettes notamment.
Exemple : pour afficher la première image d'un article

<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>

hasJumpLink : indique si l'article contient une balise more (lien de type Lire la suite).
jumpText : libellé paramétré dans la fenêtre de configuration du widget (Texte du lien de la page d'articles)

Exemple classique pour afficher un lien "Lire la suite" pour les articles en intégrant un :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

author : nom de l'auteur
authorProfileUrl : lien URL vers la page profil de l'auteur de l'article

showTimestamp : indique si l'heure de publication doit être affichée

allowComments : indique si la publication de commentaires est autorisée sur l'article

showBacklinks : indique si les backlinks sont affichés
data:post.backlinksLabel : libellé indiquant les backlinks

editUrl : si le widget affiche le lien d'édition rapide, cette donnée contient l'URL d'édition de l'article

emailPostUrl : si le widget affiche les liens d'envoi par e-mail, cette donnée contient l'URL d'envoi

labels : contient tout les tags associés à l'article.

Extrait en page d'accueil et lien "Lire la suite..."

noreply@blogger.com (Jimmy) — Sun, 12 Jun 2011 10:20:00 +0000

Pour répondre aux interrogations de certains visiteurs, voici comment afficher un extrait des vos billets sur la page d'accueil de votre blog et ajouter un len "Lire la suite..." pour accéder à l'intégralité d'un billet.

1) Dans le menu Mise en page, cliquez sur le lien Modifier de l'élément Articles du blog. Dans la fenêtre qui s'ouvre, choisissez le libellé du lien qui servira à accéder aux billets complets, à la ligne Texte du lien de la page de messages :

2) Ecrivez votre billet dans l'éditeur Blogger, en mode "Rédiger"

2) A l'endoit où vous souhaitez fixer la limite de l'extrait du billet, utiliser le bouton "marqueur d'expansion" de l'éditeur.

3) Sauvegardez votre article.

4) Voilà, regardez le résultat sur votre blog. Rien de tel pour une page d'accueil éclaircie !

Nouveau : les affichages dynamiques

noreply@blogger.com (Jimmy) — Thu, 31 Mar 2011 20:05:00 +0000

Ceux qui veulent s'amuser un peu avec leur blog peuvent jouer avec les affichages dynamiques proposés depuis peu chez Blogger.

Attention, les vues ne fonctionnent que si votre blog remplit certains conditions, notamment sur la diffusion de vos flux. Plus d'informations dans le centre d'aide Blogger.

Notez que certaines fonctions type bandeaux de publicités Adsense ne sont pas encore gérées, mais devraient arriver prochainement. Si vous le souhaitez, vous pouvez désactiver ces vues dynamiques dans vos paramètres Blogger.

Amusez-vous bien.

Des meta tags efficaces

noreply@blogger.com (Jimmy) — Sun, 09 Jan 2011 18:49:00 +0000

Sur une suggestion de Jeff, voici un petit article pour aborder la question des meta-tags : comment avoir un titre de page correct, une description cohérente, et faire que le tout soit optimisé pour le référencement !

Etape 1 : localisez les balises

Dans le code HTML de votre template, localisez la ligne ci-dessous :

<title><data:blog.pageTitle/></title>

Cette ligne définit le titre d'une page (balise title). Supprimez cette ligne, et passons à la seconde étape

Etape 2 : ajoutez des meta-tags améliorées

Collez le code ci-dessous en lieu et place du précédent :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <title>Titre général : <data:blog.pageName/></title>
 <meta expr:content='data:blog.pageName + &quot; Description générale&quot;' name='description'/>
<b:else/>
 <title><data:blog.pageTitle/></title>
 <meta content='Description générale' name='description'/>
</b:if>

Les éléments en vert doivent être personnés, selon vos souhaits et le thème de votre blog.
Ce code intègre une condition, pour un peu plus de finesse :

Si la page ouverte est un billet

son titre est le titre du billet, avec un titre général si vous le souhaitez
sa description reprend le titre du billet, et se complète avec la description de votre choix

Si la page ouverte est la page d'accueil
- son titre est le titre du blog
- sa description est celle de votre choix

J'utilise ce blog de code sur tous mes blogs Blogger, sans problème. Une variante consiste à ne pas mettre de Titre général avant le titre des billets, tout dépend de la façon dont vous construisez les titres de vos billets : ajoutez quelques mots-clés avant (ou après) tous les titres de billets peut être bénéfique pour le référencement.

N'abusez pas des widgets !

noreply@blogger.com (Jimmy) — Thu, 28 Oct 2010 11:19:00 +0000

Saviez-vous que l'abus de widgets peut être dangereux pour votre blog ?
Voici pourquoi...

Blogger est la solution idéale pour ceux qui souhaitent démarrer un blog rapidement, sans encombre, et sans avoir à se demander ce qu'est une base de données ou une page PHP. Les autres auront tout le loisir de s'orienter vers des solutions comme Wordpress ou Joomla, je serais même le premier à leur conseiller.

Chez Blogger, on clique, on déplace, on re-clique. Au pire, on copie-colle un morceau de code trouvé sur un site proposant des astuces et des gadgets pour la plateforme Blogger. L'endroit rêvé pour le néophyte.

Ceci dit, la philosophie Blogger mérite d'être regardée d'un peu plus près. Pour faire simple, je vous propose deux règles :

Sur n'importe quel site, toute fonctionnalité ajoutée a de grandes chances d'alourdir votre site.

Sur Blogger, toute fonctionnalité ajoutée a de grandes chances d'alourdir votre site, et il y a fort à parier que c'est votre visiteur qui en paiera le plus lourd prix.

Pourquoi cette précision ? Parce que chez Blogger, vous ne pouvez accéder directement aux données de votre blog que par la manière dont la plateforme le permet.

Ainsi, lorsque vous souhaitez afficher les billets d'un blog dans l'ordre alphabétique, ou le nombre de billets ou de commentaires postés, vous devez passer par un moyen détourné. Dans ces 2 exemples, c'est le navigateur de votre cher visiteur qui va lire le flux RSS de votre blog, le traiter, et l'afficher, en plus de son activité "normale (afficher la page d'acueil ou un billet consulté). Résultat ? Quelques dixièmes de secondes en plus pour afficher la page complète.

Dès lors, vous comprendrez que multiplier les opérations de ce type revient à ajouter des opérations qui ne sont faites en grande partie par le PC de votre visiteur et très peu par le moteur de Blogger.

Utilisez donc les widgets avec parcimonie, chérissez vos visiteurs (une page lente est une page qui est fermé rapidement), et si ça ne vous suffit pas dites vous que les pages performantes ont plus de chances d'êtres bien placées dans Google que les autres.

Ne transformez pas votre blog en guirlande de widgets, et n'ajoutez des fonctions que si elles y apportent quelque chose.

Gardez donc un œil sur les performances de vos blogs en utilisant notamment les Webmaster Tools. Vous obtiendrez quelque conseils d'optimisation, et des statistiques sur les performances de vos blogs perçues par Google.

Module de recommandations Facebook

noreply@blogger.com (Jimmy) — Fri, 08 Oct 2010 13:55:00 +0000

Grâce aux plugins sociaux de Facebook, vous allez pouvoir recommander sur votre blog les articles que vos visiteurs jugent intéressants !

Supposons que vous avez accroché un visiteur, qui accède à votre blog en provenant d'un moteur de recherche par exemple. Il consulte une des pages du blog, aime ou n'aime pas ce qu'il lit et... et quoi ?

Soit il quitte votre blog sans plus attendre, ou soit il continue d'y naviguer parce qu'il a peut-être trouvé autre chose d'intéressant à consulter. En analyse de trafic web, on parle du taux de rebond, qui représente la proportion de vos visiteurs qui ne consultent qu'une seule page d'un site.

Certains gadgets sont destinés à accroitre le trafic interne d'un blog en proposant à vos visiteurs une consultation rapide des billets qu'il pourraient juger intéressants : l'affichage des billets les plus récents ou la liste des billets liés en sont des exemples répandus.

Aujourd'hui, je vous propose d'aller plus loin. Une bonne partie de vos visiteurs possède certainement un compte Facebook non ? En plus, si vous avez intégré les boutons de partage Facebook sur votre blog Blogger, on peut penser que certains d'entre eux ont marqué certains de vos billets comme intéressants.

Utilisez alors le module de recommandations Facebook pour afficher sur votre blog les billets recommandés par vos visiteurs eux-même, quoi de plus naturel ?

Ajoutez à votre modèle de blog un gadget de type HTML/Javascript, et entrez-y le code suivant :

<iframe src="http://www.facebook.com/plugins/recommendations.php?site=votresite.blogspot.com&width=200&height=300&header=false&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:300px;" allowtransparency="true"></iframe>

Bien sûr, vous modifierez votresite.blogspot.com par l'adresse exacte de votre blog.

Et voilà un joli module de recommandations sur votre blog !
La démo :

Si vous souhaitez personnaliser (un peu) le gadget, je vous invite à lire la page du plugin Recommandations
PS : Le code est valable pour n'importe quel site ou blog.

Liste des billets par ordre alphabétique

noreply@blogger.com (Jimmy) — Thu, 19 Aug 2010 19:27:00 +0000

Un utilisateur Blogger de passage m'a demandé s'il était possible d'adapter le gadget affichant les derniers billets postés, pour afficher la liste des billets publiés mais dans l'ordre alphabétique cette fois.

Voici comment faire.

Je publie ci-dessous le code complet, accompagné de plusieurs remarques :

Ce gadget peut être utilisé comme un gadget (normal me direz-vous), mais aussi dans un billet et notamment dans une page statique. Ainsi, vous pouvez vous en servir comme index alphabétique de vos billets, comme sur cette page de démo listant les billets publiés sur PourBlogger.

Pour vous en servir comme gadget, copiez le code dans un gadget de type HTML/Javascript

Pour vous en servir dans une page, copiez le code ci-dessous en mode "Modifier le code HTML" dans l'éditeur de billets.
Le gadget ne fonctionne qu'avec moins de 500 billets. Si besoin, je verrais ce que je peux faire pour gérer des blogs de plus forte capacité.
J'ai codé rapidement ce gadget, il est possible que quelques bugs s'y cachent, ne m'en voulez pas :)

<script type="text/javascript">
function suppaccent(chaine)
{
  ch = chaine.replace(/[àâä]/gi,"a")
  ch = ch.replace(/[éèêë]/gi,"e")
  ch = ch.replace(/[îï]/gi,"i")
  ch = ch.replace(/[ôö]/gi,"o")
  ch = ch.replace(/[ùûü]/gi,"u")
  return ch;
}

function tri_alpha (a, b)
{
  var titreA=suppaccent(a.titre.toLowerCase()), titreB=suppaccent(b.titre.toLowerCase());

  if (titreA < titreB)  return -1;
  if (titreA > titreB) return 1;
  return 0;
}

function afficheTousBillets(json)
{
  var tabbillet = [];
  nb_billets = json.feed.entry.length;
  for (var i = 0; i < nb_billets; i++)
  {
    var entry = json.feed.entry[i]; 
    // Titre
    var billet_titre = entry.title.$t;
    // URL du billet
    var billet_url;

    for (var j = 0; j < entry.link.length; j++)
    {
      if (entry.link[j].rel == 'alternate')
      {
        billet_url = entry.link[j].href;
        break;
      }
    }
    tabbillet[i]={titre:billet_titre, url:billet_url};
  }
  tabbillet = tabbillet.sort(tri_alpha);

  for (var i = 0; i < nb_billets; i++)
  {
    if(i==0) document.write('<ul>');
    document.write('<li><a href="'+ tabbillet[i].url+'">'+ tabbillet[i].titre + '<\/a><\/li>');
    if(i == nb_billets-1) document.write('<\/ul>');
  }
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=afficheTousBillets&max-results=500">
</script>

Boutons de partage Facebook Twitter... dans Blogger !

noreply@blogger.com (Jimmy) — Sat, 19 Jun 2010 09:39:00 +0000

Nouveauté dans Blogger: l'intégration automatique de boutons de partage Twitter, Facebook, Google Buzz, et Blogger !

Finies les prises de tête pour insérer des morceaux de code compliqués et pas toujours adaptés à toutes les situations. Et plus besoin de faire un appel à un fournisseur externe, type AddThis, maintenant tout est intégré dans Blogger.

Pour ajouter une barre de partage à votre blog, connectez vous sur Blogger in draft.

Dans le menu Présentation > Éléments de page, cliquez sur le lien Modifier du widget Messages du blog.

Cochez l'option Afficher les boutons Partager , comme sur la capture d'écran ci-dessous :

La barre de partage peut être positionnée comme tous les autres éléments de messages par simple glisser-déplacer, dans la section Organiser les éléments :

Enregistrez, et les boutons de partage apparaissent sur votre blog !

Si ce n'est pas le cas, c'est sans doute que vous utilisez un template personnalisé. Dans ce cas, vous devrez ajouter à la main le code correspondant à ce nouveau widget :

<b:include data='post' name='shareButtons'/>

L'ajout est à effectuer dans la section Présentation > Modifier le code HTML (cochez Développer les modèles de gadgets). Localisez dans le code une section de type post-footer-line, et ajoutez y le code de la barre de partage. Vous devriez avoir une section ressemblant à ça :

<div class='post-footer-line post-footer-line-3'>
   <b:include data='post' name='shareButtons'/>
</div>

Enregistrez les modifications. Et voilà !

Associer un nom de domaine à un blog existant

noreply@blogger.com (Jimmy) — Thu, 27 May 2010 17:57:00 +0000

Votre blog commence à avoir du succès ? Vous désirez lui donner un peu plus de crédibilité ?
Il est peut-être temps d'acheter un nom de domaine pour l'associer à votre blog !

Pour une transition sans problème, suivez ces 4 étapes.

1 : Configurer le nom de domaine

Si vous n'achetez pas directement votre nom de domaine sur Blogger, il convient de faire pointer le nom de domaine sur votre blog.
Pour cela, il faut paramétrer les options DNS de votre nom de domaine :

Créez un enregistrement CNAME, associé à ghs.google.com. (attention, bien mettre le point final)
Créez 4 enregistrements A, avec les adresses IP suivantes
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Par exemple, avec Gandi, voici ce que ça donne :

La prise en compte des ces modifications peut prendre de quelques heures à 2 jours, le temps que le nouveau paramétrage se propage à travers les serveurs DNS.

2 : Configurer Blogger

Pour associer le blog au nom de domaine, il faut maintenant effectuer quelques réglages côté Blogger.
Ceci permettra également de mettre à jour tous les liens gérés automatiquement par Blogger (Exemple : monblog.blogspot.com/p/article1.html deviendra monblog.com/p/article1.html).

Dans Paramètres > Édition, choisissez de basculer vers un domaine personnalisé

Saisissez votre nouvelle adresse, et enregistrez les paramètres.

3 : Mettre à jour les liens

Pour assurer une certaine cohérence, et préparer le terrain de la dernière étape, assurez-vous qu'il n'y ait plus de référence à l'ancienne adresse, que ce soit dans le modèle du blog ou dans les billets.

Dans le modèle : dans le code HTML du modèle, faites un simple CTRL+F pour rechercher les mentions à l'ancienne adresse. Remplacez les par la nouvelle adresse.
Dans les billets : vous pouvez soit repasser sur tous les billets un à un, et modifiez les références à l'ancienne adresse. Astuce : vous pouvez exporter vos messages (Paramètres > Général > Exporter le blog), ouvrir le fichier extrait dans un éditeur, et replacer en une seule passe toutes les anciennes adresses. Vous n'avez plus ensuite qu'à réimporter votre blog, en ayant supprimé les billets existants au préalable.

4 : Gérer la transition du référencement

Remplacer l'adresse en blogspot.com par un nouveau nom de domaine vous fera probablement perdre vos positions dans Google, au moins pendant un temps. Voici quelques astuces pour limiter le phénomène.

Les mots clés dans l'adresse ont de l'importance dans le classement Google. Si votre nom de blog était constitué de mots-clés, essayez de prendre un nom de domaine équivalent (exemple : rallye-automobile.blogspot.com deviendra www.rallye-automobile.net).
Mettez à jour tous vos liens entrants : contactez vos partenaires afin qu'ils modifient les liens de leur site vers le votre.
Référencez votre nouvelle adresse dans les Google Webmasters Tools, et soumettez votre sitemap.
Patientez. L'étape la moins facile finalement. Mes différentes expériences montrent que la transition va s'effectuer en 3 phases :
- déclassement de l'ancienne adresse : la perte de positions commencera quelques jours après l'opération. Ne soyez pas étonner d'avoir beaucoup moins de trafic sur votre site brutalement.
- indexation de la nouvelle adresse : l'indexation de la nouvelle adresse se fait assez rapidement, mais avec un positionnement très mauvais. A ce moment là, vous avez l'ancienne adresse, mal classée, et la nouvelle, mal classée. Ne désespérez pas et lisez la suite.
- repositionnement de la nouvelle adresse : si vous avez effectué un bon travail de nettoyage, il faudra compter quelques semaines pour que le blog avec sa nouvelle adresse apparaisse dans une position quasi-équivalente à ce qu'elle était auparavant.

[Mise à jour 22/06]
Pour ceux qui s'intéressent à l'aspect référencement de la migration, voici un exemple tout récent d'une migration que j'ai faite. Le site en blogspot était référencé en 7ème place sur une expression de recherche dans Google, voici comment le repositionnement du nouveau nom de domaine s'est déroulé (suivi réalisé avec SEO Soft).

En gros, un mois pour que le nouveau nom de domaine se positionne au même niveau que l'ancien.

Le concepteur de modèles

noreply@blogger.com (Jimmy) — Fri, 12 Mar 2010 21:01:00 +0000

Depuis aujourd'hui, une nouvelle fonctionnalité est disponible dans Blogger in draft : le concepteur de modèles.

A mi-chemin entre les modèles classiques proposés par défaut dans Blogger, et une personnalisation complète qui peut parfois être compliquée pour les non-initiés, le concepteur de modèle est un éditeur visuel dynamique offrant de nombreuses possibilités de personnalisation :

de nouveaux thèmes
une grande collection d'images d'arrière-plan
des modèles de mises en page prédéfinis (2 colonnes, 3 colonnes...)
la modification de la plupart des attributs de polices de caractères et de couleur des éléments de vos blogs.

Particulièrement intéressant : toutes les personnalisations peuvent être testées direction grâce à un aperçu dynamique, idéal pour faire vos choix tranquillement avant de valider.

Le lien est disponible dans la section mise en page de votre blog.

Intégrer un fichier audio dans un billet

noreply@blogger.com (Jimmy) — Sun, 07 Mar 2010 13:57:00 +0000

Voici comment ajouter un module de lecture de fichier audio dans vos billets Blogger.

Pour ajouter un fichier audio à un billet, deux éléments sont requis :

Le fichier audio lui-même
Un lecteur audio web, qui traite le fichier et propose une interface de lecture à vos visiteurs.

L'exemple ci-dessous utilise un fichier MP3 libre, le titre Plastic & Flashing Lights de Professor Kliq

Le fichier audio

D'abord, le fichier audio doit être stocké sur un serveur. Puisque Blogger ne propose pas d'héberger de fichiers, j'utilise Google Sites pour générer un mini-site de stockage et y déposer mon fichier.

Une fois le dépôt du fichier effectué, je récupère simplement l'adresse du lien de téléchargement du fichier.
Exemple : http://sites.google.com/site/jthuilli/file/professor_kliq_-_plastic_%26_flashing_lights.mp3?attredirects=0&d=1

Libre à vous de choisir un autre hébergeur, le tout est que le fichier soit accessible de l'extérieur grâce à une adresse URL.

Le lecteur audio web

Pour faire simple, nous allons utiliser le lecteur intégré dans Google Reader. Ceci nous évitera d'avoir à stocker en plus les fichiers nécessaires à l'exécution du lecteur.

En cours d'écriture d'un billet, cliquer sur Modifier le code HTML. Localiser l'endoit où vous souhaitez ajouter la lecture du fichier audio, et insérez le code ci-dessous en remplaçant évidemment URL_FICHIER_MP3 par l'adresse de votre fichier audio. :

<embed type="application/x-shockwave-flash" src="URL_FICHIER_MP3"
width="400" height="27"
allowscriptaccess="never"
quality="best"
bgcolor="#ffffff"
wmode="window"
flashvars="playerMode=embedded"></embed>

Publier le message.

Voici le résultat :

Les pages statiques arrivent sur Blogger !

noreply@blogger.com (Jimmy) — Thu, 21 Jan 2010 10:17:00 +0000

Les pages statiques arrivent enfin sur Blogger !

Pour deux d'entre vous qui ignorent de quoi il s'agit (ils doivent êtres rares), on parle là tout simplement d'ajouter des pages dites "statiques" à votre blog, comme une page d'informations générales, une FAQ, une section A propos. Finis donc les faux billets avec une date lointaine pour simuler une page, place aux vraies pages statiques sur Blogger.

Une fonctionnalité que beaucoup attendaient avec impatience.

Comment faire ?

La nouvelle fonctionnalité est disponible dans Blogger in Draft. Vous devez donc utiliser ce gestionnaire de blog, et non le standard, sur lequel la fonction n'est pas (encore ?) activée.

Aller dans Modifier les pages.

Pour créer une page, cliquez sur le bouton "Nouvelle page".

Entrez le titre et le contenu de la page, comme vous le faites pour vos billets.

Cliquer sur PUBLIER LA PAGE.

Plusieurs options sont proposées :

Encadré du blog et Onglets du blog ajouteront automatiquement un gadget dans votre mise en page, que vous pourrez ensuite paramétrer selon vos choix (choisir les pages à afficher, l'ordre d'affichage...).

Si vous avez un modèle personnalisé, attention à l'intégration du gadget en mode onglets qui peut ne pas se faire automatiquement.
Si vous choisissez Aucun gadget, à vous de constituer les liens vers vos pages. Vous pouvez de toute façon ajouter la gadget Pages qui est maintenant disponible dans la liste Blogger

Les adresses des pages statiques générées sont de la forme http://monblog.blogspot.com/p/titre-de-la-page.html.

Blog PourBlogger, phase II

noreply@blogger.com (Jimmy) — Sat, 14 Nov 2009 08:59:00 +0000

Environ 50 jours après sa création, ce blog compte aujourd'hui 25 billets publiés, près de 3000 pages vues.
Une base de départ raisonnable, le moment de passer à la vitesse supérieure.

Et pour ça, je compte sur vous. Voici comment.

Réagir

Le moyen le plus simple et le plus rapide de faire vivre le blog, c'est de commenter les billets.
Vous avez un problème pur appliquer une astuce ? Réagissez.
Vous n'avez eu aucun problème pour la mettre en place ? Réagissez aussi.

Promouvoir ce blog

Un billet vous a aidé ? Vous avez trouvé une astuce intéressante ?
Vous pouvez aider ce blog en retour : parlez en sur Twitter ou Facebook, faites un lien retour vers un billet ou bien la page principale sur votre blog.

Proposer des thèmes

Comment augmenter le trafic de son blog, le monétiser... autant de sujets que je n'ai pas encore abordé.
Vous avez d'autres idées, des thèmes que vous aimeriez voir sur ce blog ?

Toutes vos propositions sont les bienvenues, allez lire le billet dédié à vos suggestions.

Modifier les textes par défaut

noreply@blogger.com (Jimmy) — Fri, 13 Nov 2009 19:14:00 +0000

Que Blogger permettre la conception d'un blog en quelques minutes, le tout en français, c'est très bien. Qu'on puisse ensuite changer les messages prédéfinis par Blogger à notre convenance, c'est encore mieux !

"Message plus ancien", "Enregistrer un commentaire"... Ça ne vous dit rien ? Quasiment tous les utilisateurs Blogger se demandent un jour comment changer ces textes par défaut.

Ne cherchez plus.

Pour faire un changement le principe est simple : dans le code de votre modèle, en ayant coché Développer des modèles de gadgets, cherchez tous les éléments de type

<data:[code]/>

Où [code] est le nom interne donné par Blogger au texte. Vous trouverez ci-dessous la liste de tous les codes utilisés.

Ensuite, remplacez simplement cet élément par le texte de votre choix.

Exemple, pour le lien vers la page d'accueil du blog : remplacez

<data:homeMsg/>

par

Retour à l'accueil

Voici maintenant la compilation de tous les textes standards de Blogger :

Code Blogger	Valeur standard	Description
newerPageTitle	Message plus récent	Navigation dans les pages de billets
olderPageTitle	Message plus ancien	Navigation dans les pages de billets
homeMsg	Accueil	Apparait en bas des pages de billets
top.commentLabel	Commentaire	Affiché s'il y a un seul commentaire sur un billet
top.commentLabelPlural	Commentaires	Affiché s'il y a plusieurs commentaires sur un billet
top.backlinkLabel	Liens vers ce messages	Lien vers les backlinks sur la page principale du blog
top.emailPostMsg	Envoyer le message	Texte lié au lien image d'envoi de billet par mail
top.editPostMsg	Modifier le message	Texte lié au lieu d'édition rapide de billet
top.deleteCommentMsg	Supprimer le commentaire	Texte lié au lieu de suppression d'un commentaire (icône poubelle)
commentPostedByMsg	a dit...	S'affiche après le nom de l'auteur d'un commentaire
post.noNewCommentsText	La publication de nouveaux commentaires n'est pas autorisée.	Lorsque vous interdisez les commentaires sur un billet
postCommentMsg	Enregistrer un commentaire	Le texte apparaissent juste avant le formulaire de commentaire
feedLinksMsg	Inscription à :	Invitation à s'abonner aux flux des commentaires
post.createLinkLabel	Créer un lien	Lien de création d'un backlink

Fixer la position d'un gadget sur la page

noreply@blogger.com (Jimmy) — Thu, 12 Nov 2009 17:39:00 +0000

Fixer un gadget sur son blog consiste à le coller sur un emplacement précis de la page pour ne pas qu'il défile avec le reste des éléments lorsque vos visiteurs utilisent les ascenseurs (scrollbars) de leur navigateur.

Ceci est très utile lorsque vous souhaitez qu'un information importante soit constamment affichée à l'écran, ou qu'une fonction ou un lien soit constamment disponible, sans avoir à faire des aller-retours verticaux : lien de contact, abonnement au flux RSS, status twitter... les applications sont nombreuses selon vos besoins.

Nous allons prendre l'exemple d'un lien simple d'abonnement au flux RSS.Le principe est le même quelque soit l'utilisation que vous choisirez.

D'abord crée un gadget de type HTML/Javascript, de titre vide. Ajoutez le de préférence dans le pied de page de votre blog.

Dans le contenu, collez-le code ci-dessous :

<div id="bloc-fixe">
<a href="http://draft.blogger.com/feeds/posts/default?alt=rss">Abonnez-vous au flux RSS</a>
</div>

La première et la dernière ligne définisse simplement le bloc qu'on va positionner. Le contenu, ici le lien, est celui de votre choix.

Maintenant, il s'agit de positionner ce gadget de manière un peu particulière.

Dans le code de votre modèle, localisez la ligne

]]></b:skin>

Juste avant, recopiez le code suivant :

#bloc-fixe {
position:fixed;
bottom:0px;
right:10px;
}

Enregistrez, c'est terminé. Voilà maintenant le contenu du gadget qui reste collé en bas de page.

A vous de le positionner au mieux dans votre mise en page : en jouant sur les attributs top, bottom, right, left.

Exemple pour un élément collé en haut à droite de la page :

top:0px;
left:0px;

L'effet fonctionne avec Internet Explorer 8 et Firefox 3.5.

Publier son statut Twitter sur Blogger

noreply@blogger.com (Jimmy) — Tue, 10 Nov 2009 20:32:00 +0000

Twitter propose une information en temps réel, courte et éphémère. Contrairement à ce qu'on pourrait croire, Twitter semble trouver sa place en complément d'un blog classique, ce dernier restant dédié à une analyse plus fine, complète, et pérenne.

Si vous êtes utilisateur Twitter (en passant, je le suis moi aussi), je vous propose aujourd'hui un gadget permettant de publier vos tweets sur votre blog Blogger, accompagnés d'un lien direct vers votre page Twitter.

Notez que ce gadget ne nécessite pas d'hébergement, les scripts utilisés sont hébergés sur les serveurs Twitter.

Dans l'administration des éléments de votre blog, ajouter un gadget de type HTML/Javascript à l'emplacement de votre choix

Copiez le code ci-dessous dans le contenu du gadget :

<ul id="twitter_update_list"></ul>
<p><a href="http://twitter.com/[utilisateur]">Suivez moi sur Twitter</a></p>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/[utilisateur].json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Remplacez les 2 occurrences de [utilisateur] par votre login Twitter.

Le nombre de tweets affichés dans le gadget se définit en modifiant la valeur

count=5

Notez que l'identifiant twitter_update_list est important et ne doit pas être modifié, car il permet au script Twitter de savoir dans quel élément de page il va afficher les tweets.

Démo ici-même, dans le pied de page.

jQuery + Lightbox : améliorer l'affichage des images

noreply@blogger.com (Jimmy) — Tue, 20 Oct 2009 21:32:00 +0000

Si vous utilisez l'éditeur Blogger pour ajouter des images à vos billets, vous savez certainement que les images sont publiées sous forme de vignette et que cliquer sur une vignette permet d'ouvrir l'image en taille réelle.

Problème : l'image s'ouvre toute seule dans la page, et votre visiteur doit retourner en arrière (bouton Précédent de son navigateur) pour revenir au billet.

Pourquoi est-ce un problème ?

Côté utilisabilité, c'est une impasse dont le visiteur ne sort que grâce à son bouton précédent. Une règle de base est de toujours éviter les impasses de navigation.
Côté esthétique, la page affichant l'image grandeur réelle n'a rien à voir avec le reste du blog

Nous allons améliorer la gestion des liens entre vignettes et images grandeur réelle, grâce à la librairie jQuery et son plugin lightBox, pour afficher plus proprement les images grandeur réelle.

D'abord, les modifications qui suivent nécessitent de disposer d'un hébergement pour y déposer des fichiers.

Vous pouvez pour cela vous servir d'un hébergement existant si vous en possédez un, ou bien utiliser des services gratuits comme Google Sites, les pages perso Free, etc.
Je reviendrais en détail sur ce point dans un prochain billet.

Dans le reste de la manipulation, nous prendons l'hypothèse que vos fichiers sont stockés dans un dossier disponible à l'adresse http://URL/

Télécharger jQuery + lightBox

Rapidement : jQuery est une librairie Javascript facilitant la manipulation dynamique des éléments d'une page web. Son plugin, lightBox, va nous fournir une méthode d'ouverture des images très simple à mettre en œuvre.

Téléchargez l'ensemble sur le site de lightBox. La version actuelle est la 0.5.

Dézipper le fichier téléchargé, puis transférez ensuite les fichiers utiles sur l'hébergement de votre choix. Au final, vous devrez avoir une structure telle que celle-ci :

http://URL/jquery.lightbox-0.5.css
http://URL/lightbox-blank.gif
http://URL/lightbox-btn-close.gif
http://URL/lightbox-btn-next.gif
http://URL/lightbox-btn-prev.gif
http://URL/lightbox-ico-loading.gif
http://URL/jquery.lightbox-0.5.js
http://URL/jquery.js

Intégrer les librairies

La préparation étant terminée, passons aux choses sérieuses. Dans le code de votre modèle, juste avant la ligne

<body>

ajoutez les lignes suivantes :

<script src='http://URL/jquery.js' type='text/javascript'/>
<script src='http://URL/jquery.lightbox-0.5.min.js' type='text/javascript'/>
<link href='http://URL/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>

Enregistrez le modèle.

Appliquer lightBox aux images

Plusieurs solutions existent pour améliorer la gestion des images grandeur réelles dans Blogger, mais la plupart nécessitent d'intervenir dans le code HTML de chaque billet pour ajouter un marqueur spécial à toutes les images que l'on souhaite modifier.

La solution que je propose ici s'applique à tous les billets, les nouveaux et ceux déjà publiés. Pas besoin donc d'intervenir dans le codes billets.

Toujours dans le code du modèle, et toujours avant la ligne

<body>

Ajoutez les lignes suivantes :

<script type='text/javascript'>
$(function() {
 $('.post-body a:has(img)').lightBox({
      imageLoading: 'http://URL/lightbox-ico-loading.gif',
      imageBtnClose: 'http://URL/lightbox-btn-close.gif',
      imageBtnPrev: 'http://URL/lightbox-btn-prev.gif',
      imageBtnNext: 'http://URL/lightbox-btn-next.gif',
      txtImage: 'Image',
      txtOf: 'sur'
      });
});
</script>

Enregistrez.

Promouvoir un billet sur les réseaux sociaux

noreply@blogger.com (Jimmy) — Sun, 11 Oct 2009 20:25:00 +0000

L'heure est aux réseaux sociaux : Facebook, Digg, Twitter, et autres Delicious comptent aujourd'hui des millions de membres actifs. Si les visiteurs de votre blog peuvent y promouvoir vos billets, les réseaux sociaux peuvent représenter une source importante de nouveaux visiteurs.

Comment aidez-vos visiteurs à faire la promotion de vos billets ?

Je ne suis pas trop partisan des guirlandes de boutons de partage, c'est généralement très joli, les boutons sont souvent sexy, mais je ne suis pas persuadé du résultat obtenu.

Je pense qu'il vaut mieux choisir 1 ou 2 réseaux sociaux en fonction de la nature de votre blog et de son public, ajouter les boutons de partage des sites choisis et étudier le résultat. Si ces sites n'apportent rien en terme de trafic, ne pas hésiter à les remplacer.

Sinon, l'alternative est d'utiliser un bouton unique de partage qui embarque à lui tout seul la plupart des réseaux sociaux. Le bouton AddThis est de ceux-là.

Rendez-vous sur le site d'AddThis et suivez la procédure.

Pour Blogger, vous pouvez choisir d'ajouter directement le bouton comme gadget de votre modèle.

Si vous souhaitez ajouter le bouton en fin de billet, il faudra ajouter le code AddThis dans votre modèle.

En ayant coché "Développer les modèles de gadgets", recopiez le code AddThis dans le modèle juste après la ligne

<div class='post-footer'>

Noter que l'utilisation simple du bouton ne nécessite pas d'inscription, mais que vous pouvez avoir des statistiques sur l'utilisation de votre bouton par vos visiteurs en vous inscrivant gratuitement sur le site.

Démonstration :

Statistiques et compteur temps réel

noreply@blogger.com (Jimmy) — Fri, 09 Oct 2009 14:47:00 +0000

Vous cherchez à mettre en place simplement des statistiques en temps réel sur les visiteurs de votre blog ?

Le gadget de whos.amung.us est fait pour vous : gratuit, installé en moins d'une minute,et fonctionnant immédiatement !

Le gadget affiche en temps réel le nombre de visiteurs connectés sur votre blog, et un simple clic sur le gadget donne une page de statistiques plus complète avec le nombre de visiteurs par page, leur localisation géographique, et un historique sur 24h du nombre de visiteurs en ligne.

Copiez le code du gadget sur http://whos.amung.us/. Notez que vous pouvez choisir entre plusieurs modèles, ou personnaliser les couleurs du compteur. De quoi trouver la combinaison la plus adapatée à votre blog.
Dans votre mise en page Blogger, ajoutez un gadget de type HTML/Javascript, et collez-y le code du gadget.
Enregistrez, c'est prêt !

Démo ci dessous : le compteur n'étant placé que sur cette page affiche le nombre de visiteurs consultant ce billet en ce moment.

Indexation rapide dans Google

noreply@blogger.com (Jimmy) — Mon, 05 Oct 2009 20:05:00 +0000

Une des questions qui revient souvent, particulièrement chez les débutants : j'ai crée mon blog, mais il n'apparait pas encore dans Google, que faire ?

Revue des étapes à suivre pour accélérer l'indexation d'un blog dans Google.

Être patient

Passage obligé pour tout nouveau site, l'attente plus ou moins longue avant que le site ne fasse ses premières apparitions dans les pages de résultats de Google.
Si la tendance actuelle chez les moteurs de recherche est au quasi-temps réel, il faut garder à l'esprit que pour un site déjà indexé dans Google, un nouveau billet publié peut apparaître dans Google en quelques minutes.
En revanche, pour qu'un nouveau site apparaisse dans les pages de résultats, il faut souvent attendre plus longtemps.

En suivant ces étapes pour mes quelques blogs Blogger, j'ai à chaque fois été indexé en 4 jours maximum.

Soumettre un sitemap

Utiliser les Google Webmasters Tools, et soumettre son sitemap est devenu une étape indispensable pour favoriser l'indexation d'un site : c'est quasiment la première chose à faire après avoir créer un nouveau blog.

Soumettre l'adresse de son blog

Un des moyens les plus simples de faire connaitre son nouveau blog à Google, c'est de lui soumettre son adresse. Cette opération aura pour effet de faire passer le robot d'indexation. Moins complète et sans doute plus hasardeuse que le sitemap, mais il serait dommage de passer à côté.

Avoir des liens entrants indexés rapidement

Ayant épuisé tous les moyens directs d'accélérer le passage de Google, il s'agit de profiter de l'indexation d'autres sites pour la propager à notre nouveau blog.

Si vous êtes propriétaire d'autres blogs déjà indexés par Google, publiez un billet contenant un lien vers votre nouveau site. A vous de ne pas trop exagérer l'auto-promotion et de faire çà en douceur, ce serait dommage de ne pas en profiter.

Utilisez également les réseaux sociaux tels que Twitter, Facebook, ou les sites de partage de bookmarks tels que Delicious.

Utiliser la commande site: de Google

Là, il n'est plus question d'accélérer l'indexation, mais de la surveiller. Dans Google, faites la recherche site:http://monsite.blogspot.com. en utilisant l'adresse de votre nouveau blog.
Si des résultats apparaissent, c'est que l'indexation est en bonne voie.
Sinon, et si vous avez suivi toutes les étapes précédentes, rappelez-vous la première d'entre elles : être patient !

Sites de templates gratuits pour Blogger

noreply@blogger.com (Jimmy) — Sun, 04 Oct 2009 14:27:00 +0000

Vous en avez assez des templates proposés par défaut par Blogger ? Voici une sélection de sites incontournables proposant des templates gratuits pour Blogger.

2 précisions utiles :

Tous les sites qui suivent sont en anglais
Gratuit de signifie pas disposer de tous les droits sur le modèle. Avant d'installer un modèle, pensez à consulter la licence associée. De nombreux template sont associés à une licence CC-by ou GPL, qui nécessite notamment de conserver les informations de paternité.

BTemplates

Indispensable. Plus de 1000 templates gratuits notés, avec démo. Possibilité de rechercher par tags.

We Love Blogger

Moins de templates que le précédent, mais on apprécie particulièrement de pouvoir faire des recherches très simplement, grâce à la pallette de couleurs ou aux modèles de mise en page (2 colonnes, 3 colonnnes...)

BloggerStyles

Outre les classifications habituelles, BloggerStyles propose un intéressant système de certification.
Les administrateurs du site ne publient que des templates fonctionnant avec la dernière version de Blogger.
Ensuite, ils font passer à tous les templates une série de tests : compatibilité avec différents navigateurs, comportement d'élements flottants dans la mise en page, affichage propre des commentaires...

Deluxe Templates

Une collection de templates originaux réalisés par l'auteur du site.

Pour aller plus loin...

Changer la favicon de Blogger

noreply@blogger.com (Jimmy) — Sun, 27 Sep 2009 13:27:00 +0000

La favicon est la petite icône que votre navigateur Internet affiche à côté de l'adresse du blog, dans les onglets ouverts sur le blog, ou encore quand le blog est enregistré dans les favoris.

Par défaut, Blogger affiche son célèbre B blanc sur fond orange.

Comment changer l'icône ?
La modification est très simple, au point qu'il faut plus de temps plus créer l'icône proprement dite que pour effectuer l'opération.

Créez ou récupérez une favicon. L'image doit être au format ICO (.ico), en taille 16x16 ou 32x32
Transférer le fichier ico sur l'hébergeur de votre choix
Dans Modifier le code HTML, localisez la ligne
```
</head>
```
Juste avant, insérez la ligne ci-dessous
```
<link href='adresse_du_fichier_ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
```
Bien sûr vous remplacerez adresse_du_fichier_ico par l'adresse complète d'accès au fichier ICO

Remarque : il existe plusieurs codes pour personnaliser la favicon, mais tous ne fonctionne pas avec Internet Explorer. Le code ci-dessous a été testé et validé avec Firefox et Internet Explorer 8.

Les variables de modèle

noreply@blogger.com (Jimmy) — Sat, 26 Sep 2009 14:14:00 +0000

Précédemment, nous avons abordé le fonctionnement des gadgets et des sections , et appris à retrouver les éléments d'une page dans un modèle. Voyons maintenant des composants un peu particuliers, les variables de modèles.

Qu'est-ce qu'une variable de modèle ?

Comme dans les langages de programmation classiques, une variable est un objet auquel on attribue une valeur. A chaque utilisation d'une variable, elle sera automatiquement remplacée par sa valeur.

L'intérêt est de ne pas avoir à répéter plusieurs fois le même paramétrage, et ainsi faciliter les modifications ultérieures.

Déclaration d'une variable Blogger

Tout se passe dans le code HTML du modèle, entre les balises dédiées à la mise en forme CSS :

<b:skin><![CDATA[

]]></b:skin>

Généralement, dans les templates par défaut de Blogger ou ceux que vous pourrez trouver sur internet, la section de déclarations des variables est clairement indiquée par un commentaire informatif : Exemple :

/* Variable definitions
  ====================

Toutes les variables du modèle sont ensuite déclarées sur le modèle suivant :

<Variable name="nom_variable" description=">desc_variable"
type="type_variable" default="valeur_defaut" value="valeur_actuelle">

nom_variable est le nom unique de la variable.
desc_variable décrit le rôle de la variable
type_variable est une valeur parmi font, color, ou automatic
valeur_defaut représente la valeur par défaut de la variable dans le modèle.
valeur_actuelle existe si vous avez redéfini la variable avec l'éditeur de polices et couleurs (voir plus bas)

Les types de variables

Types font et color

Les variables de type font et color bénéficient d'un traitement de faveur : elles sont automatiquement reconnues par Blogger, qui permet de les modifier grâce à l'éditeur de polices et couleurs. Les variables de type font pourront être modifiées grâce à l'éditeur de police permettant de choisir fonte utilisée, style, et taille des caractères.

Les variables de type color pourront être modifiées grâce à l'éditeur de couleur et sa palette intuitive.

Notez que les noms définissant les polices et couleurs à modifier sont récupérés de l'attribut name des variables, la valeur actuelle de l'attribut value, et que le lien Revenir au modèle par défaut réaffecte à la variable sa sa valeur default.

Type automatic

Les variables de type automatic sont, elles, destinées à contenir tout type de valeur autre que police et couleur. Leur valeur n'est modifiable que dans le code HTLM du modèle. Leur intêret ? Ne pas avoir à répéter plusieurs fois une même valeur. Exemple d'utilisation : Si vous utilisez un serveur FTP pour stocker vos images, vous pouvez définir son adresse URL comme variable.

<Variable name="FTPimage" description="Serveur hebergeant les images"
type="automatic" default="http://monftp.free.fr/images/"
value="http://monftp.free.fr/images/">

Utiliser une variable dans le modèle

Très simple. Pour utiliser une variable, utilisez la syntaxe $nom_variable Exemple avec une variable de type font :

#header {
  color: $textColor;
}

Exemple avec une variable de type automatic :

#header {
background:url($FTPimage/header.gif)