lundi 12 octobre 2009

Publier un nuage de libellés personnalisé

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+

24 commentaires:

  1. Bravos!
    Je ne vis plus que dans l'attente de la leçon consacrée à "lire la suite" !
    Grand sourire admiratif (durable)

    RépondreSupprimer
  2. Bonjour

    je 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

    RépondreSupprimer
  3. Bonjour,
    Aprè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.

    RépondreSupprimer
  4. Bonjour Jean-Marc,

    Merci 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.

    RépondreSupprimer
  5. Bonsoir Waldorf et Statler,
    Merci 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

    RépondreSupprimer
  6. Même remarque, merci de votre aide!

    RépondreSupprimer
  7. Bonsoir,
    Avez-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!

    RépondreSupprimer
  8. Bonjour,

    Merci 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 !

    RépondreSupprimer
  9. Bonsoir,

    Je 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

    RépondreSupprimer
  10. Bonjour Michel,

    Effectivement j'ai du taper trop vite.
    Je rectifie.
    Merci beaucoup.

    RépondreSupprimer
  11. 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.
    Je suis surpris car je partais du principe que le code initial était correct. C'est probablement là que je me trompe.

    RépondreSupprimer
  12. Testez et vous me direz.
    Ce 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.

    RépondreSupprimer
  13. Bonjour,

    j'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

    RépondreSupprimer
  14. 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?

    Un gros merci à l'avance !
    J'ai tout essayé mais là, j'ai besoin de vous !!!

    Caroline

    RépondreSupprimer
  15. Bonjour,
    Utilisez le gadget Image en mettant le lien dans Associer.

    RépondreSupprimer
  16. Merci beaucoup, particulièrement pour avoir répondu si rapidement.

    RépondreSupprimer
  17. Peut-on insérer un mini-chat sur Blogger ?

    Merci mille fois,

    Célestine ♥

    RépondreSupprimer
  18. bonjour

    impossible 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

    RépondreSupprimer
  19. Bonsoir,

    Idem 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 ...

    RépondreSupprimer
  20. Trop dur et quasiment impossible à faire tout seul!Dommage!!!!Grrrrrrrrrrrrrrrrr

    RépondreSupprimer

  21. Premierement 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

    RépondreSupprimer
  22. 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épondreSupprimer
  23. Bonjour, 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épondreSupprimer
    Réponses
    1. Bonjour Cindy,
      Beaucoup 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.

      Supprimer

Merci de prendre note des messages d'annonce en une du blog.
Et d'adresser vos questions sur notre
Communauté des Utilisateurs de Blogger hébergée sur Google+.

LinkWithin

Related Posts with Thumbnails