Blogger Templates Designs Plugins Widgets Hacks Tips Tricks Tutorials

10 February 2008

Add Label Cloud Widget For Blogger

Blogger Hacks- How To Put Widgets Label Cloud Or Widgets Tag Cloud On Blogger Sidebar

Blogger Hacks- How To Put Widgets Label Cloud Or Widgets Tag Cloud On Blogger Sidebar

A tag cloud or label cloud for blogger is a list of all the labels used within a blogger blog displayed with style.You can see a demo of the Label cloud widget here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..

You can see a good implementation of this label cloud widget on one of our readers blog -Speak Media Blog.
First Of all Goto 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.

Blogger Hacks- How To Put Widgets Label Cloud Or Widgets Tag Cloud On Blogger Sidebar



Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to


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


Add Code New

<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 = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
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>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Now find

]]></b:skin>


Add CSS Label Cloud Widgets for Blogger

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

How to Add Label Cloud Widget For Blogger

23 Comments:

Ranjitha said...
Oct 17, 2008, 11:52:00 AM

Thank u very much. Please tell me how to add this post a comment box in blogger like the one you have.

phidas said...
Oct 25, 2008, 2:19:00 PM

Thank u very much

GT said...
Nov 2, 2008, 10:07:00 AM

Lovely! Was about to try and write this myself and thought... hrm... there must be some clever bugger who has done this. That person happened to be you :)

Belasungkawa said...
Dec 5, 2008, 5:45:00 AM

Thanks a lot man! been searching for this hack

aka_mojojojo said...
Dec 9, 2008, 5:58:00 PM

This is awesome, thanks. One question is there a way limit the labels to only show those with a count greater than x (in my case 5)?

Axsys Technology Group said...
Dec 17, 2008, 11:06:00 PM
This comment has been removed by the author.
Axsys Technology Group said...
Dec 17, 2008, 11:07:00 PM

WOW!!! Bless you...been considering adding this to my blog for a while now, and just remembers tonight that I wanted to add it. Took me 2 mins to find this entry and 7 minutes to add it to our blog on Blogspot, which I've setup as a subdomain of our main domain, via http://blog.axsystechgroup.com. Check it out, it looks great on the site. Thanks again.

Admin said...
Jan 12, 2009, 12:47:00 PM
This comment has been removed by a blog administrator.
Admin said...
Jan 12, 2009, 12:57:00 PM
This comment has been removed by a blog administrator.
Anonymous said...
Jan 15, 2009, 10:12:00 AM

@photojunk

NO SPAM.

betsy said...
Feb 4, 2009, 12:35:00 PM

How do I change the color of the text in the label cloud?

Anonymous said...
Mar 16, 2009, 4:33:00 AM

Yes, same question here. How to change the colors of some bigger labels? The color green looks odd for my blog template.

Thanks for this easy tutorial.

Anonymous said...
Mar 17, 2009, 5:59:00 PM

Knock, knock. Please answer our query.

onichi said...
Jun 26, 2009, 11:12:00 PM

Thanks for this tutorial. I change max & min color variable in JavaScript code.

Subodh Raghav said...
Jul 5, 2009, 6:01:00 AM

Very good article for new bloggers.
www.techieway.blogspot.com

Mr. James Harper said...
Aug 5, 2009, 11:34:00 PM

Hi I have been trying to install this code in my blog my I am not yet successful can you help me with it. www.treasure-net.blogspot.com

Navinder Narang said...
Aug 21, 2009, 3:16:00 AM

I have not been able to add the label cloud successfully. Only the heading 'Label Cloud' shows. Must have done somethng wrong I guess. Please advise. www.ileadifollow.blogspot.com

Robyn @ ItsRobyn.com said...
Jul 18, 2010, 3:02:00 PM

Same thing happened to me as Navinder. Only see "label cloud" on my sidebar. :(

ONLINE RESOURSE said...
Aug 21, 2010, 2:01:00 AM

hey u r blog is very nice how can i get this theme plz give me the xml theme plzzzzz thnx

Jack said...
Jul 19, 2011, 3:01:00 AM

This is awesome. I would love to be able to do this on my blog....but my HTML seems to be different than what you show? That is of the reason that I am getting error..May you help in in getting out of it.

comment system

Post a Comment