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
Salut
Faut il être en mode avancé ? et qu'entends tu par la nouvelle version de blogger ? Merci
PS : tes explications sont supers, ton blog m'aide bcp
Bonjour,
J' ai réussi !!!
Je n' arrive cependant pas à personnaliser mon nuage de tags . Où dois-je placer le code ?
Merci .
Je souhaiterais également modifier la couleur du nuage et insérer de liens . A chaque mot sa recette .
Saurais-tu me guider ?
Merci .
Besoin d'aide
Bonjour,
Je suis nouveau sur blogger et j'aiemrais créer un uage de tag.
J'ai réalisé tes explications et je n'arrive pas à créer mon nuage de tag.
Je ne trouve pas :
Peut tu m'aider ?
Ce serait super sympa de ta part car le blog est super complet et offre beaucoup de possibilité mais pour un novice, c'est pas évident !
Merci d'avance pour ton aide !
Morgan
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 :
