Saturday, January 29, 2011

Tag Cloud Widget for Categories

This is also wonderful blog widget for blogger.Its very
attractive.try to put like this categories for your blogger.

1. Go to blogger dashboard and click "Design" and 
click "Page Element"


2.  Now choose the palace u want to put category and Click "Add a Gadget
     and then add the "Labels" Gadget.

3. Now you have to locate your old category code. So,click "Design" and 
    click "Edit HTML"

4. Make sure that"Expand Widgets Template" box is unchecked

5. Find these code
                        <b:widget id='Label1' locked='false' title='Tags' type='Label'/> 
    Sometime your code may look different ,type just "type='Label"and find the code.

6. Now remove the code you selected.copy this below code to that place
 */ <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.bloggertrix.com/">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>

7. Now click"Preview".make sure after preview you can see your new tag cloud.
    If not don't save it and make sure you did step correctly.

0 comments:

Post a Comment