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 :
<script src="URL/previewbubble.js" type="text/javascript"></script><noscript>Une vignette au survol du lien</noscript>
Mise en oeuvre - code html
Il suffit d'ajouter le nom de la classe définie plus haut, dans l'attribut class du lien
<a href="URL" title="titre du lien" class="nom_de_la_classe">Un lien</a>
Des exemples
L'aperçu du Blog d'Aide pour Blogger
En savoir plus sur les vignettes : Vignettes et DMOZ
Messages
3 commentaires:
bonsoir,
bravo pour ton blog, ouf de la dépannes en plsu pour blogger et en français en plus.
voila,pour ma par j'ai essayer de suivre ton tutoriel mais hélas je n'est pas trouver dans mon code css les deux endroit que tu cite pour inséré le plugin ?
j'ai un blog avec une version de blogger qui date de 2005 dont tu vois rien à voir avec la mouture de 2008 ou la tu peut crée un ajout de code.
merci tout de même cela et intéressent.
tant que cela ne gavent pas les lecteurs de 36 ouvertures dans la page aux moindres mots comme je peut lire sur certains blogs se qui à force perso me soûle grave.
amitié.
Bonjour
Cherchez dans Errances Marines le tag /head, et inserer juste avant
Bonsoir,
Merci pour ce sympathique petit programme.
Après un échec, j'ai relu et comparé ce que j'avais modifié ce qui m'a permis de corriger la petite erreur que j'avais commise.
Félicitation !
A bientôt
Christophe
Enregistrer un commentaire