Le nuage de libellés (ou tag cloud) est une présentation qui a souvent retenu l'attention des bloggeurs. Elle permet de rompre le côté passe-partout d'une liste.
La mise en valeur des libellés les plus utilisés est très intéressante et il est même possible de jouer sur un dégradé de couleurs qui peut se marier avec harmonie à la palette graphique de son blog.
Dernièrement, Blogger a intégré un nouveau module permettant de créer un nuage de libellés. Je vous ai déjà présenté cette fonctionnalité. Nous n'y reviendrons pas.
Cette modalité est pratique pour quelqu'un qui est pressé, mais cela ne remplace pas les astuces précédentes qui remplissent des usages beaucoup plus complets et sont plus personnalisables.
C'est pourquoi, je continue à utiliser les anciens scripts sur mes blogs, et c'est cette méthode que je vais vous présenter ici.
Simplement, je dois vous signaler qu'elle est beaucoup plus longue, et qu'il faut être rigoureux et attentif pour la mettre en place. Mais j'y suis arrivé, alors pourquoi pas vous ?
Préalables
Il faut d'abord s'assurer qu'un gadget Libellés a déjà été activé sur le blog. Allez le contrôler en visualisation du blog.
Si ce n'est le cas, il faut l'insérer. Voir le mode opératoire ici.
Autre point très important, lorsque l'on fait une intervention sur le code de son blog, il est très conseillé de faire une sauvegarde préalable. Voir le mode opératoire ici.
Procédure
Aller dans Mise en page puis Modifier le code HTML.
Au niveau de Modifier le modèle, cocher la case Développer des modèles de gadgets.
Etape 1 :
Parcourir votre code et coller entre les balises <head> et </head> le code suivant :
/* 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}
Etape 2 :
Parcourer toujours votre code et coller entre les balises ]]></b:skin> et </head> le code suivant :
<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>
Etape 3 :
Enfin entre les balises <body> et </body> vous devez trouvez un code commençant par :
<b:widget id='Label1' locked='false' title='Labels' type='Label'> et finissant à :
</b:widget>
Remplacez la totalité par l'ensemble du code suivant :
<b:widget id='Label1' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values="data:labels" var="label">
var theName = "<data:label.name/>";;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Voilà, vous avez (presque) terminé.
Si vous préférez contrôler le résultat de votre code, cliquez sur le bouton Aperçu ; si vous êtes confiant dans le résultat cliquez sur Enregistrer le modèle.
![]()
Allez visualiser le résultat en page d'accueil du blog.
Votre nuage est standard, je suis sûr que vous allez vous dire : c'est sympa mais j'aurais bien aimé mettre mes propres couleurs, ou tailles, par exemple.
Personnaliser son nuage
Retourner dans votre code et notamment à l'endroit où vous avez intégré les éléments de l'étape 2.
Les éléments suivants peuvent être adaptés :var cloudMin = 1;
1 = tous les libellés ; 10 = 10 libellés
var maxFontSize = 20;
taille de la police la plus grande
var maxColor = [0,0,255];
couleur de la police la plus grande
var minFontSize = 10;
taille de la police la plus petite
var minColor = [0,0,0];
couleur de la police la plus petite
var lcShowCount = false;
si true, le nombre de messages par libellés sera indiqué
Voilà !
Je vous l'avais dit : c'est long.
A+
Bravos!
RépondreSupprimerJe ne vis plus que dans l'attente de la leçon consacrée à "lire la suite" !
Grand sourire admiratif (durable)
Bonjour
RépondreSupprimerje rencontre des petits problemes pour trouver les balises indiquées....
Notamment
et finissant à :
je ne trouve d'ailleurs pas de balise de fin , pour les widgets...
serait il possible de m'aider ?
merci
Bonjour,
RépondreSupprimerAprès avoir copier et coller les codes ci dessus, quand je clique sur aperçu ou enregistrer j'obtiens le message suivant : Impossible de prévisualiser votre modèle
Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "data:title:agt" must be followed by either attribute specifications, ">" or "/>".
Merci.
Bonjour Jean-Marc,
RépondreSupprimerMerci de votre remarque qui me permet de rectifier : à l'étape 3 le code correct était :
<h2><data:title/></h2>
Il s'agissait d'une faute de frappe de ma part.
Mes excuses
J'ai rectifié aussitôt le texte présenté ci-dessus dans le tuto.
Bonsoir Waldorf et Statler,
RépondreSupprimerMerci pour votre réponse rapide, mais après un essai avec le code modifier, j'ai un autre message d'erreur.
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : The content of elements must consist of well-formed character data or markup.
Merci
Même remarque, merci de votre aide!
RépondreSupprimerBonsoir,
RépondreSupprimerAvez-vous vu ce qui n'allait pas pour réussir à publier le nuage de libellés personnalisé ?
Merci pour les astuces en tout cas, c'est très agréable de pouvoir maitriser un peu plus!
Bonjour,
RépondreSupprimerMerci pour toutes les astuces disponibles sur votre blog. C'est juste le meilleur site d'explication de blogger qui existe !
Par contre pour le tag cloud sur cet article il y a un problème.
J'ai exactement le même problème que la personne 3 commentaire plus haut (jean marc).
Je pense qu'une partie du code est fausse ou obsolète, mais je ne m'y connais pas suffisamment pour la trouver.
Si vous avez des infos sur ce sujet ce serai génial !!
Merci d'avance et continuez comme ça !
Bonsoir,
RépondreSupprimerJe n'y connait rien en XML, mais en observant attentivement, je remarque que le code modifié, à la première ligne de l'étape 3, se termine par
type='Label'>
alors que le code initial se terminait par
type='Label'/>
Ce / de différence est peut-être la cause du problème. Mais je ne suis pas capable de tester mon hypothèse, alors c'est en toute modestie que je vous la propose.
En tout cas je me régale avec ce blog de Waldorf et Statler, ainsi qu'avec vos commentaires. Merci.
Très amicalement à tous
Bonjour Michel,
RépondreSupprimerEffectivement j'ai du taper trop vite.
Je rectifie.
Merci beaucoup.
Je croyais que vous alliez ajouter un / au code modifié, mais en regardant votre correction j'ai vu que vous aviez enlevé le / au code initial.
RépondreSupprimerJe suis surpris car je partais du principe que le code initial était correct. C'est probablement là que je me trompe.
Testez et vous me direz.
RépondreSupprimerCe que je ne comprends pas c'est que je pense avoir bien noté ce que je faisais (cf copie d'écran du résultat obtenu) et du coup j'ai du mal à reconnaitre cette erreur.
Bonjour,
RépondreSupprimerj'ai compris une chose : le / apparait dans le code du modèle quand on ne développe pas les widgets et disparait quand on coche la case "développer les modèles de widgets". Ce / doit indiquer la fin ( de quelque chose ... ).
A part cela, j'ai suivi ( je crois ) vos indications pour remplacer le code initial par le votre mais j'ai eu le même message d'erreur que Jean Marc. Mon niveau de connaissance du XML est trop faible pour que je puisse trouver l'erreur de syntaxe.
Je continue à parcourir votre blog pour en apprendre d'avantage. Merci
Je veux utiliser le gadget Flickr pour mettre un groupe de partage sur mon blog. Comment faire pour qu'en cliquant sur l'icône, les visiteurs arrivent directement sur ma page de groupe de partage et non sur ma page personnelle Flickr?
RépondreSupprimerUn gros merci à l'avance !
J'ai tout essayé mais là, j'ai besoin de vous !!!
Caroline
Bonjour,
RépondreSupprimerUtilisez le gadget Image en mettant le lien dans Associer.
Merci beaucoup, particulièrement pour avoir répondu si rapidement.
RépondreSupprimerPeut-on insérer un mini-chat sur Blogger ?
RépondreSupprimerMerci mille fois,
Célestine ♥
bonjour
RépondreSupprimerimpossible chez moi de trouver (dans l'étape 1) la balise de fin head…
ou alors je suis complètement miro… :-)
en tous cas ce blog est génial !
merci par avance de votre aide
Bonsoir,
RépondreSupprimerIdem que Balthazar je ne trouve pas ma balise de clôture /head dans mes lignes de code.
Si mes rudiments sont exacts, elle doit intervenir avant l'ouverture de la balise "body" non ?
Merci de votre aide ...
Trop dur et quasiment impossible à faire tout seul!Dommage!!!!Grrrrrrrrrrrrrrrrr
RépondreSupprimer
RépondreSupprimerPremierement merci pour ce blog.
Voila, j'aimerais savoir comment changer les points qui se trouvent devant les libellés par un autre symboles, Je l'ai vu sur un blog.
J'espere avoir été assez clair.
Merci
Bonjour, tout d'abord merci beaucoup pour toutes ces informations qui me manquaient.... mais cette fois-ci j'ai un souci je copie colle le dernier code mais il ne fonctionne pas j'ai un problème de caractère...Help
RépondreSupprimerBonjour, Toutes les astuces c génial g redynamise mon site c chouette. Par contre, lorsque je copie l'étape 3, le code de ne fonctionne pas!!c embêtant!!!
RépondreSupprimerBonjour Cindy,
SupprimerBeaucoup d'eaux ont coulé depuis cet article.
Les codes ont été changés dans Blogger. Cela n'est plus aussi "simple" de faire les modifications et en plus elles peuvent ne plus marcher.
Blogger a fait des évolutions dans son gadget Libellés qui permettent l'affichage en nuages. Il est plus simple de s'en remettre à lui désormais.