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 iBlogTools.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
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'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//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?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
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; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by
<a href="http://www.iBlogTools.blogspot.com">Blogger Widgets</a>
</span>
</div>
</b:includable>
</b:widget>
     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. ^^

7 comments:

Kathrine said...

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

Clear instructions.

Thanks.

Kathrine

nilbaboon said...

VERY SIMPLE BUT NICE THANK YOU.

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

Panjila Poul said...

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

Unknown said...

hi, nice post...

Unknown said...

your code is simple and working.
my blog is tamilwiremp3rk.blogspot.com

Post a Comment


Related Posts Plugin for WordPress, Blogger...

Recent Post

SPONSOR

Tag Cloud

Blogumulus

Random Posts

Archives