12 décembre 2007
Blogger : astuce pour créer un nuage de tags
1. Pour afficher les libellés en forme de nuage sur Blogger (fonctionne uniquement sur la nouvelle version de Blogger !) il faut s'assurer qu'ils soient activés. Pour cela, aller dans l'onglet "paramètres" > "modèle" > "éléments de la page" > ajouter un élément > choisir "libellés" et les ajouter au blog.
2. N'oubliez pas ensuite de sauvegarder votre modèle actuel. Pour y parvenir, rendez-vous sous l'onglet "modèle" > "modifier le code HTML". Sous la rubrique "Sauvegarder/Restaurer un modèle", cliquez sur "télécharger le modèle dans son intégralité".
3. Sous la rubrique "Modifier le modèle", insérez les codes permettant l'affichage du "nuage de tags" :
a) Tout d'abord, cochez la case "Développer des modèles de gadget". Ensuite, recherchez dans les lignes de codes les balises ]]></b:skin> et copiez-collez avant ces balises 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}
b) Recherchez et placez entre les balises ]]></b:skin> ....et ...</head> le code suivant :
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://VOTREBLOG.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
N'oubliez pas de modifier dans la troisième ligne « VOTREBLOG » par le nom de votre blog.
c) Recherchez et remplacez l'ensemble du code à partir de <b:widget id='Label1' locked='false' title='Labels' type='Label'/> et jusqu'à </b:widget> par :
<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'>
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>
4. Personnalisez votre nuage de tags :
var cloudMin= 1; 1 affiche tout les labels
remplacer par 10 pour avoir 10 labels affichés dans le nuage de tags
var maxFontSize = 20; taille de 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.
Commentaires
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=381268&pid=7211603
Liens vers des weblogs qui référencent ce message :
