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

25 Comments:

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

photojunk said...
Jan 12, 2009, 12:47:00 PM
This comment has been removed by a blog administrator.
photojunk said...
Jan 12, 2009, 12:57:00 PM
This comment has been removed by a blog administrator.
betsy said...
Feb 4, 2009, 12:35:00 PM

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

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

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

Sandeep 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 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 said...
Jul 18, 2010, 3:02:00 PM

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

niz said...
Aug 20, 2010, 10:10:00 AM

Hello .. firstly I would like to send greetings to all readers. After this, I recognize the content so interesting about this article. For me personally I liked all the information. I would like to know of cases like this more often. In my personal experience I might mention a book called Generic Viagra in this book that I mentioned have very interesting topics, and also you have much to do with the main theme of this article.

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

Mike 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

Evolve said...
Sep 22, 2011, 2:31:00 AM

You are focused on realizing all you possibly can about this. We're completely satisfied you discovered us. On this site, we have introduced collectively an unlimited array of data and sources on this.


Accountants in Leeds

Post a Comment