Google XXL: Nuage de Tags dans Blogger
Google XXL

Nuage de Tags dans Blogger

J'ai trouvé cette astuce sur le site de phydeaux3. Bien entendu, j'ai eu envie d'en faire une traduction bien que la démarche est très simple. Le principe consiste à créer un nuage de Tags ("TagCloud)" pour un Blog publié sur Blogger et qui utilise un des nouveaux modèles (et non classique). Ce nuage de Tags affichera l'ensemble des libellés que vous avez définis pour les articles de votre Blog.
À partir de la page d'accueil de Blogger, cliquez sur le lien Mise en page puis Modifier le code HTML.
Cliquez sur le lien Télécharger le modèle dans son intégralité afin de sauvegarder le modèle de votre Blog.
Il est inutile de cocher la case Développer des modèles de gadget.
En utilisant le raccourci clavier Ctrl + F, lancez une recherche sur cette ligne de code : ]]></b:skin>.
Copiez la première partie du code qui est affiché sur la page de phydeaux3 avant la ligne ]]></b:skin>.
Copiez ensuite la seconde partie du code après cette même mention mais avant la balise Tag suivante : </head>.
Sélectionnez ensuite cette ligne de code : <b:widget id='Label1' locked='false' title='Libellés' type='Label'/>.
Remplacez-la par la troisième portion de code visible sur cette même page. Elle viendra donc se placer juste avant la balise </b:section>.
Cliquez sur le bouton Aperçu afin de voir si vous n'avez pas fait d'erreur.
Si votre nuage de Tags est correctement affiché, vous pouvez maintenant le personnaliser. Voici les déclarations qu'il est possible de modifier :
  • var cloudMin= 1; : permet de définir le nombre de libellés qui seront affichés. Si, par exemple, vous remplacez le chiffre 1 par 10, seuls les libellés comprenant 10 articles seront affichés.
  • var maxFontSize = 20; : définit la taille en pixels des libellés qui contiennent le plus d'entrées.
  • var maxColor = [0,0,255]; : précise la couleur de ces mêmes libellés.
  • var minFontSize = 10; : même remarque que précédemment mais appliquée aux libellés qui contiennent le moins d'entrées.
  • var minColor = [0,0,0]; : même remarque que précédemment mais pour les libellés qui contiennent le moins d'entrées. Ces couleurs doivent être au format RGB. Vous pouvez utiliser ce tableau énumérant toutes les couleurs définies dans ce format.
  • lcShowCount : permet d'indiquer ou non le nombre d'articles pour chaque libellé.
  • #labelCloud {text-align:center;font-family:arial,sans-serif;} : permet de définir la police par défaut pour votre nuage de Tags.
  • text-align:justify; - text-align:right; - text-align:left; : permet de définir l'alignement du texte par rapport à la page.
  • #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} : vous pouvez modifier la déclaration "display:inline;" par celle-ci : "display:block;". De cette façon, vos libellés seront listés ligne après ligne et non "en vrac".
Bien entendu, il y a un exemple sur ce même Blog… Ce n'est peut-être pas le nirvana mais surement beaucoup mieux que le module proposé par Blogger !

14 commentaires:

  Anonyme

10 octobre 2007 à 18:30

Bonjour,

un grand merci pour votre contribution qui est claire, contrairement à d'autres, et qui m'a permis d'aboutir alors que je ne connais rien au HTML.

Je ne regrette finalement pas d'avoir passé deux heures avant de trouver votre blog.

Encore merci
Jacques

  Jean-Noël Anderruthy

12 octobre 2007 à 10:01

C'est nous qui vous remercions pour ce petit mot sympa !

  mtislav

27 février 2008 à 18:40

Très bon article... J'ai bataillé pour avoir mon nuage de tags. Maintenant qu'il est là, que j'ai changé la taille plusieurs fois, les couleurs... je trouve finalement que ce n'est pas terrible. Plutôt que de taguer les articles, je crois que je vais faire comme dans le blog "le monde de Néa" choisir des têtes de chapitre plutôt que des tags... et revenir à la présentation en colonnes ! Il me faut l'article "comment supprimer un nuage de tags" maintenant...

  Jean-Noël Anderruthy

27 février 2008 à 23:16

C'est très simple : vous supprimez le code ajouté !
Elle n'est pas belle la vie ?

  Mika

24 mars 2008 à 20:37

Bonjour,
tout fonctionne très bien sur Firefox mais pas sur Explorer. Quelqu'un a une idée pourquoi svp.???

Merci

  Jean-Noël Anderruthy

25 mars 2008 à 00:04

J'avais fait le test dans IExplore sans constater un quelconque problème. Cela doit venir d'un autre problème...

  Adikt Blog

15 avril 2008 à 14:25

Hello,
merci pour l'article. J'ai par contre une question : quelle est la différence entre label et tag ?
Moi, je voudrais ajouter tous les libellés de mon blog dans le nuage, mais il ne me met que deux mots quand je crée le nuage... Explication possible ?
Merci :)

  Jean-Noël Anderruthy

15 avril 2008 à 14:43

Label - Libellé - Tag
C'est la même chose !
Si vous n'avez défini que deux tags ou libellés, c'est normal !
Sinon, il faudrait que je vois le blog. Peut-être que cela me donnera une idée du pourquoi ...

  Adikt Blog

15 avril 2008 à 16:26

Hé merci pour cette réponse,
Je n'ai pas vu dans le code qu'il y avait une valeur à changer pour avoir plus moins de libellés...?
Voici l'adresse de mon blog : http://adiktblog.blogspot.com
Il y a simplement une liste de libellés pour l'instant, qui ne sont pas "rangés" en nuage de tags. Vous constaterez qu'il y en a 18, mais quand je rentre le code, je n'ai que deux tags qui apparaissent (hip-hop et électronique).
Une solution ?
Merci beaucoup,

  Adikt Blog

15 avril 2008 à 16:28

En complément :
pour la valeur "var cloudMin = 1", j'ai bien entendu laisser "= 1" pour afficher tous les tags de la page !
Merci,

  Jean-Noël Anderruthy

16 avril 2008 à 13:45

Je ne vois pas !

A titre de test ajoutez un libellé au hasard sur un de vos articles. C'est
peut-être simplement dû au fait qu'à partir deux libellés tous les autres
sont unique.
je ne vois rien d'autre tel quel

Désolé !

Il est bien votre blog !

  Adikt Blog

16 avril 2008 à 14:56

Pas grave !
Merci quand même de s'être penché sur la question.
Merci pour le compliment sur le blog ;)
Amicalement,

  Myriam-MakeUp (Myriam.P)

13 avril 2011 à 10:22

MERCI votre tuto fonctionne contrairement à tous les autres !!!!!

  Jean-Noël Anderruthy

13 avril 2011 à 11:25

Merci Myriam pour votre petit mot.
Mais il faut signaler que les explications dépendent aussi du Template utilisé sous Blogger.