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 !