Tuesday, June 12, 2007

Comment ajouter une prévisualisation des liens sur votre Blogger

Snap offre un javascript gratuit permettant d'offrir une prévisualisation des liens contenus sur une page web.
Voici donc comment j'ai configuré le tout sur mon Blog: http://blog.cinformatique.com. Je vais me référer à ce dernier pour les explications.
À la base, le service permet de configurer un javascript qui ajoutera le service à tous les liens de votre page ce qui n'est pas l'idéal.

Il est donc de ne pas avoir le service sur vos liens de menus, vos liens de bas de page et les widgets du côté droit de votre Blog.

  • Tout d'abord configurer votre service Snap Shot: http://www.snap.com/about/shots.php
  • Ajouter le javascript généré en ajoutant un page element HTML/Javascript dans le bas de votre Blog. (Edit Layout).
  • Ceci fait, vous pouvez regarder live le résultat et vous verrez que le service est fonctionnel sur tous les liens.
  • Il faut donc éditer le template de Blogger afin d'indiquer les endroits où on ne veut pas que le Snap Shot soit fonctionnel. Pour se faire, aller dans Edit Template HTML et sélectionner Expand Widget Templates.
  • Snap introduit la classe snap_noshot permettant de définir les
    où on veut pas avoir le service fonctionnel. Exemple: div class="'snap_noshots'"> .
  • Première section où on veut mettre le snap_noshots , les liens situés sous le titre du Blog "CInformatique Java and OpenSource" .
  • Rechercher: div id="'header-wrapper'"> et remplacer par div class="'snap_noshots'" id="'header-wrapper'">
  • Seconde section, la section consacrée aux commentaires sur les Blogs.
  • Rechercher: dl class="'comments-block'" id="'comments-block'"> et remplacer par : dl class="'comments-block" id="'comments-block'">

  • .... , il faut faire la même poutine pour enlever par-exemple, les liens pour ajouter des commentaires....

  • Pour la section des widgets
  • Chercher div id="'sidebar-wrapper'"> et remplacer par div class="'snap_noshots'" id="'sidebar-wrapper'">

Ceci est un résumé fort rapide mais qui donne le ton afin d'implémenter le tout.

www.CInformatique.com

No comments: