I wanted to have a Tab Cloud in my blog. However, blogger provides only the Label widget which gives only a list of the blog's labels.
I found this blog entry , which produced something very similar to what I wanted. I modified it so that:
- it is more to my taste
- allows for further development and easier modifications.
You can see the resulting Tag Cloud on this blog (collumn on the right) and also in
http://www.papitsa.gr/The installation instructions can be found in the original post.
<b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: center;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
Modified by Michalis Giannakidis :
o) tune parameters to my likes
o) modifications to allow more flexibility in formatting of tags and
allow further development.
*/
//Variables:
var max = 130; //max css size (in percent)
var min = 70; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.
//Begin code:
var range = max - min;
function labelObj() {}
//Build label Array
var lb = new Array();
var most = 1;
<b:loop values='data:labels' var='label'>
var item = new labelObj();
item.label = ("<data:label.name/>");
item.url = ("<data:label.url/>");
item.count = ("<data:label.count/>");
lb.push(item);
if ( most < "<data:label.count/>" ) {
most = ("<data:label.count/>");
}
</b:loop>
//Labels sort, ignore case
function sortLabels(a, b) {
aa = a.label.toLowerCase();
bb = b.label.toLowerCase();
if ( aa < bb ) {
return -1;
} else if ( aa > bb ) {
return 1;
} else {
return 0;
}
}
lb.sort(sortLabels);
//Begin HTML output
for (x in lb) {
if(x != "peek" && x != "forEach"
&& lb[x].count >= minCount){
//Calculate textSize
var textSize = min + Math.floor((lb[x].count/most) * range);
//Show counts?
if(showCount == 1) {
var count = "(" + lb[x].count + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize +
"%'><a href='" + lb[x].url + "'>" + lb[x].label +
count + "</a></span> " );
}
}
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>