September 14, 2006

Tweak your label tabs

Translations by other bloggers: Chinese

Here I have an improved version of Hoctro's labels as tabs hack. Quite a few people have more than 10 labels and I am sure they wouldn't want to show all their labels as tabs. I have a modified version which will allow you to show only the top 5 labels (based on frequency of their usage) as tabs. I also made two other changes to the code:
1. Show a "Home" tab that points to your main page
2. Modify the label URL such that the label page will show upto 100 results (remember my previous hack?).

If you would like to use this updated version, first install Hoctro's original hack if you haven't already. Then, goto 'Page elements' tab, click "edit" for the label-as-tabs widget and change the sorting order to "By frequency". Then, find and replace Hoctro's widget code (his step 5) with this code.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<li><a expr:href='data:blog.homepageUrl'><span>Home
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (labelnum++ &lt; 5) {
document.write("<li><a expr:href='data:label.url +

Save the changes and check it out! As always, you could tweak the limit of 5 to any other number you like. I guess you can easily find the line to change. You will, if you have been taking the journey of hacks with me ;-)

Also, check out Ricardo & Vivek's nice trick to make your links in sidebar open in a new window. This is a good idea to keep your blog open even after the reader clicks one of your links.


Anonymous said...

>> Quite a few people have more than 10 labels and I am sure they wouldn't want to show all their labels as tabs. <<

Erm... It wasn't a problem, really.
But three rows of tabs at the top was a bit of an eyesore somehow... ;)
It looks much much better now.
Thanks once again!

I've subscribed to your feed and it's also "feed read" on my site now :)

[Just a thought: Would it be possible to display label tabs at the bottom of a blog?]

Thanks again for making
my Beta Blogger life easier.


AJ said...

"Just a thought: Would it be possible to display label tabs at the bottom of a blog?"

Hmm. I like that idea about it, hackmeister?

Unknown said...

It is possible to create label tabs at the bottom too. There's already a "Add a page element" link at the bottom. Just use it.

Anonymous said...

Done! Thanks :)

I did from inside the template though...

Copied the content/code for "label2"
and pasted it where the footer thingy is.
Changed "label2" for "label3",
previewed it [just in case],
was happy with what I saw,
saved it...

And now I've got a great bottom label tabs display at the bottom of my template... Cool! :)

Thanks :)


Hoc Tro Viet said...

Hi Ramani!

Once again, JavaScript is called into play! This is a cool improvement! Thanks.


But I think you can drag and drop the label to either the sidebar, main post, or bottom footer. You don't need to copy & paster the code or anything manually, no?

I usually create an element at the sidebar and drag around at will.


Anonymous said...

Hi Hoctro...

Yes, but just creating a label element for
the footer didn't give me
the label tabs effect I wanted.

And, as I wanted to keep the label tabs
at the top too, dragging it would
not have helped me much...

So, I had to improvised. ;)


Anonymous said...

Improvise even...

While I was at it I moved
the NavBar down there too... ;)


Unknown said...

Loup, you seem to be enjoying this :)

Anonymous said...

I do :)

I like challenges...

I also tend to learn by making mistakes... and, guess what?

I've made a big one.

Nothing too serious
[I haven't lost any of my posts and widgets] fortunately
and it's nothing that can't be sorted
but it also means having to lose
my Header for a while to get everything
back as I want.
[I've tried in preview mode
and it looked ok]

To cut a long story short, I messed about
with the Navbar and while doing
that I must have deleted
a bit of code somewhere
[of course, I didn't
download the template first]

Unfortunately the little mistake got saved
with everything else
and today I found myself
unable to edit my template
anymore as I kept getting
the same message about that tag missing
[would have been nice to where though].
So, I saved the codes and
got a new template.
I managed to customise must of it
at the start but forgot the Header.
When I went back to edit,
I got the same message again. D'oh!

Anyway, with a bit of fiddling
through preview, I've managed to
erase the mistake but that means that, when I'll save the new edit, the Header will be gone.

Good things that there are some stuff
around on how to make a new Header ;)

Probably a blessing in disguise
as I wanted to try adding a pic
in the Header's section anyway.

And yes, after all that I still enjoying it.

Mind you, if it was not for you guys
I would probably have missed on all the fun ;)

Hopefully I'll have some good news about the salvaged template next time I'm around..

chemcookit said...

Hey guys,
I'm really not an expert in hacking but I love what you do. I already put the peek-a-boo feature and I'm now going to add some other hacks to my blog. So, thank you so much for this!!

But I have a question for you:
do you think it would be possible to have sublabels?
For example, I would like to have 'recipes' as a label, and then 'main courses', 'desserts', and so on as a sublabels, that I can add to my posts. So, when I see the list of labels on my sidebar, I would have, for example:


Book reviews

Main courses

Oher labels

And then the peek-a-boo option would work for both the labels and the sublabels..

What do you think?

Thanks a lot

Soumyadip said...

You have been offered the Isspecial Cutting Chai - September 2006.

Unknown said...

Thank you Soumyadip.

Unknown said...

chemcookit, for sublabels, we need to be able to identify them with some special symbol. I will think about it.

Anonymous said...

I'm starting a blog dedicated to blogger in beta free templates, designed by me with a little help from yours, hoctro and ayisha's hacks (credits properly maintained along with links to your pages, hope you don't mind and let me know if) and I added in my own blog the labels hack with a few things I discovered by myself: it's possible (as if you don't know) to change any page element into addable. You just have to find the add element part and change it, as in the posts area: b:section class='main' id='main' showaddelement='no', and change the 'no' to 'yes'. It's possible to define the number of widgets as well.
You do a great job around here, it's in my bookmarks forever.

Anonymous said...

Header's saved after all :)

I didn't have to go all the way.
I picked a new template and customised it again [which was a doodle thanks to the good old pages elements just waitng there]
up to the point where things went wrong previously... and stopped. :)

But, the Navbar stays at the top for the moment... I don't fancy more refurbishing right now ;)

Oh yes, I'll download and save my template BEFORE attempting any alterations from now on... *whistles*

chemcookit said...

Thanks :)
For now I just put some ugly parentheses.
And, you are in my 'special thanks' section :)

Manoel Foucellas said...

Thanks a lot for that superb help, Ramani. It looks sweet on my site. Keep on with good job!!

Cyber-Buff said...

can you tell me how to increase the number of tabs? "if (labelnum++ < 5)" will changing 5 work? pls reply

Unknown said...

cyber-buff, yes, you could change 5 to any number.

Cyber-Buff said...

i changed 5 to 7. And to my my disappointment I found twoi rows of tabs. :( (something loup dragon said) what to do?

Unknown said...


yes, it goes to second row if there are many tabs. but that is natural, right?

Unknown said...

I like the rows. I changed the background color of the tabs and ended up adding more than 5. I like being able to change the number any time.

I'd like to know if there is something I can add that will make the labels step down from a long row at the top, a shorter one on the second row, tand the shortest on the bottom?

Would you look at my site and tell me if it looks okay?

Unknown said...

Jane, I think its better to limit tabs to the most used labels. others are listed anyway in the sidebar.

Unknown said...

It seems to look okay in Firefox, but it looks awful in IE. Sheesh.

Unknown said...

Okay, I put it back to five. You're right Ramani, it doesn't look right with more than five across browsers.

Milind Phanse said...

I copy-pasted your code but I still have 6 tabs in my blog "The Moving Figer writes...". Any suggestions on how I can get them down to five?

Unknown said...

Milind, you have 5 label tabs and one Home tab which is the expected behaviour. But font size may have to be reduced.

Milind Phanse said...

Thanks, Ramani.I hadn't realised that the Home tab counts as separate from the other five.I'll try to find out in the HTML editor where to reduce the font size. (I'm a complete non-techie newbie, an average Joe PC user not from the computer field.)
You have a wonderful and informative blog. I have only one tongue-in-cheek complaint against people like you, Hans, Hoctro etc. who give us such great hacks and tweaks and ideas that I, for one , now spend most of my time on tweaking my blogs rather than writing in them. ;)

खोडसाळ said...

On my blog तेंडूची पाने the 'Home' tab appears shrter than the other two(cut off at the bottom).The other two appear fine. Any hint about what I could do to have them uniform? Thanks in advance.

Michal said...

Hi Ramani,

I have tried to find a way to simply limit the amount of labels shown in my sidebar to, i.e. 10 or so, as opposed to all of them!

I haven't had much luck yet, and my familiarity with code is very limited. I am hoping there might be a way to do this without having to go through the complete installation of this hack. But then again this is something quite different.

Phydeaux3 suggested maybe using the "if cond label:count > 5" tag, but I'm not sure where/how I can do that exactly.

Any suggestions would be appreciated, thanks!


Unknown said...


You have to use Javascript similar to the one showed in this post. It's difficult to post the code in comments. If you can contact me through email, I will send it to you.

BeNolSatuEm said...

hi ramani, thanks for great hack
nice work....

vin said...

Hi Ramani,
I am using your Labels hack on my blog :
Dummies Guide to Google Blogger Beta
But I would like the labels shown according to their frequency. What changes do I need to make?

Unknown said...

I think you can use the 'By frequency' option by editing that page element.

DCScrap said...

I like this hack, but was wondering something. I'd like to list the top 25 or so most used labels, but without the tabs and with the (#) of times they've been used. Is there an easy tweak that can be made to this code or is there something even easier to accomplish this?

Unknown said...


You can try using this code without the div tags and change the number 5 to 25.

Anonymous said...


Thanks for the hacks and tweaks :)
I applied on my blog and it's great. Thank you!

Ken Lai said...

Tweak your label tabs in Chinese

Unknown said...


If you are going to translate more hacks, can you please inform me once you have 3 new translations? I will add links immediately. thanks.