Nuage de mots-clés (libellés)

Bien que la grève soit pas encore finie, aujourd’hui, j’ai pu trouver un moyen de vous écrire quelque chose et comme je n’avais pas beaucoup de temps, je me suis dit que je pourrais en profiter pour vous montrer comment mettre un nuage de libellés (mots-clé), une astuce que j’ai appris chez phydeaux.

D’abord commencer par vous connecter dans votre compte Blogger, sur le modèle de votre blog allez sur « modifier le code html » et là cochez « développer des modèles de gagdet ». Ensuite :

1. Collez le code suivant juste avant ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Mettre le codesuivant juste après  ]]></b:skin>

et avant la balise </head>

<script

type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>

Vous pouvez déjà enregistrer les modifications à ce niveau.

3. Ajoutez le bloc de code se trouvant dans le troisième encadré sur la page de Phydeaux juste avant la balise </b:section> (pas celle qui termine l’entête de votre blog, mais celle qui termine une colonne donnée). Vous trouverez le code ici.

Enregistrez votre modèle et allez voir les résultats. Notez que si à la dernièr étape vous recevez un message d’erreur du genre qu’il y aurait deux widgets avec le même nom, cherchez la balise suivante : <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> changez le chiffre 1 après label par un autre (2, 3 ou même 7).

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.