Friday, January 21, 2011

Label Cloud Widget For Blogger

A tag cloud or label cloud for blogger is a visual pictorial representation of all labels used on your blog. You can see a demo of the Label cloud for blogger (blogger label cloud) here on my site.

First of all Go to Your blogger Layout > Page Elements page and add a Labels Widget there...You can do that using the Add a Page Element Option on that page.

After Adding the Label Widget Go to Layout > Edit HTML (Do not expand the widget templates)
You will find some code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now Replace that with

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [161,214,51];
var minFontSize = 13;
var minColor = [96,137,14];
<b:if cond='data:showFreqNumbers'>
var lcShowCount = true;
<b:else/>
var lcShowCount = false;
</b:if>

// Don’t change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;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 = &quot;<data:label.name/>&quot;;
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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
</p>
<noscript>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
<br/>Powered By:<small><a href='http://www.tamsuper.blogspot.com'>Blogger Gadgets</a></small>
<br/><small><a href='http://tamsuper.blogspot.com/2011/01/label-cloud-widget-for-blogger.html'>Label Cloud for Blogger</a></small>
</noscript>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Now find

]]></b:skin>

and replace it with



#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:&quot;&quot; !important}
]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.
You can configure the Gadget from the Gadget Options

Additional Tweaks

These tweaks are optional. Proceed further only if you want to customize the cloud to a better level...

Changing Cloud Colours:

You can change those colours editing the code a little bit...
You will have to expand your widget templates and modify these 2 lines of code

var maxColor =

and

var minColor =
you have to specify the RGB values there separated by commas..If you are sure of what should be the hex codes of the maximum and minimum colors, then you can use this convertor to convert the hex value to RGB values
Changing the Font Sizes:

You can change the font sizes by editing these 2 lines of code

var minFontSize =
and
var maxFontSize =


Confused? Feel free to ask
Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger