Publier un nuage de libellés personnalisé

Publié par Othmane BENTALEB à 15:57

Bismillah. Bienvenue sur Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

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.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

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.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

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.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.

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.

Outils Blogger http://www.outils-blogger.blogspot.com/ : Outils, Astuces, Widgets, Modèles, Adsense, Seo-Référencement.