Saturday, April 18, 2009

Blogger Tag Cloud Widget

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 = (&quot;<data:label.name/>&quot;);
item.url = (&quot;<data:label.url/>&quot;);
item.count = (&quot;<data:label.count/>&quot;);
lb.push(item);

if ( most &lt; &quot;<data:label.count/>&quot; ) {
most = (&quot;<data:label.count/>&quot;);
}
</b:loop>


//Labels sort, ignore case
function sortLabels(a, b) {

aa = a.label.toLowerCase();
bb = b.label.toLowerCase();
if ( aa &lt; bb ) {
return -1;
} else if ( aa &gt; bb ) {
return 1;
} else {
return 0;
}
}
lb.sort(sortLabels);


//Begin HTML output
for (x in lb) {
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot;
&amp;&amp; lb[x].count &gt;= minCount){

//Calculate textSize
var textSize = min + Math.floor((lb[x].count/most) * range);
//Show counts?
if(showCount == 1) {
var count = &quot;(&quot; + lb[x].count + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize +
&quot;%'><a href='&quot; + lb[x].url + &quot;'>&quot; + lb[x].label +
count + &quot;</a></span> &quot; );
}

}
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

No comments: