If you are tired of the boring looking and ever longer list of labels or tags that is produced by the widget you can add to your Blogger blog via the Add a Gadget function, then you might want to consider changing this list into a label cloud. A label cloud, also known as tag cloud, - in this case specifically designed for blogger - is a visual depiction of all labels used on your blog. You can see a demo of the label cloud for Blogger (blogger label/tag cloud) right here on the sidebar of my blog. This Label Cloud Widget was originally developed by phydeaux3. The version you find here has just been simplified and made a bit easier to install...
To get started, please go to your Blogger Layout -> Page Elements page and add a Labels Widget. You can do that using the Add a Gadget Option (the + button on the right) on that page.
Choose to sort the labels alphabetically when prompted.
After adding the Label Widget go to Layout -> Edit Html (Please do not expand the widget templates for the sake of easy explanation).
Search for some code similar to
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Now Replace above code with
<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [35,130,196];
var minFontSize = 13;
var minColor = [35,130,195];
var lcShowCount = false;
// 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';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/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>
</p>
<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>
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Widgets</a></small>
<br/>Blogger Label Cloud:<small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
When you are done, look for the following line of code
]]></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:"" !important}
]]></b:skin>
Save your template. You should now get a working Label Cloud on your Blogger blog.
Optional Parts: Proceed further only if you want to customize the cloud to a more personal level...
Changing Cloud Colours:
You can change the colors of the cloud by editing the code a little bit. In order to do that you will have to expand your widget templates and modify the following 2 lines of code
var maxColor =
and
var minColor =
You have to specify the RGB values you find there. They are separated by commas. If you are 100% sure of what the hex codes of the maximum and minimum colors should be,then you can use this to convert the hex value to RGB values. If you are not sure of what the hex codes of the colors are then have a look at this.
Changing the Font Sizes:
You can change the font sizes by editing the following 2 lines of code var minFontSize =
and
var maxFontSize =
That´s all, folks! Have fun with your personal Label Cloud.
Inspired by: Label Cloud Widget For Blogger / Blogspot Thank you!
