Code for New Blogger Tag Cloud / Label Cloud
Due to overwhelming demand (ok, it was one person) I've gone ahead and wrote up the code and explanations on how to setup and use the highly desireable Label Cloud for New Blogger. Because everyone wants a tag cloud for Blogger. I think everything is correct there, but if you try to set it up and run into any problems I blame Avatar. :-)
I've set the page up off-site since I don't feel like mucking with code in the Blogger post editor at the moment. And if you have any questions feel free to ask. Pay close attention to the BACKUP YOUR TEMPLATE before proceding notice. Here's the link to the setup and instructions...
One thing I might add, the cloud is done with javascript so it will only display when javascript is enabled. But the widget includes a noscript section so that users without javascript enabled will still get a normal label listing.
I've set the page up off-site since I don't feel like mucking with code in the Blogger post editor at the moment. And if you have any questions feel free to ask. Pay close attention to the BACKUP YOUR TEMPLATE before proceding notice. Here's the link to the setup and instructions...
New Blogger Tag Cloud / Label Cloud Setup and Instructions
One thing I might add, the cloud is done with javascript so it will only display when javascript is enabled. But the widget includes a noscript section so that users without javascript enabled will still get a normal label listing.
Post a Comment
«Oldest ‹Older 1 – 200 of 556 Newer› Newest»556 comments:
Great job! i added a link to this post in my neighborhood hacks section. I will read the instructions and try it in my blog tomorrow. kinda tired now :)
- "madman"
Thank you, thank you! I can't wait to get a chance (time) to set it up.
My Mom is impressed. She said she'll try it on her beta test blog as soon as she can figure out what kind of labels to use on a silly Cat blog.
It was so more than one person whining. We beat c0demonkey Kelly to a bloody blonde stain in the street over breaking d2b with that f-upgrade. But it's all better now.
Thank you for the hack. I've implemented it on my blog, and it looks sooo much better. When I have time I'll post about his and other useful hacks I found on the net.
I got it up and running. It is what I have been wanting since starting my blog...a category cloud that leads to a page on my blog of the posts!!!! Thanks. I may work on the font size or colors a bit more, but it is lovely.
Thanks thanks, IS a great job
Glad it worked out for y'all.
And Ramani thanks for that link, I got some of the spillover from your blog o'note gig. Very kind of you. Thanks!
Thanks!
Love this hack and found it very easy to install thanks to your detailed instructions.
Great work!
PUK
Thanks,I love this feature very much:)
And I also want to know how to add search box in sidebar,please help me,thank u.
-cn.leoyang@gmail.com
so, when are you going to talk about your discovery of label feed URL ;-) seems to work for my blog too! is that a standard way of getting the feed for a category from the original feed?
@ramani
Heh, I was doing just that. :-)
Feeds for Labels in Beta Blogger
Thanks for the most excellent hack!
Hi Phydeux3. Your code seems to be great, but I couldn't have it working. Could you please point me what could I check for?
Thanks a lot!!!
@pablo
It looks like it's working, the labels are above the main column and appear to be working. Now you only have one post with two labels so it's not much of a 'cloud' yet, but it's there.:-)
If you aren't seeing it, reload/refresh the page. You may be seeing the old cached version.
Great hack! I got it to work but I can't get the colors to change. I changed the color here:
var maxColor = [208,32,144];
var minFontSize = 10;
var minColor = [23
8,130,238]; is this where I cnot right?
@slackermommy
I think you figured out the problem, because it's working now on your blog. Looks nice..and pink too!
But just in case it helps someone else, the minColor as you pasted here had an error
var minColor =
[23 8,130,238];
There is a space in the first 23 8
And I presume that was keeping the colors from changing.
Thanks for your great hack!
This is perfect. Love it! Great instructions. Worked a treat first time, no problems at all.
Thanks for the hack! c",)
hi,
this is great! i've been looking for this hack for sometime now...
only problem is that i've it working only only firefox...it doesn't want to load when i use IE...can u help? thanks!
Waz
@Waz,
Hmm. Looks like we've discovered a bug in the machine.
You've got everything setup ok.
And actually, it's not working as it should in Firefox either, just IE fails worse on the same error and doesn't display anything. Firefox displays something, but the font sizes/colors aren't correct.
While pouring over what might be causing it, finally realized what seems to be triggering the failure in your case.
You have 2 labels, each with only 1 entry. Apparently the mathematics in the script break down somewhere when there are ONLY labels with 1 entry. Try this, just make another post (even if it's just a test post that you will delete) and give it at least one of your current labels. I think that will make it work. As long as there aren't JUST labels with 1 entry it seems to work, just that particular scenario screws the math somewhere.
So try that out and lemme know if it works, I'm pretty sure it will. If so, then that was the issue and once you have a label with more than 1 entry it should continue to work.
thanks bro!!!!
i've made the rectification and hopefully it will work on IE as well..
thanks for the hacks!!!!! :)
zis label cloud really made my day as none of my friends could help me...
btw, is there a hack for emoticons add in? i've been googling it but i've come across only one entry about it and it doesn't look that great...
thanks again!!! :)
thanks bro!!! :)
very helpful n it really made my day!!! :)
keep it up!
What I thought I'd do is add the cloud to a single post and then link to it from my sidebar so the labels aren't permanently littering up my template (I've got tonnes of them you see).
It didn't work because you can't use javascript in the post editor. :(
Great hack though - it worked fine when I tested the code in my template.
@dreamkatcha
Well, actually you CAN use javascript in the post editor, there are just some steps to do it to make it work.
But the main reason the 'label cloud' won't work in a post as written is because it uses layout data tags, which absolutely will not work in a post. Things probably could be modified to get an in post listing (would require substantial restructuring), but as is will definitely not work inside a post.
Thanks alot for this post of you. From it I could do something I wanted to implement so far. Cheerz.
Many thanks! Works like a charm.
Brilliant! Thanks for your work and your excellent walk-through. Worked without a hitch.
Thank you phydeaux3! I'm having fun playing around with my template courtesy of the neighbourhood hacks and am loving my new label cloud;) I appreciate your very easy-to-follow instructions as well.
Next on my agenda: figuring out how I can get Hoctro's navigation tabs to work with my current menu tabs...
This is cool. Thanks for sharing this. I've just started using labels so this is a fun new 'trick' for me.
I love the 3 shades of green that you used. When my labels grow, will mine change colors too? Right now it's only one shade of blue, or the other. Do you have 3 colors going - or did I do something wrong?
@tracy
Well you got everything setup just fine. But right now, you have your min/max color almost as the same color...there is very little difference between your two selections.
The cloud works by selecting a different shade of color based on the number of entries, and how far/close it is to your max/min color selection...and picks a variant of that to show.
So for example, mine is really a max color of a dark green, and a min color of gold (kinda goldish anyway)...so the colors that come up are different shades in that range. So if you want more shades, pick min/max colors that have more range between them, and the cloud will use those as the start/end points. If that makes sense. :-)
You can also play around with larger font sizes for the two, as the defaults I put in are kinda small, and sometimes look a bit better when they are larger. If I was smarter I'd put up some whizbang color/fontsize picker that would make things easier to play with and get what you want...if I were smarter that is.
great job and thank you!
I really want to use this hack, it sounds great but i cant get it to work after 4 attempts! can you take a look please. Environmental Eye
@debs
Hey, it looks like you've run into the same problem as I replied to in this previous comment
Basically you have everything setup correctly, but there is a minor bug in the script where it doesn't show up properly when there are only Labels that have only 1 entry.
You've got 2 labels now, each with only 1 entry. As soon as you add another entry to one of the labels, I'm pretty sure it will start working. If necessary, make a test post labelled with with one of your already used labels to check it.
Thanks for sharing phydeaux3!
Great hack, worked like a dream on the first try. Just need to make sure I have 2 entrys to each label lol.
i cant get it to work, tried many times now and do everything as it says here:S
@marcin
Glad it was useful. On the number of entries, once you have at least one label with more than one entry you should be alright. The problem is when all the labels only have one entry...at least I think.
@Kagemonsteret
Other than the above small bug, it should work in a layout template. You have 3 blogs in your profile and if you want me to tell you what is wrong you'll have to point me at the correct one, with it in place.
Big thanks for the warning phydeaux3.
Had you not told me I would have make my blog worse.
Too bad that free template I'm using now is still classic.
Didn't know about that.
Hello!
I am sorry, but it shows no cloud here. I have tried to repeat the procedure either with Firefox, and with IExplore. Don't understand what's wrong. If I open the "page element" Label Cloud it shows all the labels. Could You please help me?
http://kepallino-and-ominodigomma.blogspot.com/
Thanx
Sergio
@kepallino
Yes, I see the problem. You have everything setup ok it looks like.
The problem is your choice for the name of one of your labels. You have one named
"primo giorno"
And the " " marks are part of the label. It's the quote marks that are killing the cloud script. If you relabel that and get rid of the " " marks for all instances of that label (There are only 2) then it should start working. You don't have to use " " marks for multiple word labels, but if you really want that you can use single tick marks like
'primo giorno'
And that will work also. The way javascript works in this instance I have to either support apostrophe ' marks or " marks in the label, and I chose the apostrophe since I figured it would be much more common.
Let me know if that fixes it, it should.
@phydeaux3: great! You were right, it works great now! and it's beginning to look like I wanted :)
Thank You very much for Your support,
Sergio.
Dear Phydeaux,
This cloud widget is a beaut. Followed your instructions on my Beta Blogspot Blog and when I saved the template I got one of those "not parsed properly" messages. I don't know what has happend.
I had to clear it all as when that message comes up Blogger wont save the template. I will come back to it and try again though when I have more time.
It is probably this user's error but just in case - here is my url:
http://skankyjane.blogspot.com/
Maybe your Cloud is not compatible with my template? (It's Ramani's Hackosphere u-ripper-tune hacked 3 col Minima Blogger clone).
Maybe I should have taken the label widget that I added as a "page element" in Blogger Beta away before I added your cloud?
(Although I don't think that is right somehow or I would never have found the id widget label1 code to start with (?)
I'll be back!
Cheers,
SJ xx
Thanks for the instructions, it works perfectly!
regards, david
@david
Glad it worked out
@Skanky Jane
Well it should be compatible with any layouts template, so that shouldn't be an issue. Usually with that type of error there is a little bit more of a message that follows (maybe not, but usually) and if you try it again and get the error see if there is anything more. That might help me see where things are going wrong.
I remember seeing your real blog before, I like your work. :-)
So if you try it again lemme know.
Really cool! Now can you package it using the new custom widget mechanism? How would that work considering you need to upload some script and styles too?
Well actually no, I can't do that Joshua. The new one-click widget stuff only works as an html/javascript widget, and this mod needs access to a label widget to function. I was hoping at first that it could be done, but other types of blog widgets aren't accessable.
It still is a cool feature, and I'm sure some of the smart guys out there will find good uses for it. But this isn't one of them.
Actually, as I was typing out the above answer saying "no", inside my head it was churning "maybe". I may know a way to do it. I'll have to go to the dungeon and work it out. We shall see. :-)
Hello phydeaux3!
Excellent hack, it was a painless installation for a newbie me...flying-porkchop:>
Firstly, thanks very much for this cool tool. I like it a lot, tis very elegant.
Secondly, I was wondering if i could request a little help with a small modification....
In an effort to be 'pretty' with the visual aspect of a blog (or whatever) i often use:
onfocus="if(this.blur)this.blur()
in my anchor tags to eliminate the 'selection box' from a button click event. I'm no wizard with js but I'm pretty sure it would not be too hard to add the above text to the script in such a way that it would write this bit of code into the anchor tag.
If someone could point me in the right direction I would surely appreciate it...
Thanks
Thanks a lot. The cloud works a treat. I've reconfigured some of the variables (mostly on text size) - but the script and the instructions were great. Check out my label cloud in operation on http://crasster.blogspot.com. I blogged on it too, so you would receive credit and referrals. Well done.
Works gr8! Thanks
Awesome hack! It's so pretty! Thanks heaps phydeaux3. The instructions are so clear and easy to follow. Works like a dream. I've blogged about it Blogger beta label cloud to say thanks and to point people in your direction...
hi again. i made it work, thanks allot for a great hack
Thanks so much for this! Your instructions were so easy that even I was able to do it!
Arigatou gozaimuchness, thank you very much for this. I've been wanting the labels as clouds for like the longest time (k, I exaggerate. It was only since August ^^).
B/c I've gone crazy with the labelling, I had to put the clouds in the footer section (I'm using the Minima template) so that the sidebar doesn't stretch into infinity ^^;
Again, thanks!
~huamulan03
PS I credited you in the "support" section of my sidebar (under the Blogger logo)
Is it possible to Integrate this with Technorati tags
Hi phydeaux3
your label cloud is so awesome I almost took my own life!
Just how can I get a "random" looking cloud, mine seems to be strangely sorted?
Oops. I found the setting. It's perfect now. You rule.
Great job, thank U!
Can you make me a cloud for blog contributors plese. Thanks!
phydeaux3,
I've copied your code religiously, but all i get is:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
And then,
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
What went wrong?
ken.vs.ryu -
I don't even know what a "cloud for blog contributors" would mean.
Dienasty-
I'm assuming you found the problem, as I see a small but working cloud on your undergroundsquared blog.
Nicely done.
Thanks a lot! it looks really great and your explanations are really clear even for a newbie like me!
Yup, took me four hours but your excellent intsructions helped. Turned out i had to replace the entire label widget with yuor code, and not just the first line.
Thanks anyway!
Well the instructions are correct and say to leave the widgets NOT expanded.
And if that is done, then you only need to replace the one line.
Is there any way to set the number of times a label is used before it shows up in the cloud? I tend to use a lot of labels, but would only like those with 5 or more instances to show up in the cloud.
Any insight here would be great. Also, thanks for one of the best laid out tutorials on how to hack the beta template code. I did it right the first time, no retries!
Wonderful walk-through. I'm not worthy! I'm not worthy!
Hello!,
Many thanks for the hack!
I was wondering how to set a condidition to show label.
For example: if there are two or more posts show label.
Andres
I
@kip & @andres,
Well you two seem to want about the same thing. I have only one thing to say, you are both "Label Happy". Quit using so many labels!!! :-)
Ok, I'm just kiddin'.
I'll look into it and see if I can work it out. I don't think it's too difficult, but I haven't dug back into the code yet. Watch this space.
Ok, I think I have the additions so you can limit the number of labels displayed by how many entries the label has.
It seems to be working as expected, but I really need to test it out a bit just to make sure it doesn't go crazy under different conditions. I'll probably run it through the grinder tomorrow, and if it passes I'll put the code up then.
Limiting the number of labels shown (by number of entries) is now a part of the setup and instructions.
If you have already installed the cloud, but want to add that feature, the steps are outlined in the post
Blogger Beta Label Cloud Update
Otherwise, if you are just starting from the beginning, just follow the normal instructions page.
Hello.
I use your Label Cloud, but I have a problem.
With Firefox its all OK but whit IE in 1 label (Espacios Personales) I have 18 posts, but IE only show 12 posts. Firefox show all 18 posts.
That I can do?
I'm so excited to use this. However, I cannot for the life of me find widget id='Label1'.
I can find 'Header1', 'Blog1', 'Profile1', and 'BlogArchive1'.
This particular blog is one I use just to play around with templates before implementing something in my actual blog.
http://mish-and-mash.blogspot.com/
Thank you for any help!!
I figured it out. Please disregard my last comment. Thanks
nothing happened?
@pere,
It appears to be working the same in IE and firefox now.
@amy,
glad it's sorted.
@cinging,
It's best if you leave the url to your blog. I'll take a look when I can.
Hi,
Thanx for the great tips!
?...can you only display the tops tags like a technorati cloud or display only the tags I choose to be in the cloud?
Alisha
swipian.blogspot.com
http://cinging.blogbus.com/files/1166118493.txt
hi,i'm frustrated.Here is the txt file of my original,i tried all the ways of clouding my label,did'nt work.i mean no label showed on the page,only the words "label cloud" showed.
i don't know what's going on, i switched to another blogger account of mine, and tested, and it worked:http://psxbx.blogspot.com/,but becaused my swipian.blogspot.com contains so many entries now,it's quite difficult to move the content to another content...
Alisha, I recently updated the code so you can set a limit (by number of entries) on which label show up. You have the code before I made those changes. Explaining how to add that to your current setup is here
Blogger Beta Label Cloud Update
Cinging,
You are going to have to work with me, a default template, or a link to a blog without it even installed doesn't help me to see where you went wrong. I'm not going to do it for you, I AM willing to take a look at what you've done to see if I can spot the error.
If you want to try that, set it up, if it doesn't work, leave it alone, THEN give me a link to it so I can see. Otherwise, if it doesn't work, then it doesn't work. I don't want to see a template, it has to be the blog with it installed.
If I can't see what you currently have, then I cannot help.
Hey phydeaux3,
I got it working!
The problem was that when I added your Label Cloud code to the widget I replaced just that one line (as per your directions) so I still had a little bit of the former Label widget code left over.
But I'm trickier now than I was when I first tried your Cloud - so this time I figured it out! I haven't styled it to suit my blog yet but I love my Cloud already - thank you very much!
(and thanks also for your kind comments about my blog)
SJ xx
I appreciated this blogger hack.
I applied this on my blog as your instruction and I translated this into Korean as "레이블 클라우드 Label Clouds in Blogger In beta" for Korean blogger using Blogger in beta.
Please let me know If you don't want to translate into Korean.
Thanks.
Excellent! Works like a charm!
you rock... thanks for putting this out there!
Great!!! Thanks.
Great cloud but...
Is it possible to set "days worth". if you prefer, visibility to "forever"?
My problem is in my tags and cloud.
When i choose a label (at the end of any subject) (for exemple: plantes de maison) it dosen't show every post in that subjet.
Wright now, i have 27 subjets for this category. When i click on the label or/and the cloud, it only show 20.
Thank's
:)
Cammu, that's the default way that blogger displays labels. 20 at a time, the OLDER posts link should take you to the previous labelled posts if there are more than 20.
Fortunately Ramani has already written up how to change that if wanted, and even gave specifics on how to do it for the 'cloud' at the end.
How to control the number of posts in label pages
Hello,
I have clicked the following link (http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html) but it doesn't work.
Any idea?
Thanks
Thank's a lot.
:)
Hi phydeaux3,
The Label cloud idea is simply superb.. But unfortunately its not working on my blog :(
I am using Unicode Tamil fonts and when I use this clouding code, the name of the label gets distorted and the label data in the cloud does not get the right data also :(
My blog url is http://poonspakkangkal.blogspot.com
Do you have a working version for unicode text? or help me in making this work?
Happy New Year 2007 :)
பொன்ஸ் ,
Well that's not good. I had seen this work in a variety of languages, like Chinese, Japanese and Korean, so I figuered there weren't any encoding issues that would be encountered. But apparently not. :-)
So I took a look to try and figure out why it's not working for your language (quite a lovely one it is). It seems the culprit is for some reason Blogger converts some (only some, not most) of the characters in Tamil to their html entities. Everywhere you see something like #3009 is a character that Blogger does it on, which kills the encoding the way the javascript is working. After doing some searching, and pulling out more than a few hairs, I think I stumbled upon a fix that will work for your language. Try this out and let me know if it works.
For the last step, replace what you have from here -(step 3 of the tag cloud)
And instead use this in it's place -
Tamil_encoding_fix
Everything else remains the same, only the last step is what needs to be changed. I THINK this will work. I've tested it in IE,Opera, and Firefox and it seems to work as expected then. Safari I'm not sure on.
I'm still not sure why Blogger doesn't convert to html entities for other languages, and only seems to on certain characters in yours, but in any event, try this out and see if it works.
And a Happy 2007 to you as well!! :-)
Thanks phydeaux3, It works great now.. Thanks a lot for such a quick response..
Thanks for the code! It looks great on my site :)
So how do post if you use your own URL?
And, what if I don't have the widgets in my template. I just rolledover to Beta, but I didn't change my template.
Thank you very much for the code!!! I had been looking for something like it for a while now :)
excellent job buddy. I was looking for this for a long time. I have used it on my blog, thanx
@deb
So how do post if you use your own URL?
You don't. Unfortunately. This will only work in a new Layouts compatible template. And those aren't yet available for blogs publishing via FTP.
Hi, I really like this hack and had no trouble installing it.
My doubt is why doesn't it show randomly in my blog.
The labels apear from the most comon to the less.
I really like that random look...
Can you help me?????
My page is:
http://sofotec.blogspot.com/
Thanks...
@Chaplan
To change the order of the labels, go to your page elements page, edit the label widget, and change the sort from frequency to alphabetical.
This is great! One issue - in IE, the edge of the label cloud is cut off so that I only see part of the label. This is probably a layout issue but was wondering if you could help me! (http://tilttoronto.blogspot.com)
Help! Ive tried this a million times and I keep getting:
" Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag ""
Theres something going wrong with the widget code for it <_<
Please help! ^_^
This code is absolutely excellent and very easy to implement even for a neophyte like me!
Congratulations
@TILT
Is the problem in IE6 or 7? I only have 7, and don't see the labels getting cut off at the moment. Although there is a slight indention difference between it and Firefox. Fx and IE handle a lot of css differently, especially I've found with certain ul styles. Maybe the text-indent is being applied in IE??? I may try to look into it deeper when I get the chance.
@didier, and all who have used it
Glad it's working out for you
@haha uk
That particular error leads me to believe you may have missed a step and/or are copying only a part of the code, or are pasting it slightly wrong. Follow the steps exactly (Pay attention to the leave the widgets NOT expanded at the beginning) and make sure you are copying the complete code, and pasting it in the correct spot.
@tilt
If you are still having the issue, try adding this to the Label Cloud Styles
#labelCloud li{text-indent:0px;}
In my quick test, it made the indention about the same in Firefox and IE7. I think justifying the text may have something to do with how IE is treating that block, although I'm not positive on that.
The additional line worked perfectly. Thanks for helping out!
Wow! Thanks for sharing the hard work! This works so well especially with your instructions. You should re-write the manuals for Vista in your spare time.
When did Avatar make his blog private? Bummer.
Thank you so much, this hack is what i need. I know about betablogspot cloud label couple weeks ago when visited one of blog.
Now i have it installed on my blog.
I feel kinda stupid for saying this since the cloud thing worked out for everyone. But I tried it and it didn't exactly work. I'm obviously doing something wrong. =[
Thanks for the easy to follow guide and I love how the cloud looks.The only problem is that when I click the link in the cloud I get "Page not found". There seems to be an extra "/" in the link and I've no idea how to fix it.I was hoping you could have a look and tell me where I've gone wrong.
http://jam-butties.blogspot.com/
Amazing. Yours was the only example of a tag/label cloud that I could find that made any sense. Took me less than five minutes fiddling and no false starts to get it working. No w I just need some more labels!
@The.Digital.Life
If you try it out and it doesn't work, I would have to see it 'not working' to have a guess at where the problem is.
@anonymous
Your only issue is in the script section where you input your blog's url, you have the trailing slash there. In other words, you have it written as http://jam-butties.blogspot.com/ when it should be just
http://jam-butties.blogspot.com
Just correct that and it should work.
@fences and windows
Glad it worked out.
Jam butties is sorted out. Thanks for responding so quickly and explaining the problem so clearly. I'll link to you next chance I get.
phydeaux3, to begin with, I'm not very good at codes anyways. I would show you how it's not working but i cant even preview or publish it. Here is the error message that comes up when I try to do either one of these tasks:
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 entity name must immediately follow the '&' in the entity reference.