Blogger Tag Cloud Widget by Categories / Labels

Thursday, July 30, 2009

Blogger Tag Cloud Widget by Categories / Labels

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 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'.

/*<br />Distributed by John Smith at WidgetsForFree.blogspot.com<br />*/ <b:widget id="'Label1'" locked="'false'" title="'Tags'" type="'Label'"><br /><b:includable id="'main'"><br /><b:if cond="'data:title'"><br /><h2><data:title/></h2><br /></b:if><br /><div class="'widget-content'" style="'text-align:"><br /><script type="'text/javascript'">/*Simple Blogger Tag Cloud Widgetby Raymond May Jr.http://www.compender.comReleased to the Public Domain*///Settings / Variablesvar 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 novar minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all//Begin code:var range = max - min;//Build label Arrayvar labels = new Array();<b:loop values="'data:labels'" var="'label'">labels.push("<data:label.name/>");</b:loop>//URLsvar urls = new Array();<b:loop values="'data:labels'" var="'label'">urls.push("<data:label.url/>");</b:loop>//Countsvar counts = new Array();<b:loop values="'data:labels'" var="'label'">counts.push("<data:label.count/>");</b:loop>//Number sort funtion (high to low)function sortNumber(a, b){return b - a;}//Make an independant copy of counts for sortingvar sorted = counts.slice();//Find the largest tag countvar most = sorted.sort(sortNumber)[0];//Begin HTML outputfor (x in labels){if(x != "peek" && x != "forEach" && counts[x] >= minCount){//Calculate textSizevar textSize = min + Math.floor((counts[x]/most) * range);//Show counts?if(showCount){var count = "(" + counts[x] + ")";}else{var count = "";}//Outputdocument.write("<span style="'font-size:"><a href="'" style="'text-decoration:none;'">" + labels[x] + count + "</a></span> " );}}</script><br /><br /><br /><span style="font-size:80%;">Powered by <a href="http://www.widgetsforfree.blogspot.com">WidgetsForFree</a></span><br /></div><br /></b:includable><br /></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.

Blogger Tips and Tricks

Free Best Blogger templates

Thursday, July 30, 2009

Blogger Tag Cloud Widget by Categories / Labels

0 comments:

Post a Comment

SPONSORS

Labels

Blog Archive

Free Best Blogger Templates