Cloud Tag Widget For Blogger

Steps for Implementation

Always make sure to back up your Blogger Template before doing anything else!

Step 1: Back it Up

Go to Layout >Page Elements .Click “Add a Gadget” and then add the “Labels” gadget.

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven’t already…

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.

<b:widget id=’Label1′ locked=’false’ title=’Tags’ type=’Label’/>

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:

<h2> /* */ <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'></p> //Settings / Variables var max = 150; //max <a title="css" class="aal" target="_blank" href="http://freebloggingtricks.com/complete-css-tutorial-series/">css</a> 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("<data:label.name/>"); </b:loop> //URLs var urls = new Array(); <b:loop values='data:labels' var='label'> urls.push("<data:label.url/>"); </b:loop> //Counts var 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 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 != "peek" && x != "forEach" && counts[x] >= minCount) { //Calculate textSize var textSize = min + Math.floor((counts[x]/most) * range); //Show counts? if(showCount) { var count = "(" + counts[x] + ")"; }else{ var count = ""; } //Output document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " ); } } </script> <br/> <span style="font-size:80%;float:right;">Powered by <a href="http://freebloggingtricks.com"><a title="Blogger Widgets" class="aal" target="_blank" href="http://freebloggingtricks.com/category/blogging/widgets/">Blogger Widgets</a></a></span> </div> </b:includable> </b:widget> </h2>

Step 5: Previewing the New Tag CloudBefore 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.

Feedback!

Hope you guys like this post.Stay with us to know about new update.Happy Blogging!