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
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...
- Go to Layout >Page Elements .
- Click "Add a Gadget" and then add the "Labels" gadget.
Step 3: Locating the "Old Code"
- Now go to Layout >Edit HTML
- Make sure that the "Expand Widgets Template" box is unchecked.
- 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"
- 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.
- Replace this code that you've just deleted with the code below:
/*
Distributed by John Smith at WidgetsForFree.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("<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://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
</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.






32 comments:
allaa.hapip@gmail.com
Wow.. thats a great widget..
i was looking for the widget like this.
But, when i tried to apply to my blog/HTML, the codes can be applied.
Is it true if i change the code (the codes in blue box at step 3 no. 3) with all codes you give.
I hope you answer quickly. Sorry if my engglish so bad...
Thanks...
Isn't this a standard widget?
not working...some code error for widget
Thank u a lot John... I loved it..!! It worked!!
I love the simplicity of the tag cloud. Great stuff john.
thanks man ... for other people ... there might be an error of "there is already a widget with the name label1" ... if you get this ... just rename the label to label2 ... or rename the old label
It doesn´t work with me.
I´ve tryed several times and don´t appear the tags. I´ve tryed already the Blogumulus by Roy Tanck and Amanda Fazani and also doesn´t work. It appears a blank space....
Best regards
Hg
Bytes&Sounds, which blog are you trying to implement this on? I'd be glad to help you get it up and running.
I think this is quite attractive for my blog!
hello there, i tried many times, same error appears in preview all links get lost. I mean I do see the cloud, but when I click on any link of my blog, they don't work any longer. e.g. archive linke, followers etc... Any suggestion?
Thank you for your time
Thats great and Thank you
Regards
Thanks i have recommended to my readers too
Hello John,
I added this widget to my blog, and it's there, but no tags are appearing. Think you could take a look?
My blog is: http://garylima.blogspot.com/
Thanks.
I tried it and it didn't work for me.
This tag cloud widget did:
http://www.compender.com/2007/12/simple-tag-cloud.html
VBRocks, I checked out your blog. Have you applied any labels to your posts?
Hi. i like your blog. Nice hacks. thank you.
I have added you in my blog lists. please add me to your blogger roll.
http://get-bloggertricks.blogspot.com
Get Blogger Tricks
thankx... please reply
http://get-bloggertricks.blogspot.com
I've got the label cloud on my sidebar, but how do I get the labels to actually get there? Sorry, but I'm fairly computer illiterate...when I make a new post and I type in the "labels" for each post at the bottom, I thought those words were what made up a "label cloud", but nothing is in the label cloud. Make sense??? HELP! PlEASE! :)
my english is not good but i'd like to thank you for your great widget.i tried it and it worked.but the tag cloud font is too small in my blog. as you see: http://onemorebuzz.blogspot.com
---
i don't know much about the codes.would you give me a soloution for this problem.do i need to change part of the code?
dude. i solved my problem.
i changed a part of the code.i added "10+" before "min + Math.floor((counts[x]/most) * range);"
thanks
papercouturiere, do the labels display in your sidebar without the Tag Cloud Hack?
Doctor Wiz, I'm glad you were able to change the font size. Just look for var min = 70.
awesome one! Instructions were good.
thanks a lot
Please visit my blog...
http://get-bloggertricks.blogspot.com
http://anup-views.blogspot.com
http://anupkayastha.blogspot.com
thanxx
I get the following error message:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
But I'll be darned if I can find a missing end tag anywhere in the code. Any ideas?
http://theglobalnewsportal.blogspot.com/
or
zopa108@wowway.com
Hello, I am trying to add a cloud to our new blogspot, but it will not come up. Can you help me?
http://arabmusique.blogspot.com
thanks buddy,just added that in my blog now :)keep rocking
http://violetorkut.blogspot.com
I've tried two times to add this tag cloud to my blog, but it doesn't show up when I save it. What am I doing wrong? It says 'Tags' on my blog, but the spot under it is empty.
Help!!
Thanks!
TBQ
wooooww its cool...thxs full
I thought this was a helpful link for creating categories from your blog labels - not exactly what everyone had in mind, but it's effective:
http://www.ehow.com/how_5178345_use-labels-categorize-blogger-posts.html
Post a Comment