Showing your Blogger Labels as Tabs

Dear Friend,

Below are the instructions on how to turn "Labels into Horizontal Tabs," my third hacking attempt. Many thanks for the Exploding Boy website for making it free for everyone to use



Step 0: Label your posts.

Make sure your blog has some posts with label assigned, otherwise nothing will get created.



Step 1: Downloading and unzipping the file from the Exploding Boy website

Here are the downloading and sample links:

http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/

http://exploding-boy.com/images/cssmenus/menus.html

Then, have a googlepages account and upload the pics there. Or you could upload the pictures of the tabs to a post of your blog, then you can get the url like this:



Step 2: Changing the Header to become appendable.

Modify this line:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

to become

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">



Step 3: Prepare the CSS portion of the hack.

Copy the CSS code of the tab you like, then changing the picture urls to point to the address of your uploaded pics

For example, if the picture you uploaded to your Blogger post is: <img src="http://1.bp.blogspot.com/_hO0v-S1ryQ8/SNo2UYSv_rI/AAAAAAAAAkA/L_qsJpbksCs/s400/tableft.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5249568039400111794" />

then the tab would look like this:

#tabs a {
float:left;
background:url("http://1.bp.blogspot.com/_hO0v-S1ryQ8/SNo2UYSv_rI/AAAAAAAAAkA/L_qsJpbksCs/s400/tableft.jpg") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

Step 4: Adding Label Widget

Follow the instructions from this article, especially step B.4. After you've done with inserting the code & save it, go to Page Element option and drag the newly added widget to stay under the Header area (that we fixed so that it would accomodate this new widget.)


<b:widget id='Label10' locked='false' title='' type='Label'>
  <b:includable id='main'>
    <div id='tabsF'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
      <b:loop values='data:labels' var='label'>
        <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
      </b:loop>
    </ul>
    <!-- <b:include name='quickedit'/> -->
    </div>
  </b:includable>
</b:widget>


If you use a style other than F, than make sure id='tabsF' reflects the correct tab, such as id='tabsE' for style E. Later, if you like a different design, just cut-and-paste the style's CSS code, then change this id again to reflect the change.

There you have it! Well-designed tabs from professionals (The Exploding Boy website) being integrated into the new Blogger Beta.



I would like to thank Ramani from Hackosphere for his contructive comments to make this tutorial more readable.

Have a nice day and see you next time,

Cheers,

Hoctro (9/2006)

96 comments:

Vivek Sanghi said...

Wow! This is good stuff man! I saw your test blog as well. I hope to find time asap and get back to implementing this in my blog!

Hoctro said...

Wow! you're fast! I just finish releasing this one less than an hour ago, and in fact is still making grammar changes! Thanks! I hope to write an article on my finding about the new Blogger Beta template, especially on how it works next.

Cheers!

Avatar said...

great execution hoctro. i like it.

Ramani said...

Hoctro, this is amazing!!! Infact, my brother once suggested such tabbed labels. (btw, don't call them menu tabs, just say tabs and people will understand better). I think I can help out here by hosting these images in my website so that everybody doesn't have to upload it to their Blogger account. Let me try it in my blog and if it works, I will write a post linking to yours.

Great job again! People are going to love this.

Hoctro said...

@avatar

Thank you very much, for your comments, and also for introducing me in your homepage. Nothing better than some encouraging words from one's peers. I feel good for knowing you guys and share the same interest in hacking Blogger Beta. Have a wonderful day.

@Ramani Thank you for your comments and suggestions. Yes, I remove the menu/tab confusion. Once you uploaded all the pics I will tell the readers to point to those locations. Many thanks and have a nice day.

Ramani said...

I just sent an email to your yahoo address, pls check.

phydeaux3 said...

Most excellent stuff. Great job on the concept and execution. Lots of people will love this.

Hoctro said...

Thanks, phydeaux3! I've learned that you are the author of the "Cloud" hack, too. Great job! Thanks for visiting!

Marianne said...

Just wanted to say thanks for this - I've been searching for something to use for navigation, and this is just perfect!

My blog is a mess and still in its infancy, I thought maybe my plans for layout would be too ambitious considering my meagre abilities, but this is a major help, thanks again!

Hoctro said...

Marianne,
you're welcome! I'm so glad this hack will help you out.

8"O" said...

neat and clean! already hack my blogger with it, thanks man

Raquel said...

Hey man, this one is harder. Wanna break for awhile. I will continue working this tabs maybe later. If I can't get, would you mind if I ask your help?

Hoctro said...

@Raquel: Sure! Take your time, if not then keep asking what step doesn't work, I'll explain to you.

@8'0": Thanks for stopping by. Glad it works for you.

DarkUFO said...

Hoctro, thank you very much for this. This is one of the best additions to Beta Blogger ever.

You have made my site look very professional.

My site with Tabs

Thank you again

Hoctro said...

@DarkUFO:

My oh my, I can see that! Those tabs do look good with the style you choose! Cheers!

Maxell32 said...

I have been looking for something like this for a while and it looks great on all the sites that have it up and running.

I am pretty new to css and html protocols, but I have made it to step 4 and then I get a little lost. Where in the HTML script do I post that?

Thanks for any help you can give

Hoctro said...

@maxell32:

Please see the new picture I just updated in the tutorial in step 4. You can click on it to see a larger picture. Let me know if it works!

Cheers,

Luq Luq said...

nice job Hoctro but why i can't apply the tab. The reason from blogger......We were unable to preview your template
Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor

Hoctro said...

@Luq Luq

I think you are using the template that doesn't have the variable bordercolor. On this part:
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}

change the bold part to #000

It'll work.

(I think I will need to change the code back as to not introduce the variable too. I didn't know some templates do not use this one. My bad.)

Cheers,

Luq Luq said...

Yup...it's working...you WORLD dude.. i just need to arrange the tabs..

Hoctro said...

Great! Don't forget to show off your site to all of us when you're done :-)

Raquel said...

Hello Hoctro,

I got it but I don't know how to control the label on the navigation. Please check my this test blog, there are 6 labels in navigation. How would I make that in 3 labels only? Let say the assorted, children and family only.

I need your help.

Hoctro said...

Raquel,

I was thinking about that a lot too. Hopefully I will be able to give you an answer in the near future.

j. noronha said...

Hi, best hack ever! I tried to use a back like this in the old blogger and just couldn't figure it out. With beta it went smooth.
By the way, the bordercolor thing I solved just by adding the following code in the top of the css, at the variables portion:

Variable name="bordercolor" description="bordercolor" type="color"
default="#000000" value="#000000"

It goes inside <>, I didn't use it because comments don't allow this html.

I used #OOO, but of course it can match any colour.

Once again, congratulations!

Hoctro said...

@J. noronha:

It's occurs to me too that $bordercolor is missing from the definitions of that template. I just kinda wanda make it easy for the HTML illiterates as to not having any more "weird" incomplete saving messages. But you know better, and that's great! Now your tab's borderline matches with the color scheme. Congrats and thanks for your time and your kind words!

Maxell32 said...

Hi Hoctro
I hate to be a bother but I just can't seem to get this to work. I am sure that I followed your instructions perfectly, but I think I am missing something more fundamental. This may sound silly but how do you get labels? I think they are not showing up because I simply don’t have any yet. Any advice would be awesome. Thanks a lot.

Hoctro said...

@Maxell32:

That's right! You need to have labels first. Please see the revised Step 0 I just modified in the article.

Cheers!

Maxell32 said...

Wow I feel retarded, but I figured it out! That was way too easy.

Looks fantastic! Thanks for all your help.

Hoctro said...

@Raquel:

Please see my Update at the end of the article to see how your question about limited tab shown is solved.

j. noronha said...

It's me again! I was tweakint with the labels thing and noticed that in some templates you have to add some code for them to work. As in the harbor template you have to add the following:

div id='main-wrapper'
b:section class='main' id='main' showaddelement='yes'
b:widget id='Label1' locked='false' title='Labels' type='Label'
b:includable id='main'

This particular template doesn't use the b:widget, it's a little different. I changed the code a bit to put the labels at the top of the posts area. Of course you know how to do it, but I was too excited to tell someone about what I did. :-)

By the way, I'm starting a blog with free beta blogger templates and I'd like to Know if you don't mind if I use some of your hacks in my templates (with the proper credit and link to your page, I asked the same authorization to Ramani and gonna ask to Ayitia).

Thanks in advance

Hoctro said...

Hi j. noronha

Feel free to add my code, of course with the credits like you said.

Cheers,

Anne Blythe said...

That was brilliant! I am a novice to blogging and I don't know any html but great instructions.

Thank you so much.

Luq Luq said...

Hoctro, I'm just done with label hacks..I'm using both by Ramani and you...check it out

http://luqluqq.blogspot.com

Paula M. Lawhon said...

Thank you for easy-to-follow instructions for setting up nice tabs on my blog! Great improvement to my site!
Paula Lawhon
http://sfmediation.blogspot.com

Hoctro said...

@ Anne Blythe, Luq Luq, and Paula M. Lawhon:

Thank you very much for posting your comments here, as it's great to know that people could follow my instructions, since it might get too technical sometimes.

Cheers,

Honey Cakes said...

Hoctro,

Thanks a bunch! The only problem I had, being the ignorant girl that I am, is that I had no idea how to upload the CSS myself, so I just used Mr. Ramani's code instead.

I have used your code, and Mr. Ramani's variation, on my second blog for weight loss. It looks very neat and organized now!

Hoctro said...

@Honey Cakes,

I visit you blog, and it looks really neat! I'm glad my hacks actually help people out!

Cheers,

Manoel Foucellas said...

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

Hoctro said...

@Manoel Foucellas:

Cheers for another happy blogger!!! I visited your homepage too, it looks fantastic!

Manoel Foucellas said...

Thanks, Hoctro. Can you understand spanish or does it only "look" fantastic ;-) ?

Hoctro said...

Hi Manoel Foucellas,

I wish I knew some Spanish, but I learned French in High School, and now I don't remember much of the language either. So fantastic is fantastic, or might I say , fantabulous?? (fantastic + fabulous :-)

Cheers!

Tony Parrish2008 said...

I geel a fool, but Im afraid that I can't get past
Step 2: adding a label widget to the sidebar of the Page Elements interface. I assume you all know what this means, if you are reading this "Tweaking" topic :-)
I don't know what this means

Hoctro said...

@ Tony Parish:

No, don't feel like that! At first I wanted to show for people who are really want to tweak Beta, but then I realize non-technical people are using my hacks too.

I edit the text to be more clear on how to add a label.

Let me know if you suceed in placing tabs.

danny said...

Hey Man, thanks for the tips! They are really great. However, I don't know how to change the font and the font color in the tabs.

TabF is not really what I would like to put and if I use TabK the font and font color are still the same. Hence you wont really see them because TabK is dark.

Thanks in Advance Man!

My blog is at http://jolly-penguin.blogspot.com/

Hoctro said...

Hi Danni,

Please look at the article again. I made some changes to make it more readable and easier to implement. You need to cut and paste the right CSS code, and change the id inside the new template code to reflect that.

Cheers,

Ramani said...

Hoctro, looks like you got quite a few happy customers here (as I expected). I have also announced your 2 latest hacks. Rock on!

BILL BILIG said...

Hey great stuff. I tried your hack and it worked beautifully. thanks.

Hoctro said...

Hi Bill Bilig,

Nice site and good choice of tab style you did! The rounded corner matches perfectly with your design!

Cheers,

♥angelinnocent♥ said...

Thank you hoctro! =D Just what I've been looking for! I just tried out your update on displaying the labels that I want. At first, I was totally lost when it didn't seem to work but I've got it now!

And it was a lot of fun tweaking the colours and design to suit my blog! Again, sooo grateful!

photofool said...

hoctro, your beta hack posts are very informative. i'm able to apply some of them w/o much effort. thanks for the tips. keep up the great works!

Carlos y Silvia said...

Im not a tech but i try sometimes and im new at blogging. I would like to know if you can give me a hand...i already did the step 4 but i can not go with the Step 5 due to i do not find the code you suggest to look. I can not replace the code provided in your page cause i dont know where. Eventhough you explain it. I never find that portion "http://photos1.blogger.com/blogger/1916/3748/1600/tabs8.jpg" you suggest in my blog. Maybe you can take a look at the blog, is for practicing only but it found very attractive the tabs....http://asdfasdfafd.blogspot.com

Hoctro said...

Carlos,

Please see step 5 again, I just update the tutorial to make it easier for you to follow.

Cheers,

Carlos y Silvia said...

Hoctro Thanks a lot i know feel better! I do still have a problem and is that when i click on the tab it doesnt take me to anywhere on the blog. How do i program these tabs to go to the articles?

Hoctro said...

Carlos my friend,

Create some more posts and label them differently: such as Visit Europe, Asia, etc. and you will see new tabs start to appear. Right now you only have one tab, and 1 post, so it goes nowhere but itself.

Cheers,

Carlos y Silvia said...

Hoctro i do not have words to say thank you. You have become very handy and this blog stuf is really cool. I have another question. How do i get that every new post appears ahead of the older ones? I created a post and labeled "home" but i created a second one and became in fisrt place.

Thanks!

Hoctro said...

Carlos!

I just update the code in step 5. Redo step 5. Actually you will always see what is latest if you hit the home tab now. Home tab will always present. Rename your "home" label to something else.

Cheers,

Carlos y Silvia said...

Whoa you should be hire by Microsoft or something hahahah. It really worked thanks a lot. Tell me how to ad new pages or posts without being added to the buttons. I mean if i ad 23 new posts, i will have 23 new buttons right? i just want to keep 6 buttons at the top and be able to include links to other posts just like in your blog.

Thanks

Hoctro said...

Carlos,

Label is like country. Every place you visit in France, for example, should have the same label of "France." You might have visited 60 cities, but those post reports still be in one place, "France", right? There's a "View All" in the label place, so you can click on it to add an existing place in, you don't have to retype every time.

Is this a job interview? Do I get hired? :-))))))

Have a nice day!

Hoctro said...

Carlos!

I really like your site! The tabs look so good now! Happy blogging, you're all set!!!

Cheers,

Carlos y Silvia said...

Its been possible thanks to you! I really appreciate the help and hope you wanna come back any time to this blog. I ll be constantly looking on your site for news...Note: is there any way to subscribe to your blog and receive email every time you publish something?

Thanks and Good Luck!

Hoctro said...

Carlos,

Definitely! Go to the Template->"Page Element" page, on your sidebar select "Add an Element", then select Feed, then add this line

http://hoctro.blogspot.com/feeds/posts/full

and select continue. Select "Save Settings" after that, then the links to my latest posts will always show up on your page. Then you can drag it down to wherever you want. You see, Hackosphere and Vivek Sanghi links are added this same way, so I can always check to see their latest posts without going to their blogs.

Cheers and happy blogging!

Carlos y Silvia said...

Sorry to bother you again. Do you know how do i get that the content shown in "Home" be the one i like and not the last posted?

Thanks!

Hoctro said...

Carlos,

That thing you ask violate "web usability" principals. Users expect to see the latest stuff, especially on blogs. If you want to have something similar to "Home" tab, why not label something that is more meaningful to the contents that you are going to put?

If you still want do do like you sugget, then take out the bold line that I just added that has the word Home, then you can add a post with a label "Home" and it will always be there. The problem is, since labels are sorted alphabetically, "Home" might not be your first tab any more if you put something like "Airline" label, for example. Careful in naming your labels and you will always have "Home"as your first tab.

Cheers,

Hoctro said...

I just checked your site on both browsers, and they look great on both, and certainly better than my site :)

Cheers,

Carlos y Silvia said...

Hoctro, i´d like to know how do i get the comments people do to my articles be visible for others, without need to click on the word "comments" Thanks!

Paul said...

Hoctro, the horizontal tabs are the bomb!
This really makes haste of searching for a post. Many thanks! Given some time , I will try your other hacks.

Thanks again
Paul

Muhannad said...

Hoctro, thanks for checking my site ... i realize it's working now ... i was playing around with the code for quiet some time ... until i got a small fix ... thanks again ... the new addition with the into is great too ... i'll be looking into that for another blog soon

thanks again

The Classical Craze said...

Thank you so much, Hoctro! I've been trying to find a way to have tabs ever since I started blogging a year ago! Most importantly, your instructions are always very clear which is a life-saver for "very-untechnical-people" like me. Looking forward to discovering more about blogger beta through your blog! Thanks!

Hoctro said...

Classical Craze,

Thanks! If you manage to have less tabs on your page, it would look even better!

Cheers,

Bonez said...

Awesome hack. Thanks for the simple instructions, was easy to follow even when my template required some additions to make it work.

vï†æ said...

tHis is geNiUs!!

Gareth Doutch said...

How difficult would it be to make a linked list variation of this?

Hoctro said...

Gareth, what do you mean by a linked list variation?

Gareth Doutch said...

Literally using the linked list widget instead of the labels widget.

See Beautifil Beta. Hans has a linked list at the top of his page. It would be really nifty to be able to turn them into tabs also.

How easy / hard is this likely to be?

Hoctro said...

Ka ching!!!! Now I understand your idea completely! It is very easy to implement! Thanks for the neat idea, I've never thought of it! cheers! This will be my next hack, and it'll come up pretty soon.

Hoctro.

Gareth Doutch said...

I Can't wait!

CdV said...

Hi Hoctro, thanks for these developments and such great tutorials to get them up and running. I have installed and tweaked the horizontal tabs but will have a look around to see what else I can do. Good stuff. Thanks.

Jonzie said...

Hi Hoctro,
I wanted to try this hack but I managed to go through it only last night. It doesnt seem to work on my template.
Labels show and link but the hosted images dont show with the labels. I think i followed the instruction step by step, the only difference i found was that the label widget on my template looked slightly different from the one you show in your tutorial.
Any suggestion?
Thanks in advance

Jonzie said...

Wow! i did it! sorry for the other post, i had been impatient, considering I'm a computer illiterate i'm pretty proud of myself.
I had another label widget in my sidebar and it was messing everything up coz i kept tweaking the wrong one.
Cheers, it works great, I had to get around a few graphic adjustment but it's amazing!

S.Phoenix said...

Hello Hoctro, how are you?
I'm posting here because i'm with a problem in CSS Ajax in horizon tabs...just like you in this page
http://hoctro-ajax.blogspot.com/search/label/Architecture

If you see this page with Firefox, you will see that the pharase: "Showing posts with label Architecture. Show all posts" is in the front of the menus. I would like to say too, that in Internet explorer your hoctro.blogspot.com blog is having the right side bar in the bottom. The sidebar is falling down.

Best Regards

Hoctro said...

Hi S. Phoenix,

You can read my latest post, in which I mentioned your name as the one whom discover the latest addition from Blogger team to Beta template.

As for the right column being pushed down to the bottom, I have no idea why. It works perfectly in Firefox, my preferred browser, so I will keep it that way. It is a proof that two different browsers will never be equally the same, and one has to compromise somewhat and instead focusing on sth else more challenging (instead of trying to please both worlds/browswers.)

Thank you for your cool findings. :-)

Cheers,

Barry Lutz said...

This hack is amazing. I want to thank you for making it easy for people who have no clue what's going on. I have one small problem with mine, however. My problem is that, no matter what I name my labels as, the first thing that the viewer sees upon visiting my page is every post, regardless of the label attached to it. You would then have to click on the other tabs to separate and isolate them. Is there any way I can fix this? My blog is JeebusLovesYou.blogspot.com, if you want to check it out.

And again, thanks a lot for your work!

Hoctro said...

Barry Lutz, I think you need to limit the number of posts per page like is shown from this picture

Barry Lutz said...

Wow, thank you.

You're a genius.

Tim said...

Oh my. I am LOVING the tabs! Thanks for this one!

Hoctro said...

Hi Tim, yes, the red tabs do look good and integrate well on your site, Cheers,

Hummie said...

Thank you so much! I was wanting to do this and it worked! I do have a bit of a problem with the tabs not looking right for longer labels. Can I fix it? If not, I do like what I have and could never do this on my own!

Hoctro said...

Hummie,

Looks a bit busy there, maybe the vertical tab hack is better for you?

anyway, it's cool to see them tabs show up, like a miracle, right? I'm still amazed about that hack myself everyday :) So simple to hack, yet it looks perfect when you see it in action.

Makita said...

I read through the tutorial and attempted to implement the hack on my blog but I got the following message:


We were unable to preview your template.
Please correct the error below, and submit your template again.
More than one widget was found with id: Label1. Widget IDs should be unique.

Any insight you could provide would be greatly appreciated. :)

Hoctro said...

No problem, please try to cut-n-paste the code in step 4 again.

What happened is that you have already got a label named Label1, it collapses with my label1, so I remaed it to label10.

Cheers,

Makita said...

Sweet! I got it to work (somewhat) !

However, they appear as text only AND are listed vertically not horizontally.

What step did I miss?

Hoctro said...

Makita,

In step 4, you forgot to change id='tabF' to id='tabJ'. You could either delete that widget and start cut-n-paste using step 4 again, make sure you read carefully step 4 and replace the id.

Let me know if this works or not. I'm sure it'll work. I read your source code and know that's what went wrong.

sid said...

erm.. i got ur hack rt.. but i have a small problem..
i noticed tht the tabs always strt frm the left corner and are of the size of the labels.. is there a way i can centre them and make them a little larger with the label names at the centre of the tab... thx gud work btw

Makita said...

WooHoo! I got it! Thank you!

YOU ROCK !!

Hoctro said...

@Sid, I could think of wrapping a pair of <center> tags around right after the line b:includable id='main' and b:includable lines. To make it larger, you need to go inside #tabF in step 1 and change the font style to 100% instead of 80%, maybe?

@Makita, I'm glad it works for you! Cheers!

Vinay said...

Hi hoctro,

Great stuff mate..i just love your hacks. I tried implementing it on my testing blog.

http://technanny.blogspot.com/

but i am facing an issue with the tabs..since it shows too many tab..maybe because i have too many labels.

Can i change the tabs to some specific name? or limit them to only a few?