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 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.
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
144 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
Best trick , you're the best.. Excellent trick tipz.
I had the same issue as Joseph M. Any ideas? Thank you!
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 "".
thanks
I'll try in my blog http://www.outofdream.com/
its ultimate......... bro..its great
Thanks a lot Buddy!
It worked.... Have a look at
http://taravani.blogspot.com/
_Sriki
Thank you but i am did not find this code
Is there a solution
thanks alot... mine is working :) have a check on my blog sometime :)
www.kapalmukz.com
i tried it on my blog techweez.blogspot but it wont work, it already has a label in use
I can't see the cloud .. only it said Tag.. any suggestion?
my blog: http://axesdesigns.blogspot.com
Thanks maybe you can helpme?
Hey, i'm a new blogger.
Thanks for your information, it works for me....
http://oramaido.blogspot.com
doesnt work for me
you have a really nice blog, it's very professional, can you please make a tutorial post on how you made those cool links you have in your sidebar,i'm talking about this links in your sidebar (BLOGGER WIDGETS, CATEGORIES, RECENT POST, GREAT SITES.) what are those? because i really want to put some of those in my blog also.
Thanks
I would like to say thanks for letting me post here,your topic about Blogger Tag Cloud Widget by Categories and Labels is very interesting I want to find out more about it
How to add this save and share in my blog.
http://blogginggallery.blogspot.com/
sir in blog it doesn't works ...code error.plz help me..im recently started blogging.
http://neweducationblog.blogspot.com
Thanks man.. it works nice. but i am looking for something animated...
Nice blog.
This code very useful to me.
Thanks!
http://taettag.pressesite.dk/forside/tag/
This information is very interesting, I really enjoyed, I would like get more information about this, because is very beautiful, thanks for sharing! costa rica investment opportunities
This is easy quick note to users; if you already have a "labels" widget to added to your blog simply click on "Design" and find you labels then click edit it gives you an option to add cloud v.s the whack list .
Simple
Hello .. firstly I would like to send greetings to all readers. After this, I recognize the content so interesting about this article. For me personally I liked all the information. I would like to know of cases like this more often. In my personal experience I might mention a book called Generic Viagra in this book that I mentioned have very interesting topics, and also you have much to do with the main theme of this article.
thank you
All tricks & tips are useful for blog. But it is also necessary beautiful template for you blog, which you can only download from "bloggerpress.blogspot.com"
HELOOOOOOOOOOOOOO!
**********************************************************
Dear visitors as all blogger tools and tricks are useful for my & your blog. It is necessary a good blogger templates for your blog which you can Download from
"http://bloggerpress.blogspot.com/"
Thanksssssssssssssssssssssssssssss
************************************************************
Thanks Helped Me a Lot
nice work
kewl.. thumbs up
its fantastic post about this.thank you very much.
thank u very much for this comment.
Brilliant stuff.. thanks
Nice blog.I Like It
This code very useful to me.
Thanks.
www.sweetjaveria.wordpress.com
www.sweetjaveria.blogspot.com
www.funworld4u.wordpress.pk
www.showtime.wordpress.pk
www.swwepk.com
+923332161732
www.tariqraheel.blog.com
www.tariqraheel.blogspot.com
www.mtariqraheel.blogspot.com
thanks for the post!! it worked!
how do i remove "powered by blogger widgets" from the bottom of my cloud?
Thank you for your share.it worked!
thank you very much for your share.
thank you very much for your share...
2.cool share for widget thx a lot
Thank you for your share.it worked!
Thank you for your share.it worked!
...
Nice blog.I Like It
Harvest Turkey Thank you very much
GOOD INFORMATION///THIS IS A VERY GOOD SITE! Look my site:http://bani-pe-net-cum-sa-faci-bani.blogspot.com/
great post thank u
good post.thank you very much
Great! this tags widget is simple & perfectly matches with my simple-looking blog. To make it work, I added '10+' before "min + Math.floor((counts[x]/most) * range);" as per Doctor Wiz said. Thank-you very-much Mr.John & also Mr.Doctor Wiz.
http://smart-indians.blogspot.com
thanks!
I think adding this code Labels Could be very nice.
.cloud-label-widget-content{margin:5px 0 15px;text-shadow:1px 1px 1px #DDD;font-size:14px}
.cloud-label-widget-content a,.cloud-label-widget-content a:visited{border-bottom:3px dotted #999;margin:2px}
.cloud-label-widget-content a:hover,.cloud-label-widget-content a:active{background:#999}
.label-size{line-height:1.6em}
.label-size-1,.label-size-2{opacity:1.0}
Wow! That's a cool code, am sure its a cool cloud. Thanks...
thanks .. nice post..
nice post
yipe...it worked
it doesnt work..huhu:-)
If you want to make money online, please visit my blog to find the best ways to do it.
http://www.ptcbuxtips.blogspot.com
I'm giving away important tips about these process.
For free.
Godd luck to you all!
ok
Incredibly beneficial article. I’ve discovered your web site by Google and I am genuinely happy about the information you present with your posts. Anyway keep in the great hard work!
Thanks for sharing this post with us. It's really an amazing post. Keep posting the good work in future too.
MERCHANT CASH ADVANCE
video5star.blogspot.com
videosforfb.blogspot.com
Informative post ! This is looking to be useful widget. I tried your given code. It is working well. And finally I got cloud widget for my blog. Well written article ! Thanks a ton !!
thank you sooo much! this was very useful!
it's a great and fantastic...so useful
http://romifplus.blogspot.com/
works perfectly, thanks a lot
Online Slot Machine_ http://funncollection.blogspot.com/2011/09/online-slot-machine.html
<<<<>>>>
<<<<>>>>
<<<<>>>>
ThanK yOuO
can yoOo VisiTe my BLoG
<<<<>>>>
<<<<>>>>
thanks for sharing this nice blog.
www.elogbd.blogspot.com
i hope this one work...
http://sitepress.blogspot.com
did it worked for your blogger account too!!..John but I cannot the tags in my HTML editor
where is the tag??
there is not tags like this!!
..can you tell why?? my blog..
www.listenmyopinion.blogspot.com
Thanks for sharing this nice lesson. it also needed for me. Thanks a lot... dude.....
wow tnk for info about witget
tnk a lot
Great that worked well, thanks.
Jane
http://machinemarketing1.blogspot.com
how we can limit the tags ... like i only want to show tags those have more than 5 tags.
Not Working For Me...
Thanks a lot for your article which is very simple to implement. I have successfully implemented Tag Cloud in my blog in very first attempt.
I love your site!
GTU GURU
It worked! I had to switch back to the OLD blogger dashboard style however. No biggie. I could switch back afterwards. Would be nice to update this post for the new blogger look tho.
Thank you so so soooooo much!
http://punjabhackerz.blogspot.com/
this will make our blog weight?
i couldnt get it right.... dont know whats wrong with it...:( i'm using blogger Template: The Professional Template, Design by: Ourblogtemplates.com.
help me bro:(
http://ebookzdownloadz.blogspot.com/
Thank's.....it worked for me:):)
technogist.blogspot.com
Doesn't seem to work on my blog 'www.iDevizes.com'. There ain't no cloud :( the Tags are still there... what did i do wrong? plz help
coool!
and thank you very much!
Thats great..:)
http://technogist.blogspot.com
can i know,how i can make tag cloud for my blogskin?is it the link just same?
How to make tag cloud to Blogger blog step by step: http://www.youtube.com/watch?v=lt5aMYsSl9k
I made that tutorial because I think many of those people in this comment thread who had problems doesn't even know the basics how to add labels (=words and/or sentences) to Labels gadget.
wow nice blog these tips are used on my blog http://facebookkiduniya.blogspot.com ...thnks
Excellent. I was looking for this in Blogger.. It's working. Added in my Website.
Very nice info ,, thank you
Awsome! Thanks so much
grt wrk ..
thanks...it work
Free Graphics and Banner Design For Your Blog
Nice share ang good info,tanks
I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity is so fantastic and working style so speedy. I think it may be help all of you. Thanks a lot for enjoying this beautiful blog with me. I appreciate it very much! Looking forward to another great blog. Good luck to the author! All the best!
it worked! thanks!
Thanks for share
I love it and the instructions were easy to follow, thanks! I hated the labels listed down the side of my blog but this cloud is too cute!
msqueenfashionista.com
You need to first correct it because it's full of errors!
First you need to correct it because it's full of errors!
nice i loved it
visit site and learn hacking live tv live chat , flash games books and other education blog
http://minuteeng.blogspot.com/
TNX TNX ............. I LIKE IT
Does not work on mine either.. Even the standard Label recommended by blogspot.com doesn't seem to appear on my blog.
Thx for very useful info
Beyaz Butik Ankara
It is quite useful for all people I think, not only for me. It is really great that you have shared this information with us. Thanks a lot one more time and I will be waiting for other great information from you in the nearest future.
Regards,
Beautiful Blogger Widgets
Well done
Link
Your method of explaining the whole thing in this article is genuinely good, every one
be capable of easily know it, Thanks a lot.
Feel free to surf my site ... piano lessons
Its like you read my mind! You seem to know a lot about this, like
you wrote the book in it or something. I think that you can do with a few pics to
drive the message home a little bit, but other than that, this is fantastic blog.
An excellent read. I'll definitely be back.
Also visit my weblog ... www.bequineapproved.co.uk
nice tutor...
great article..
Hey! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really enjoy reading through your articles.
Can you suggest any other blogs/websites/forums that cover the same subjects?
Appreciate it!
My web site - play slots online for real cash
wow nice blog these tips are used on my blog http://facebookkiduniya.blogspot.com ...thnkscheap Hockey Jerseys
I know this web page presents quality based content
and extra information, is there any other website which
gives these data in quality?
Feel free to visit my website - play online for real money
You could definitely see your skills within the article you write.
The world hopes for more passionate writers like you who
aren't afraid to say how they believe. Always go after your heart.
My web blog forex online
Really when someone doesn't understand then its up to other people that they will assist, so here it happens.
My weblog ... ways to make money online
Magnificent goods from you, man. I have understand your stuff previous
to and you are just extremely wonderful. I actually like what you've acquired here, really like what you are stating and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can't wait to read far more
from you. This is really a great site.
Review my page : easy money making
That is a great tip especially to those fresh to the blogosphere.
Simple but very accurate information… Many thanks for sharing this one.
A must read article!
Feel free to visit my web-site ways to make money online legit
Post a Comment