Comment créer son propre blog: choisir un hébergeur, choisir le nom, écrire son premier article...

dimanche 26 juin 2011

Créer un gadget qui s'affiche seulement sur la page d'accueil

Nous allons créer un gadget qui s'affichera sur la page d'accueil mais sur aucune des autres pages ou articles.

Ce gadget peut être avoir différentes formes:

  • un message d'accueil sur votre blog
  • une image
  • un sondage
Dans l'exemple utilisé ci-dessous, il s'agit du message d'accueil de ce blog.

1. Ajouter le gadget:
Aller dans Présentation > Éléments de la page et ajouter un gadget HTML/Javascript dans la colonne de droite par exemple.

Faites glisser-déposer le gadget à l'endroit où vous souhaitez le placer.

Le mieux c'est de le placer dans la section du corps, juste au-dessus du gadget "Messages du blog", dans notre exemple ci-dessous, le gadget "Bienvenue":



Cliquez sur "Modifier" mais ne faites pas de modifications. Agrandissez la fenêtre de sorte que vous voyez l'adresse entière pour le gadget.

Tout à fait à droite dans la barre d'adresse, cherchez le texte "widgetID=" et notez le nom qui apparaît immédiatement après. Dans l'exemple ci-dessous, il s'agit de "HTML1":



2. Trouver le code de votre gadget:
Modifiez votre modèle: Présentation > Modifier le code HTML.

Cochez la case "Développer des modèles de gadgets".

Téléchargez une copie du modèle et sauvegarder la sur votre ordinateur en cliquant sur "Télécharger le modèle dans son intégralité".



Positionnez le curseur dans le cadre contenant le code et faites un recherche par votre navigateur (généralement avec la fonction CTRL+F) pour trouver le nom du gadget noté plus haut (HTML1 dans notre exemple).



Notez ce qui vient après. Dans cet exemple, c'est:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ajouter le formatage conditionnel:

Il faut mettre les deux lignes suivantes dans le code du gadget:
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
...
</b:if>

Exemple:

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. Vérifiez si ça fonctionne:

Demander un "Aperçu" de votre blog avant d'enregistrer les modifications: ça permet de vérifier si le gadget est visible.

En regardant l'aperçu de votre blog, vérifiez que:
  • le gadget se trouve sur la 1ère page
  • le gadget ne se voit pas quand vous regardez une ancienne page (par exemple une page de vos archives)
  • les autres éléments de votre blog (autres gadgets, titres d'article, dates et contenu) sont tous comme on s'y attend - sur le premier écran et les autres écrans,
Si ça ne fonctionne pas, vérifiez si vous avez ajouté les deux lignes au même endroit que dans l'exemple.

Si vous êtes complètement perdu, vous pouvez remettre l'ancien modèle que vous avez téléchargé et essayer de recommencer.

4. Sauvegarder le modèle:

Quand votre aperçu est correct, vous pouvez sauvegarder le modèle. En cas de problème, vous pourrez toujours revenir à l'ancien modèle en rechargeant la copie que vous aviez sauvegardée.