J'ai essayé, ça fonctionne.
Non pas celui que Mtislav a trouvé, mais celui que je recommandais la dernière fois, qui est en javascript et html. Celui que Mtislav a essayé (et sur lequel je me suis arrachée les cheveux ) est une application shockwave, et moi j'y connais rien, et ça marche pas sur tous les ordi, bref... je vous explique l'autre puisque je l'ai compris.
Je ne mets ici que le hack basique et quelques moyens simples de le modifier, je n'ai pas regardé les codes en profondeur et je n'ai pas l'intention de le faire, puisque ça deviendrait vraiment trop compliqué et ce n'est pas le but de ce blog.
Tout d'abord, assurez vous d'avoir activé l'option libellés
Assurez vous aussi que vous avez au moins UN libellé et qu'il a été utilisé sur au moins DEUX billets.
C'est fait ?
Bien, ouvrez votre template (mise en page/ modifier code htlm) ne développez pas les modèles de gadget (sauf si vous êtes vraiment à l'aise, mais même moi, je l'ai pas, fait ca va plus vite sans développer.
La première section de code devra être placée entre les balise <head> et </head> de votre template.
C'est celle qui s'occupe de définir l'apparence de votre nuage de tags, nous y reviendrons plus tard.
/* 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}
----------------------------------------------- */
#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}
La seconde section, un code javascript, poux être considéré comme le moteur de votre nuage de tags, elle se place après la balise : ]]></b:skin> MAIS avant la balise </head> du template. Allez -y, prenez votre temps.
<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>
// 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>
Enfin, la dernière, mais pas la moindre, celle qui décide entre autre où va figurer votre nuage, descendez entre les balises <body> et </body> (oh yeah baby balise mon body...) et trouvez la ligne suivante :
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Remplacez là par le code suivant :
<b:widget id='Label1' locked='false' title='Label 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 = '/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>
<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 = '/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 fini.
Vérifiez sur aperçu, tout devrait bien fonctionner. (ça a fonctionné du premier coup chez moi. Une première )
enregistrez.
Vous avez un nuage basique.
Bien sur si votre blog est rose et jaune avec des pois violets vous allez pouvoir le changer.
Retournez dans la première section intitulée Label Cloud Style
{text-align:center; vous pouvez remplacer "center" par left / right/ justify (c'est la position du texte)
font-family:arial,sans-serif; vous pouvez remplacer ces deux police de caractère par d'autres, comic sans MS, verdana, que sais-je, ne soyez cepandant pas trop fantaisite, tous les ordinateurs ne disposent pas des mêmes polices
}
#labelCloud .label-cloud li{
display:inline; vous pouvez remplacer "inline" par block. z'avez qu'à essayer (ça aligne tout je crois, c'est donc assez nul)
background-image:none !important; si vous voulez insérer une image de fond stockez la en ligne quelque part et au lieu de none !important inscrivez : url(http://adresse de l'image) on laisse le ; of course.
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} c'est la décoration des liens : none c'est rien, underline : souligné, etc, etc ...
#labelCloud a:hover{text-decoration:underline}(même principe qu'au dessus pour quand la souris passe sur les lien
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} Si vous avez activé le compte des billet , voir plus bas, vous pouvez modifier ici la taille et la couleur.
#labelCloud .label-cloud li:before{content:"" !important}
Dans la section Variables (la seconde) vous pouvez également modifier une paire de trucs :
var cloudMin= 1;
celui ci vous permet de modifier le nombre de tags présentés, si par exemple vous mettez 5 au lieu de 1, le nuage ne présentera que les libellés qui ont été attibués à 5 billets ou plus.
var maxFontSize = 20;
Celui ci définit la taille des lettres du Tag avec le plus de billets.
var maxColor = [0,0,255];
La couleur par défaut du tag avec le plus de billets (si j'ai bien tout compris la couleur se nuancera jusqu'à atteindre celle du tag avec le moins de billet, pour modigier le code R,G,B, allez jeter un oeil ici, soyez soigneux.
var minFontSize = 10;
La taille du tag avec le moins de billets.var minColor = [0,0,0];
La couleur du tag avec le moins de billets.
var lcShowCount = false;
Si vous mettez true à la place de false, le monbre de billet par tag sera indiqué, n'est-ce pas fantastique ?
Par : A Badmaash Factory
5 comments
Label ou tag ? :D
Posted on April 11, 2009 at 6:53 AM
C'est quoi un label cloud? J'ai tout lu, mais je n'ai pas grand chose au poème. Enfin, c'est très beau comme billet, quand même!
Posted on April 11, 2009 at 11:45 PM
Coucou, c'est un "nuage de tags". Même quand il fait beau.
Posted on June 15, 2009 at 7:59 AM
@mtislav: d'accord, je vois… Mais je n'utilise jamais ce truc là chez les autres…
Posted on June 15, 2009 at 10:56 AM
Je l'ai supprimé de mon blog... C'était amusant à installer !
Posted on June 15, 2009 at 12:21 PM