14 May 2009

Label Cloud or Tag Cloud widget for Blogger

Advertisements

In most websites there is Label/ Tag clouds embedded as shown in following image.



And now a Blogger can do the same by using following easy steps.

See the Demo of Label or Tag Cloud Widget

At least one of your labels has more than one entry. A bug in the script causes it to fail when all the labels have only one entry.Also, make sure that none of your labels contain quote marks " .


1. Login to Blogger >> Layout >> Page Elements >> Add a Gadget >> Labels. A new window will open. Sorting should be Alphabetically and now hit SAVE. Now go to Edit HTML. Download Full Template for backup.

2. Now look for this tag

]]></b:skin>

And place following code before that tag.

/* Label Cloud Styles
----------------------------------------------- */
#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}



3. Now add following code After

]]></b:skin>

and before </head> tag.


<script type='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>


Above code is the variable section.

4. Now look for following

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


Now copy the following code and replace it with above line.

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


It's done !


You can configurthe colors and font size to match your blog. At no. 3 step you added these variables

<script type='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>


var cloudMin= 1;
This enable you to limit the no. of labels shown. If you keep this setting at 1 then it will show all the labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

maxFontSize - sets the size of the label with the most amount entries.
maxColor - sets the color of that entry (in RGB format).

minFontSize - sets the size of the label with the least entries.
minColor - sets the color of that entry (in RGB format).

lcShowCount
If its false then label count is off and if it is true then label count is on.


UPDATE : New version of this widget is available. 

WP Cumulus a Flash based animated label/tag cloud for Blogger blogs!

Related Posts

23 comments

Anon
May 30, 2009 at 6:57 AM

Wow this code works for me. Thanks Free Blogger Help.

June 24, 2009 at 2:11 AM

Thanks, it works for me. How do I make some words larger than the other base on the number of posts. hope to hear yr reply soon.
diversitycoon.blogspot.com

June 24, 2009 at 7:54 AM

Look for the last code given in main post and try experiment it with.

June 24, 2009 at 7:57 PM

Thank you very much. It works for me.

June 30, 2009 at 8:22 AM

thanks! it worked perfectly for me!

July 2, 2009 at 1:57 AM

you are always welcome guys :D

July 28, 2009 at 7:33 PM

I did it! Thanks so much :)

Anonymous
July 29, 2009 at 7:41 PM

Thanks a lot! I tried code from several sites and none of them worked! Thanks for including information on how to cutomize the colors and look.

November 9, 2009 at 3:57 PM

Hi! It Dosnt Work! i Did All, step by step, But there is No cloud tag in Page:

http://filmkhors2.blogspot.com/

Please Help!

November 11, 2009 at 5:01 AM

Go to blogger Layout >> Add Gadget >> Lables.
Select Cloud from Display. Save it.

February 3, 2010 at 11:23 PM

Very nice widget..

February 6, 2010 at 2:02 AM

hi there! is it possible to use my own template & get the labels? i cant seem to get it on my own template :(

February 7, 2010 at 2:00 AM

i got it off blogskins.com it was designed by someone else!(: is it still possible? thanks!

February 8, 2010 at 1:43 AM

what is the problem? Use all codes carefully.

April 22, 2010 at 4:28 AM

first two steps worked fine, after each step, i hit save template.
at third step. bigger code, copy paste, it gives error while saving
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".

>>>>
actually, searching line which u mentioned, gives error, there is "/" at end, which i don't have. if i remove that foward slash. it searched. if i only select / remove that line, pasting / saving gives error.
but if i select that widget whole control and replace, that save works but still didn't show up...

April 23, 2010 at 12:51 AM

LALA send your template to me.

July 20, 2010 at 12:53 AM

@drraman

i have tried these steps but no work..please help me in this.

http://jobsansaar.blogspot.com/

Thanks

July 20, 2010 at 2:47 AM

Jobsplanet
The solution is ready. But today I am busy. I will post it on 21 July.

December 8, 2011 at 11:40 AM

I can't get this work. I got the codes in place. My Page Element page shows the gadget is there, but it doesn't show on the blog page. Thanks.

December 8, 2011 at 10:49 PM

remove all the above codes and try this one
http://www.blogger-help.com/2010/07/wp-cumulus-flash-based-animated.html

December 9, 2011 at 9:06 AM

Does it make a difference if I am using the Safari browser on a Mac laptop?

December 9, 2011 at 11:57 PM

I always recommend Mozila Firefox for dealing with HTML

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More