How to add label cloud for blogger

I myself a very big fan on Label cloud also known as tag cloud. Instead of showing labels in a row, label cloud shows the size of the category/label content by increasing the size of its font if the particular label is having a large post when compared to other labels and vice versa. And i find this hack very interesting,and credits and thanks to phydeaux3 . This hack is very simple to install and will easily fill your minds.


The code comes in 3 parts. A section for the stylesheet, a configurations section,
and then the actual widget itself. Now let me show you the hack, how you can install label cloud to your blogger.

Note: Before installing label cloud to your blog make sure you have a label page element added to your blog, sorted in alphabetical order.

1. Login to Blogger with your ID
2. Click on Layout
3. Click on HTML Tab
4. And do not Expand Widget Template
5. just scroll down or (Ctrl+F) and search for this line of code

]]></b:skin>

6. Right before this code paste the below code

/* Label Cloud Styles----------------------------------------------- */
/* Adopted by http://bloggers-university.blogspot.com/ */#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 03px;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}

7. And now after ]]></b:skin> and before </head> paste this code
   

<scripttype='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

8. And finally find for this line of code

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

9. And replace the above code with the following code

<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'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
/*Created by http://phy3blog.googlepages.com/ and Adopted by http://bloggers-university.blogspot.com/ */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('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
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('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 = '/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/>
<aexpr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:includename='quickedit'/>
</div>

</b:includable>
</b:widget>

10. Save your Template and your done !!!.

Please view your blog now to see the beautiful hack to work like a charm. More information on playing with the hack can be read here by the original Author phydeaux3 .

Hope you like this post of ours, to read more post of similar and many more on blogging, enter your email and subscribe with us to recieve updates of this blog via email or subscribe to as a reader.

Subscribe in a reader

Bookmark this post:

Do you think this post is worth reading and would you like to help our work, if so please bookmark this post for us and lets share it with others.

Link to this post:
<a href="http://bloggers-university.blogspot.com/2008/11/how-to-add-label-cloud-for-blogger.html" target="_blank">How to add label cloud for blogger</a>

---

People who read this post, also read: