Blogger Tips: Adding Label Cloud Widget in Blogspot

This tutorial will help you to add a label cloud widget in your blogspot.


1. Search the code below in "edit HTML" which can be reached at Layout after login your blogspot account.

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

2. Add the code below immediate after "<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 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&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>
<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 Tutorials</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>

Note: You should delete the original code from <b:includable id='main'> to </b:widget> if any. 

3. Next, Search "]]></b:skin>" at edit HTML again , then add the code below immediate before that.

#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}

Finally, you can customize its color by changing the value of var maxColor and var minColor  as well as customize its font size by changing the value of var minFontSize and var maxFontSize in "edit HTML".


Written by: Xaivier Chia


Reference: http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html

Advertisements: