Tuesday, October 13, 2009

How to Add Tabs in Blogger

I think the question that I've been asked most often since starting this blog is "How did you add the menu tabs at the top?" There are many ways to do this in Blogger although it can be a little tricky. The way I did it is probably the more complicated way because I added the actual tabs instead of just text with links.

The first thing you need to do in Blogger is to create posts to act as pages. Unlike Wordpress, you can't add static pages in Blogger. Therefore, you have to create actual posts and use those as your pages. I created posts titled "Before and After", "Travel", etc. I then added my links and other content to those posts.

When you create your posts, make sure you click on "post options" in the bottom left and change the date of your post. You want the post date to be old so it won't show up as a new post and confuse people reading your blog. I dated mine back to January which is before I even started this blog.

That is the easy part. As far as actually creating the tabs, first thing is to save your template. Do this by clicking on "Layout", then "Edit Html" and finally "Download Full Template". That way if you mess anything up, you can reload your template.

Instead of trying to post all the CSS and HTML you need to change, I'm going to recommend these sites to follow. They have very good tutorials that explain step by step how to add a menu bar like mine.

For the easiest way to add simple text links as a menu bar try this blog: Real Life. She explains three different techniques to add a menu bar.

If you want to get a little more complicated, try this post  about adding a horizontal navigation bar.

Finally, if you want actual tabs like mine check out this post by The Blog Doctor. I used the tabs he provides for download to use for my tabs. I'm not sure why mine have a little gap in each tab, but I don't really worry about it.

Hopefully, one of those blogs will explain it well enough for you to add a menu like mine. It makes it much easier for people to navigate through your blog as well as it looks more professional. If you have any questions, I will try and help as best I can.


  1. Thanks soooo much for sharing this!

  2. Hi,
    your explaination are clear, thank you for taking this effort.

  3. Stumbled across your blog :-) I'm a new follower!

  4. I am now following you! Thank you for this information.

  5. thank you sooo much! this helped me a lot! if you have time come check out my blog! ^_^

  6. I want to ask...
    How come it can be like this...
    for example
    and if I click 'contact us' on the tabs...
    the link become like this...

    can you tell me how?

  7. Thanks so much for this post. I'm not a very reading instructions but these were great.

  8. Oh thank you so much - and I love the scripture you share here. I have just started my little blog - i am not happy with the look of it yet... a lot of tweaking to do! At least now I can put some tabs at the top - lol!

  9. Thanks so much!! I love your blog ... it has a very comforting feel to it!

  10. Hi Sara,

    thank you so much for your ideas in how to create a tab. I've almost completed it however, i'm still having problems with the dates. when i click the tabs, the dates appear as if the tab is just another post. i've tried removing them but to no avail. i was wondering if it's possible if you could take a look at my blog and see what's wrong? i really appreciate it. i need your advice. thank you

    p/s: this is the url of my blog http://justafni.blogspot.com/

  11. thanks so much for this post! i am going to try this on my blog! check me out! before is now...after to come!

  12. really very helpful for new blogger like like me!

  13. Nice post. I was chеcking continuοusly this
    blog and Ӏ'm impressed! Very useful information specifically the last part :) I care for such info a lot. I was seeking this particular info for a very long time. Thank you and best of luck.
    Here is my homepage ; how to stop snoring


I adore comments, thanks for visiting.


Related Posts with Thumbnails