D'ya like my new label cloud in the sidebar? Pretty, pretty! I love it!
Having labels in Blogger beta appealed to me, because I blog on a whole range of subjects. I thought it might be useful for my visitors to be able to select the subject they were most interested in, and read all the posts on that subject, instead of having to wade through my entire blog to find them.
The default beta style for the Labels widget is as a list, laid out like an ordinary BlogRoll or Links list. Nice, but a bit boring and it takes up a whole lot of vertical space if you have a bunch of labels like I do.
I quite like Technorati's Tag Cloud which shows their top tags, with the most popular tags displaying larger than the less popular ones. As you can see, my label cloud not only shows size variation, it also does colour too. How cool is that? And it takes up a whole lot less space than the default label list.
When I say my label cloud, I don't mean I invented it. Goodness me no. But here's how it's done:
I was checking out Hackosphere where I found the expandable post summaries javascript hack, and saw a link to phydeaux3's blog, with this most excellent entry: Code for Beta Blogger Label Cloud.
It's very clearly and beautifully explained, so all you need is to pay phydeaux3 a visit and follow the instructions. You can change the font family, colours and font sizes once you've entered the basic code in the right places.
It's made up of 3 parts - a section for the stylesheet, a configurations section, and then the actual widget itself. You put each bit in its proper place in your template, alter the colours, font sizes and font families to suit the style of your blog, and that's it! Easy peasy. Like the expandable posts hack it's controlled by javascript, so it won't work for people with javascript turned off. For those users, the layout reverts back to the default list-style layout.
Awesome! Go get it!
Technorati tags: Blogger beta, hacks, widget, label cloud, tag cloud, phydeaux3, web development.
Monday, November 20, 2006
Blogger beta label cloud
Subscribe to:
Post Comments (Atom)
23 comments:
Thank you. This is exactly what I was looking for. Have a Happy New Year!
Yaay! Glad to be of help, Douglas. Have a Happy new Year too.
:)
I loved web weavers world so much so that I had to copy your template, and follow your advice/links and get my very own label cloud. I'm not quite sure how labels or tags work inside of blogs, besides making you go a little crazy trying to remember the previous tags you've set up! I am "new" to the whole blogging thing, but find it absolutely fascinating! Anyway - the label cloud looked really cool! Phydeaux3 explained everything so well that even a moron (i.e me) could follow it, and make it work, first time around! Thanks to both of you so much!!
I've bookmarked both sites, so I will definitely be poking around again soon!
http://hipmommiesdc.blogspot.com
Hi mz blogger!
Love your site - it's got great content as well as looking good! I'm so glad the label cloud worked for you - it's pretty, eh?
Here's a quick hint - if you can't remember all the labels you've already set up, click "Show all" in the bottom right-hand corner of your editing window. Then you can pick the labels you want to use for that particular post.
Enjoy - and welcome to the blogosphere!
I've try it and success!! Thankyou very much :)
You're welcome, edwards - I'm glad it worked for you :)
Thank you very much, the tag cloud is perfect!
Hi techsfera!
Yaay - I'm pleased it worked for you - it looks great on your blog, BTW.
I just wondered which are the rgb maximum and minimum colors that you have used. They would match perfectly to my colors blog.
Thanks in davance.
Hi Alegria!
The colours you need are:
var maxColor = [153,204,51];
var minColor = [0,0,0];
Hope that helps!
Thanks again ;)
I'll try your settings and my settings and choose ;)
Thank you for your tips. I installed the one from phydeaux3's blog, and this works without any problem on my blog.
Hey thanks!! It worked like a charm! I just met some great blokes from NZ!
Hey webweaver!
I can't make it work?!? I don't have any /b:skin tags in my HTML...what am I doing wrong? :-(
Have been looking for a way to integrate a tag-cloud for a while, and this looks like just the ticket - except I can't get it to work (and I don't normally considder myself an IT-moron...may have to reevaluate...*grins*).
Hi Johan!
Did you tick the "Expand Widget Templates" on your Blogger Edit Template page? There's toms of code in your template that you can't see unless you tick the box...
That's great about the tag cloud - I'd seen their page, but thought it looked too complicated at first glance. After checking out your site, I decided it was worth the extra few steps to add one to mine. Thanks for providing such a nice example!
Hi Spotlight-On WM!
Glad you like it! Yeah I definitely think it's worth the effort adding a tag cloud. I think they're great. Have fun with yours!
Fabulous! Thought I'd let you know we'll be using this on a new collaborative blog at
http://secretlivesofsuburbanwives.blogspot.com/
Oh wow Claire - if that blog doesn't make you all rich and famous I don't know what will. I know that's not why y'all are writing it - but still.
You had me hooked by the end of the first sentence I read.
Good luck to you all - I might just read it once in a while - as a single person who gets lonely sometimes it's kinda nice to read how the other side isn't always so green either.
I'm really pleased the label cloud was of use to you!
:)
I just might get me one of those right now. Let's see if it works... =)
Nice job, John!
It looks great!
:)
very useful.. thanks
Cant get it to work quite right!?!?
It just becomes a list instead of a cloud, any ideas??
cheers
Post a Comment