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.
Les codes des couleurs en langage HTML
Difficile de changer les couleurs de son site, sans connaître les "codes couleurs" propres au langage HTML ! Pour vous aider, voici un tableau reprenant les principales couleurs utilisables sur les sites web :
Tableau de concordance des codes et des couleurs | |||
|---|---|---|---|
| résultat | codage significatif | codage hexadécimal | résultat |
|
white |
FFFFFF |
|
|
ghostwhite |
F8F8FF |
|
|
whitesmoke |
F5F5F5 |
|
|
snow |
FFFAFA |
|
|
azure |
F0FFFF |
|
|
honeydew |
F0FFF0 |
|
|
mintcream |
F5FFFA |
|
|
lightyellow |
FFFFE0 |
|
|
floralwhite |
FFFAF0 |
|
|
ivory |
FFFFF0 |
|
|
linen |
FAF0E6 |
|
|
oldlace |
FDF5E6 |
|
|
seashell |
FFF5EE |
|
|
lavenderblush |
FFF0F5 |
|
|
lavender |
E6E6FA |
|
|
gainsboro |
DCDCDC |
|
|
lightgrey |
D3D3D3 |
|
|
silver |
C0C0C0 |
|
|
darkgray |
A9A9A9 |
|
|
lightslategray |
778899 |
|
|
slategray |
708090 |
|
|
gray |
808080 |
|
|
dimgray |
696969 |
|
|
black |
000000 |
|
|
bisque |
FFE4C4 |
|
|
wheat |
F5DEB3 |
|
|
moccasin |
FFE4B5 |
|
|
peachpuff |
FFDAB9 |
|
|
mistyrose |
FFE4E1 |
|
|
pink |
FFC0CB |
|
|
lightpink |
FFB6C1 |
|
|
rosybrown |
BC8F8F |
|
|
coral |
FF7F50 |
|
|
tomato |
FF6347 |
|
|
orangered |
FF3300 |
|
|
red |
FF0000 |
|
|
crimson |
DC143C |
|
|
indianred |
CD5C5C |
|
|
firebrick |
B22222 |
|
|
darkred |
8B0000 |
|
|
maroon |
800000 |
|
|
brown |
A52A2A |
|
|
saddlebrown |
8B4513 |
|
|
sienna |
A0522D |
|
|
chocolate |
D2691E |
|
|
darkorange |
FF8C00 |
|
|
orange |
FFA500 |
|
|
lightsalmon |
FFA07A |
|
|
darksalmon |
E9967A |
|
|
salmon |
FA8072 |
|
|
sandybrown |
F4A460 |
|
|
navajowhite |
FFDEAD |
|
|
blanchedalmond |
FFEBCD |
|
|
papayawhip |
FFEFD5 |
|
|
antiquewhite |
FAEBD7 |
|
|
beige |
F5F5DC |
|
|
cornsilk |
FFF8DC |
|
|
palegoldenrod |
EEE8AA |
|
|
khaki |
F0E68C |
|
|
yellow |
FFFF00 |
|
|
gold |
FFD700 |
|
|
darkgoldenrod |
B8860B |
|
|
peru |
CD853F |
|
|
goldenrod |
DAA520 |
|
|
tan |
D2B48C |
|
|
burlywood |
DEB887 |
|
|
darkkhaki |
BDB76B |
|
|
chartreuse |
7FFF00 |
|
|
greenyellow |
ADFF2F |
|
|
lawngreen |
7CFC00 |
|
|
lime |
00FF00 |
|
|
springgreen |
00FF7F |
|
|
palegreen |
98FB98 |
|
|
mediumspringgreen |
00FA9A |
|
|
limegreen |
32CD32 |
|
|
mediumseagreen |
3CB371 |
|
|
yellowgreen |
9ACD32 |
|
|
aliceblue |
9ACD32 |
|
|
mediumaquamarine |
66CDAA |
|
|
darkseagreen |
8FBC8F |
|
|
forestgreen |
228B22 |
|
|
green |
008000 |
|
|
seagreen |
2E8B57 |
|
|
olive |
808000 |
|
|
olivedrab |
6B8E23 |
|
|
darkgreen |
006400 |
|
|
darkslategray |
2F4F4F |
|
|
darkolivegreen |
556B2F |
|
|
aquamarine |
7FFFD4 |
|
|
aqua |
00FFFF |
|
|
cyan |
00FFFF |
|
|
paleturquoise |
AFEEEE |
|
|
turquoise |
40E0D0 |
|
|
mediumturquoise |
48D1CC |
|
|
darkturquoise |
00CED1 |
|
|
lightseagreen |
20B2AA |
|
|
cadetblue |
5F9EA0 |
|
|
teal |
008080 |
|
|
darkcyan |
008B8B |
|
|
steelblue |
4682B4 |
|
|
deepskyblue |
00BFFF |
|
|
lightskyblue |
87CEFA |
|
|
lightsteelblue |
B0C4DE |
|
|
powderblue |
B0E0E6 |
|
|
skyblue |
87CEEB |
|
|
cornflowerblue |
6495ED |
|
|
dodgerblue |
1E90FF |
|
|
mediumslateblue |
7B68EE |
|
|
slateblue |
6A5ACD |
|
|
royalblue |
4169E1 |
|
|
blue |
0000FF |
|
|
mediumblue |
0000CD |
|
|
darkslateblue |
483D8B |
|
|
navy |
000080 |
|
|
darkblue |
00008B |
|
|
midnightblue |
191970 |
|
|
indigo |
4B0082 |
|
|
blueviolet |
8A2BE2 |
|
|
darkorchid |
9932CC |
|
|
darkviolet |
9400D3 |
|
|
mediumpurple |
9370DB |
|
|
orchid |
DA70D6 |
|
|
mediumorchid |
BA55D3 |
|
|
fuchsia |
FF00FF |
|
|
magenta |
FF00FF |
|
|
hotpink |
FF69B4 |
|
|
violet |
EE82EE |
|
|
thistle |
D8BFD8 |
|
|
plum |
DDA0DD |
|
|
palevioletred |
DB7093 |
|
|
deeppink |
FF1493 |
|
|
mediumvioletred |
C71585 |
|
|
purple |
800080 |
|
|
darkmagenta |
8B008B |
|
Que vous utilisiez le mot figurant dans la colonne de gauche, ou le code présenté dans celle de droite, le résultat sur votre page devrait être le même. Il est toutefois conseillé d'utiliser les codes hexadécimaux, jugés plus fiables et lisibles par l'ensemble des navigateurs Web. De plus, les noms de couleurs sont en nombre limité, tandis qu'il existe un nombre quasi illimité de nuances lorsque l'on utilise le codage hexadécimal.
D'autres palettes de couleurs sont disponibles sur les sites suivants :
- http://www.ficml.org/jemimap/style/color/couleur.html
- http://www.henri-ruch.ch/HTML/Couleurs/nom_couleur.asp
