Sunday, December 6, 2009

Add Tag Cloud Widget For Blogger in Very Easy Steps


The Labels Cloud can easily be implemented within the sidebar

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation
Step 1: Back it Up
Always make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget
Make sure that you have the Labels Page Element installed. If you haven't already...
1. Go to Layout >Page Elements .
2. Click "Add a Gadget" and then add the "Labels" gadget.
Step 3: Locating the "Old Code"
1. Now go to Layout >Edit HTML
2. Make sure that the "Expand Widgets Template" box is unchecked.
3. Now we need to search for the code that looks like this.

Your code may look a little different. So try using your browser's search tool to find type='Label'.
Step 4: Replacing the "Old Code" with the "New Code"
1. Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
2. Replace this code that you've just deleted with the code below:


<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>
</div>
</b:includable>
</b:widget>


Step 5: Previewing the New Tag Cloud
Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

Stumble
Delicious
Technorati
Twitter
Facebook







Related Posts by Categories







4 comments on "Add Tag Cloud Widget For Blogger in Very Easy Steps"

This is DoFollow Blog Leave a Comment

Indonesia Java International destination on March 3, 2010 at 7:53 AM said...

how if i want make tag cloud type post not label??
please help me ..;))

Shahrukh Jokhio on March 27, 2010 at 9:58 PM said...

Download Full and Free Softwares - http://fullfree-softwares.blogspot.com

BloggerGeeze | Blogging Tutorials on April 21, 2010 at 2:53 PM said...

I've got another solution on displaying the labels/tags in a column/row list. You may want to check it out: How to List Labels in Column/Row Display on Blogger

Google Adsense Code Converter on August 27, 2010 at 6:00 PM said...

Thanx alot Masters

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

Latest Blogger Tricks,Tips,Tutorial,Template,Widgets