Actualisation de l'article (octobre 2009): des nouveautés dans le gadget "libellés" blogger: insertion facile d'un nuage de tags sans toucher au HTML et quelques autres modifications. (Suivez le lien pour les détails)
Nuage de tag, qu'est-ce que c'est?
Un nuage de tags va reprendre les libellés ou mots-clés associés aux articles. Il comprend donc l'ensemble des libellés (sauf paramétrage contraire), les mots les plus gros sont ceux qui reviennent le plus fréquemment.
Pourquoi un nuage de tags plutôt que la liste traditionnelle des libellés ou mots clés?
Au premier abord, il y a l'aspect séduisant du nuage. Un peu plus fun qu'une liste sans fin. Mais je principal intérêt que j'y ai trouvé pour mon blog est d'ordre pratique et informatif.
Dans les blogs blogger, chaque article peut et doit être associé à des libellés. C'est le seul mode de classement des articles qui existe par défaut (hormis le classement chronologique des archives).
Premier blog, premiers billets: tout va bien. Mais très vite, les choses se compliquent et la liste des libellés s'allonge interminablement, à moins que l'on ne se résolve à limiter l'usage des mots-clés à quelques grandes catégories, et donc à pénaliser le référencement de ses articles!
Il s'agit d'une photographie (ou photo?), macrophotographie (ou macro?) d'insecte hyménoptère abeille bourdon fleur rouge coquelicot, prise dans la nature ou dans mon jardin!... Je n'ai pas abusé de mots clés, ils sont tous pertinents. mais à ce rythme là, ma liste initiale de libellés sera interminable dès ma dixième photo publiée!
Plutôt que de limiter l'attribution de mots clés, j'ai donc opté pour un nuage de tags. Le grand avantage de cette présentation des libellés est sa forme compacte. Des mots peu employés, comme le nom latin d'une fleur seront écrits en tout petit, et prendront donc peu de place. L'ordre alphabétique des tags permet au visiteur qui cherche une photo précise de la trouver rapidement à partir du nom commun ou de son appellation botanique.
En complément, j'ai créé quelques catégories thématiques où je range mes articles (article à venir ).
Dans les blogs blogger, chaque article peut et doit être associé à des libellés. C'est le seul mode de classement des articles qui existe par défaut (hormis le classement chronologique des archives).
Premier blog, premiers billets: tout va bien. Mais très vite, les choses se compliquent et la liste des libellés s'allonge interminablement, à moins que l'on ne se résolve à limiter l'usage des mots-clés à quelques grandes catégories, et donc à pénaliser le référencement de ses articles!
Il s'agit d'une photographie (ou photo?), macrophotographie (ou macro?) d'insecte hyménoptère abeille bourdon fleur rouge coquelicot, prise dans la nature ou dans mon jardin!... Je n'ai pas abusé de mots clés, ils sont tous pertinents. mais à ce rythme là, ma liste initiale de libellés sera interminable dès ma dixième photo publiée!
Plutôt que de limiter l'attribution de mots clés, j'ai donc opté pour un nuage de tags. Le grand avantage de cette présentation des libellés est sa forme compacte. Des mots peu employés, comme le nom latin d'une fleur seront écrits en tout petit, et prendront donc peu de place. L'ordre alphabétique des tags permet au visiteur qui cherche une photo précise de la trouver rapidement à partir du nom commun ou de son appellation botanique.
En complément, j'ai créé quelques catégories thématiques où je range mes articles (article à venir ).
Comment insérer un nuage de tags dans un blog blogger?
J'ai trouvé la solution dans les blogs d'aide dont je viens de faire la liste.
- Rendez-vous dans "Mise en page" puis "Elément de page" et assurez-vous que le gadget "libellés" figure bien dans votre blog. dans le cas contraire, ajoutez-le. (Le nuage de tags remplacera les libellés)
- Puis toujours dans "Mise en page", accédez à "Modifier le code HTML"
- Cochez "développer les gadgets"
- A cette étape, stoppez tout et sauvez impérativement votre modèle blog! Insérer un nuage de tags est une modification de fond, qui peut être source de mauvaises surprises selon les modifications que vous avez déjà apportées à votre blog, ou simplement en faisant une erreur lors de l'opération! (Voir quelques précisions sur la sauvegarde dans "modifier le code HTMl d'un article ou d'un modèle")
- Respirez un grand coup et suivez pas à pas les étapes décrites dans la page en lien ci dessous:
- Au fur et à mesure, n'oubliez pas de modifier le code: indiquez l'adresse de votre propre blog, et changez le titre donné à votre nuage si vous le souhaitez.
- Avant d'enregistrer, cliquez sur "Aperçu": vous aurez tout de suite une idée du résultat, et si vous avez fait une erreur de copie, Blogger vous l'indiquera.
- Si votre aperçu est normal: vous pouvez enregistrer
- Si votre aperçu n'apparait pas et avertissement d'erreur de programmation: à moins que vous ne lisiez couramment le HTML, je vous conseille de cliquer sur l'annulation des modifications, plutôt que de chercher le petit truc qui a tout fait capoter! Vous reviendrez à votre blog de départ sans perte de données, et vous n'aurez plus qu'à tout recommencer...
Personnaliser votre nuage de tags:
- Si vous aimez barboter dans le HTML et le CSS, vous pouvez définir la couleur de vos tags en même temps que l'insertion de votre nuage dans le code (dès l'étape ci-dessus).
- Sinon, n'hésitez pas à le personnaliser après avoir créé et enregistré votre modèle: c'est beaucoup plus simple et moins risqué que la première étape.
Inutile de développer les gadgets pour personnaliser son nuage de mots-clés.
1- Code des variables et traduction:
Trouvez l'endroit où sont indiquées les variables de votre nuage:
Traduction:
// Label Cloud User Variables
var lcBlogURL = 'http://votreblog.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false
Traduction:
- var cloudMin = 1; définit le nombre de libellés dans le nuage
- 1: tous les libellés affichés. Pour n'en afficher qu'une partie, remplacer par le nombre de libellés à afficher (8 = huit libellés affichés.)
- var maxFontSize = 20; Taille de police maximale. Vous pouvez augmenter ou diminuer ce nombre
- var maxColor = [0,0,255]; Couleur de fonte des plus grands mots. Modifiable (voir ci-dessous)
- var minFontSize = 10; Taille de police minimale. Vous pouvez augmenter ou diminuer ce nombre
- var minColor = [0,0,0]; Couleur de fonte des plus petits mots. Modifiable (voir ci-dessous)
2- Quelle taille de police et quel écart de taille choisir dans son nuage?
Le code proposé en lien convient à la plupart des cas. Il met bien en valeur la hiérarchie des libellés (Exemple: insecte>coléoptère>coccinelle>harmonia axyridis)Vous voulez annoncer du premier coup d'oeil les grands thèmes de votre blog: augmentez un peu l'écart entre petites et grandes polices. (Intéressant pour un blog qui se cantonne à quelques catégories bien définies. Exemple: Photo paysage - portrait - animaux - macro)
3- Quelle couleur de police choisir?
Le principe du nuage de tags est de fondre deux couleurs. Si vous choisissez Rouge pour les plus grands mots et Bleu pour les plus petits, tous les mots de taille intermédiaire seront dans des nuances de violet (mélange du bleu et du rouge). Avant d'utiliser des couleurs vives et différentes, pensez au cercle chromatique et aux mélanges de couleurs
Les valeurs sûres: un gris clair, un blanc, une couleur pâle et cette même couleur foncée (mais tout dépend du fond de votre blog...). Il faut souvent faire plusieurs essais avant de trouver un bon accord.
Les valeurs sûres: un gris clair, un blanc, une couleur pâle et cette même couleur foncée (mais tout dépend du fond de votre blog...). Il faut souvent faire plusieurs essais avant de trouver un bon accord.
4- Comment changer la couleur:
Ce nuage de tags utilise un codage RGB pour les couleurs. (Pour en savoir plus: voir l'article "des couleurs personnalisées pour mon blog")
Il vous suffit de trouver le code RGB de la couleur que vous voulez modifier (sur un nuancier 216 couleurs web par exemple), puis de remplacer les nombres du nuage par les nouvelles valeurs.
Avant d'enregistrer votre modèle recolorisé, faites un aperçu: vous verrez immédiatement si vous avez fait le bon choix, et il vous suffit de fermer l'aperçu pour revenir à votre ligne de code à modifier.
Remarque: il existe également des nuages de tags dynamiques, dont les mots-clés ou libellés tournent autour d'un axe et changent de taille. Un gadget esthétique, intéressant et qui anime une page blog, mais qui ne convient pas si la vocation du nuage est de permettre aux lecteurs de trouver facilement et rapidement un article qui fait référence à un mot-clé précis. L'animation des mots-clés ne facilite pas la recherche!...
Il vous suffit de trouver le code RGB de la couleur que vous voulez modifier (sur un nuancier 216 couleurs web par exemple), puis de remplacer les nombres du nuage par les nouvelles valeurs.
Avant d'enregistrer votre modèle recolorisé, faites un aperçu: vous verrez immédiatement si vous avez fait le bon choix, et il vous suffit de fermer l'aperçu pour revenir à votre ligne de code à modifier.
Remarque: il existe également des nuages de tags dynamiques, dont les mots-clés ou libellés tournent autour d'un axe et changent de taille. Un gadget esthétique, intéressant et qui anime une page blog, mais qui ne convient pas si la vocation du nuage est de permettre aux lecteurs de trouver facilement et rapidement un article qui fait référence à un mot-clé précis. L'animation des mots-clés ne facilite pas la recherche!...
___________________________________________________________________
Articles liés: Ces articles peuvent vous intéresser:
Eh bien on en apprend encore des chose aujourd'hui !!
RépondreSupprimerBonne soirée
Bonjour Cathy, Voilà encore une bonne chose de faite ! c est vrai que l'insertion d'un nuage de tags dans son modèle demande un peu d'attention et peut effrayer certains(es) mais à un moment donné, il faut bien se lancer. J ai moi même récidivé trois fois après deux messages d erreur avant d y parvenir. A mon goût, je préfère limiter mon nuage de tags aux principaux libellés. j ai remarqué que sur le tien les mots colorés en blanc étaient peu lisibles (en tout cas, sur mon écran), c est juste une remarque ! mais il s agit tout de même des mots photo et photographie !... Encore merci pour toutes ces infos.
RépondreSupprimerBonne journée.
Tout à fait juste, et choix volontaire: je n'ai pas encore trouvé ma couleur claire idéale (pas le temps de chercher mieux), mais faire clignoter en fluo les mots photo ou macro n'apportent rien au visiteur (tous ces mots sont permanents dans mon blog, et même dans le titre. J'utilise ces libellés surtout pour le SEO). J'ai donc choisi d'appliquer la couleur la plus foncée aux mots les moins fréquents, afin de permettre une recherche alphabétique d'une espèce précise. Pour les généralités, il y a les catégories du dessus. Il faut personnaliser son nuage en fonction du rôle qu'on veut lui accorder pour les visiteurs comme pour le référencement. (Plus facile à dire qu'à faire!... :)
RépondreSupprimerJ'ai lu ton article avec attention!Il est très clair et j'apprécie ton talent pour expliquer ce qui peut paraître difficile quand on n'est pas trop habitué à manipuler les outils que nous offrent les plateformes de blogs!
RépondreSupprimerJ'attends avec impatience ton article concernant les catégories car je n'ai pas trouvé d'infos satisfaisantes au sujet de blogger!
Merci beaucoup pour le travail important que cela implique!
@ Lucie: J'ai galéré, mais j'ai eu la chance de me faire expliquer pas mal de choses en créant ce blog. Je n'ai pas la prétention d'être une pro de le personnalisation, mais j'ai dû tomber dans tous les pièges du débutant... alors, si ça peut éviter à d'autres les mêmes déboires. J'avoue que rédiger ce genre de sujet n'est pas ce qui me passionne le plus, et des commentaires comme le tien me font sincèrement plaisir: ces articles peuvent donc servir!
RépondreSupprimerCôté catégories, j'y reviendrais... un jour. En fait, j'utilise des gadgets "listes" et chaque titre renvoie à tous les articles qui comportent un libellé précis.
Merci pour ces explications détaillées, j'y connais rien au html, et en une petite heure c'était réglé!
RépondreSupprimerUn grand merci! J'ai pu insérer un nuage de tag à mon blog en un rien de temps, et vos explications sont très claires. :D
RépondreSupprimerEn fait, ce tuto n'est valable que pour les modèles (templates) les plus récents, qui incluent déjà le javascript pour un nuage de tags.
RépondreSupprimerPour tous ceux qui souhaiteraient l'intégrer à un modèle plus ancien, le code original (inspiré de del.icio.us) se trouve ici : Beta Blogger Label CloudIl reste une modif à faire dans la dernière section car c'est codé en anglais. Donc il faut modifier la ligne
a.title = ts[t]+' Posts in '+t;
en changeant "Posts in" par ce que vous voulez. Et éventuellement mettre en commentaire la ligne quickedit, vers la fin, pour valider le code.
Merci Geeko pour ces précisions. Je viens de vérifier la date: mon propre template a un peu plus d'un an (début 2008): récent?
RépondreSupprimerComme je l'ai dit en commentaire, j'ai débuté la personnalisation au niveau -10! Et j'ai vraiment eu du mal à comprendre nombre d'articles de pros. J'essaie donc (quand j'ai le temps) de traduire et de vulgariser pour ceux qui débutent un blog. Mais toutes les précisions, comme la tienne, sont plus que bienvenues!
@ Geeko (suite): Je viens de parcourir rapidement le code en lien: je le connaissais effectivement (j'ai dû essayer de l'utiliser sans succès...). La principale différence réside dans le fait que l'on n'y indique pas l'adresse de son blog, non?
RépondreSupprimerBen le mien, sur le blog des papillons, il date de 2004... Et il n'était pas prévu, à l'origine, pour inclure cette fonction. Le code de phydeaux3 date de septembre 2006. La dernière partie est balisée pour Blogger, mais le code est utilisable pour n'importe quelle page html. Il "suffit" de savoir où placer les css, puis le script, et réécrire un tout petit peu le code (pour virer les balises propres aux templates Blogger).
RépondreSupprimer2004... c'est très vieux sur la toile, non? ;-). En fait, j'ai créé un premier blog sans voir un bout de code avant de le déménager chez blogger début 2009. C'est à ce moment que je me suis décidée à cliquer sur l'onglet HTML-CSS, avec des succès et de grands moments de solitude! Marrant que cet article refasse surface aujourd'hui: je suis justement en train de réfléchir à quelques modifs de mon template, que j'avais laissées de côté depuis des mois!
RépondreSupprimer"Il suffit de savoir où placer les CSS"... Mes trucs et astuces, c'est quand même un peu pour les nuls (dont je suis!). Et le fonctionnement des blogs est particulier: mon mari, qui a quand même programmé mon site photo de A à Z a du mal à s'y retrouver, avec les spécificités et balises propres à blogger. Il a quand même réussi à me sauver la mise plusieurs fois!
Oui et non, Blogger est structuré comme pas mal de plate-formes gratuites (j'en ai fréquenté quelques-unes...). On a accès à une partie du code seulement (par ailleurs fort mal écrit, mais y a pire, genre "ob"), mais à part quelques scripts qui sont "injectés" et n'apparaissent pas dans le code du modèle, on peut absolument tout modifier, ajouter des fonctions "maison", ou en supprimer ou les réécrire. J'me suis privé, tiens... :-)
RépondreSupprimerDans ton nuage de tags, tu as toujours la syntaxe anglaise "Posts in" devant le tag concerné. Moi j'ai remplacé ça par "Articles sur".
Tu pourrais aussi ajouter un script ajax type lightbox permettant l'agrandissement des photos à partir d'une vignette ou d'une galerie sans quitter la page. Utile, pour pas perdre ses visiteurs, mais l'ergonomie c'est un autre sujet...
Tout à fait d'accord pour OB. C'est l'une des raisons qui m'a poussée à le quitter pour passer chez blogger. Merci pour le tuyau pour mon nuage, je n'y avais jamais fait attention. Je changerai à l'occasion. Pour les photos, la taille fixe et modérée est un choix délibéré (http://champagne-balade.blogspot.com/2009/02/image-grande-taille-blogger.html). J'ai déjà un site avec galeries, et mon blog a un contenu et un public différents, mais sur chacun le temps par visiteur est assez élevé. Ils doivent donc y trouver ce qu'ils cherchent. (Et dans l'un comme dans l'autre, j'ai encore pas mal de retouches à faire... mais pas trop le temps! J'ai l'impression que l'on pourrait passer sa vie à peaufiner ses pages web...)
RépondreSupprimer