How To Add Tag Cloud Widget On Blogger?

This widget is nice for blogspot bloggers who wants to have a tag cloud for categories or labels. This is a simple tag cloud widget if you want to change your old categories/labels list in your blog. This is easy to implement on the sidebar of your blog and will blend to your template directly.

Adding Tag Cloud Widget On Blogger:

     1.  Back up your template first by downloading it.
     2.  Make sure you have Labels Widget installed in your blog.
     3.  Go to your Dashboard > Design > Edit HTML.
     4.  Don't click on Expand Widget Template.
     5.  Find the code below:
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
        - Just Ctrl+F then type in the box below the browser type='Label'.

     6.  Change the whole line of the code with type='Label' with the code below.
Distributed by Jai Cuizon at
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
Released to the Public Domain

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes,
 false for no
var minCount = 1;  // what is the minimum count for a tag 
 to be shown? 1 for all

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>

var urls = new Array();
<b:loop values='data:labels' var='label'>

var counts = new Array();
<b:loop values='data:labels' var='label'>

//Number sort funtion (high to low)
function sortNumber(a, b)
return b - a;

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot;
 &amp;&amp; counts[x] >= minCount)
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
var count = &quot;&quot;;
document.write(&quot;<span style='font-size:&quot; + textSize
 + &quot;%'><a href='&quot; + urls[x] + &quot;'
 style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span>
&quot; );
<span style="font-size:80%;float:right;">Powered by
<a href="">Blogger Widgets</a>
     7.  Preview it, see if you can see your new tag cloud widget.
     8. Then, SAVE it.

Just make sure you follow the steps above to implement the tag cloud widget completely without any problems. Drop a comment if you have difficulties implementing the tag cloud widget. ^^


Kendra Bing said...

Discover blogs, pics and videos you otherwise wouldn't have at Or share your truly awesome blog postings to be part of the big collection.

Kathrine said...

Tag clouds are must for fast SEO.
Followed this tutorial and added tag cloud to my blog seamlessly.

Clear instructions.



nilbaboon said...


Tech Gyrl said...

Are you retarded? I tried finding that code in both the old and new blogger interface and I cannot.

srkshazu said...

good and nice post also helpful,thanks i like it

Penueli Poul Mtafya said...

does not exist plz help me if there is another code.

pinay said...

hi, nice post...

rockey max said...

your code is simple and working.
my blog is

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Recent Post


Tag Cloud


Random Posts