Pages

How to Make Category Tabs in Blogger

blogger tab menuNOTE (March 2014): Blogger has moved the function to set the category URL from the Pages section below to the Pages Gadget. You don't add category links in the Page but add them in the Gadget - this will be updated soon. It was a great addition to Blogger when they added the tab menus as a feature. However, many times I've heard people asking how they can alter their menu tabs to be Blogger categories instead of Pages. Good news is that this is a very simple thing to do and only requires a few steps.

What you may not have realized is that in the Blogger Pages menu item is the ability to link to a URL instead of a Blogger Page and that Blogger categories (or labels) are just that - blogger URLs.

Getting the Category URLs

First thing you want to do is to make sure each of your posts have labels defined. If you want your posts to be seen in only one category then you can only give each post a single label. Next stepis to find the URL of one of your Blogger categories by clicking on the category directly like this:

blogger category labels
In my Wordpress test template blog you can see I have 2 labels or categories defined. Once you click on it go up to your browser's URL to see what the category link is. Interesting result -- they're just searches:

search url for blogger categories

You can sese that the label URL is just (yourblog)/search/label/(labelname). Make a copy of your label URL and save it off to the side for a moment.

Setting the Tabs to Point to a URL

Now, go to the Blogger main menu and select the 'Pages' item and 'New Page':

editing pages in blogger
What you'll see at this point is a drop down selection of if you want a new Blank page or to enter a Web address.  Select the 'Web address' like so:

What you'll want to do now is to enter your Lable/Category in the first text box and the URL you just saved in the 'Web address (URL)' box like this:

setting the web address to a search page

Press 'Save' to add this category page to your list of Pages. If you read some of my earlier tutorials you saw that in order for tab menus to appear on you blog, you first have to set the 'Show pages as' to 'Top tabs':


in order for them to show up on your blog. Be sure the 'Pages' widget is added as well in the Layout manu of your blog in the right spot - this is where the Tabs will show (ignore the 'Edit' button here - just make sure the Pages widget is there):


Once you save your template you should see your new tab at the top of your blog:

Blogger tab menu
If you click on this what happens is you're directed to the URL you entered in the Pages section. One thing you may notice right away, however, is this not so nice search result image at the top of your blog:


Removing the Search Label

If you don't like that appearing you can remove it by editing your template directly. Just go into the template editor and choose 'Edit HTML':

If you hadn't noticed there was a change in the html editor for Blogger. Key things to note are the expand triangle on the side, the new 'Jump to widget' dropdown, and the selections within:

new Blogger template editor

The search result image that we want to remove is located just above the Blog section of your template. In my case it is called 'Blog1' which is the default. However, yours may have a different name if you named your Blog widget different.  Just select that from the drop down and expand the triangles next to the lines that have widget: id='Blog1' and widget: id='main' like this:


What you're looking for is the ling that says b:include data='top' name='status-message'. That is the status image we want to disable. Just add the html comment characters (<!-- and -->) to both end like I've circled above to disable that message.  Save your template.

That's it! You now have a menu tuned to your categories rather than pages. This will be especially useful if you have a news site. You can look at my tab example called 'Backgrounds' on my Wordpress test template blog here:



Good luck!




113 comments:

  1. I was just wondering if I could do this with blogger, thanks so much for the great tutorial!!

    ReplyDelete
    Replies
    1. Hi Architect97!

      Glad it helped you out! Enjoy!

      - Don

      Delete
  2. awesome! thanks a lot.

    and what about sub-categories, for example if i have a mix of images how can i sub-categorise them ?

    ReplyDelete
    Replies
    1. Hi Lucy,

      Unfortunately you'll need to use a Javascript menu that you manually install into Blogger. Right now only first level tabs are supported.

      - Don

      Delete
  3. Hi Don, your tip is very great so plz tell me my blog not showing in instant Google search. so plz tell me what can i do. thank you.

    ReplyDelete
    Replies
    1. Hi Ausaif,

      I'm not quite sure what you mean. You hoping that your blog will show up in Google? Is that what you're asking?

      In order for you blog to show up in Google search results you need to continually build content on the topic of your blog. Depending on how much and how often it can take weeks - sometimes months.

      Let me know if that was your question.

      - Don

      Delete
  4. Replies
    1. Hi Gacheri,

      Did you read my post? That's how you do it. (Is that what you're asking?)

      - Don

      Delete
    2. re.read it slowly this time. it worked

      Delete
  5. Thank you for this tip! It really works :)

    ReplyDelete
  6. this post really helped me....nice post

    ReplyDelete
  7. Thank you. I got mine to work! I wanted a review tab and couldn't figure out how to get it done. Thank you very much! :)

    ReplyDelete
  8. thanks for your sharing knowledge!!!!!

    ReplyDelete
  9. Thankyou so much!! It was great help ^_^

    ReplyDelete
  10. I was trying to do it for so long. And it is so simple! Thank you very much for sharing this tutorial. Best Regards

    ReplyDelete
  11. Thanks for sharing working on creating a blog for our district tech integration and wanted to added categories for the various major categories.

    ReplyDelete
  12. Amazing! thank you so much for this! Do you have any idea how to make it so not EVERYTHING from each tab category shows up altogether on my blog's home page, though? I would be very grateful!

    ReplyDelete
    Replies
    1. Hi Christina,

      Sorry about the delayed response. You can only split by category in my example. So, if you need to hide a post from a category just go back into your post editor and change the keywords to something other than your category tabs such as 'Other' or 'Hidden'

      Hope that helps!

      - Don

      Delete
  13. Thanks for sharing i have been looking for this a while. Keep it up and best of luck !

    ReplyDelete
  14. Just what I was looking for! Thanks a lot, very helpful and easy to understand. ^_^

    ReplyDelete
  15. Thank you so much for this tutorial! you have no idea how much you have helped me!!!! SALAMAT PO!!!!

    ReplyDelete
  16. Hi! I am in a desperat search of how I can make a blogger page show several blogposts, and not just one. I think I did it right, but my Page-buttons dont work:s
    I have tagged most of my posts, and made pages whit maching names. But nothing is showing up in the the page when I press is....???

    ReplyDelete
  17. It's really great DON..! Don i want to add the categories on my blog and want to give the link them of each blog then how it will be possible for me.....????

    Thanks again...!!!

    ReplyDelete
    Replies
    1. Hi Pankaj,

      I'm sorry but I didn't understand your question. Can you ask again?

      - Don

      Delete
  18. My posts don't show up by category. They show up by Month. Do you know how else can I find the URL for the searches to link the page? Thanks!

    ReplyDelete
    Replies
    1. Hi Jessica,

      Just go into your Layout in the Blogger editor. Add the 'Labels' widget to your blog only temporarily until you are able to copy all of the label links you need to a notepad or editor. Once done, just delete the widget. You'll then have the category links.

      Hope that helps!!

      - Don

      Delete
  19. Great post, thanks. I'm just wondering if it is possible to turn a tab into a list of categories. For example, make a tab called "categories" that will expand into a list of all of my category pages links. Because, with the amount of categories I have, a lot of them won't have space on the tabs menu.

    ReplyDelete
    Replies
    1. Hi Julia,

      It is possible but not using the Blogger tools as they work today. You have to use a custom Javascript menu which I haven't provided as a tutorial yet. Sorry!

      - Don

      Delete
  20. Thank you so much! This is a huge help to me!

    ReplyDelete
  21. Thank you so much! You made it so simple!

    ReplyDelete
  22. Hi Anuj,

    Just add the keywords to your post on the right side of the Blogger Post editor. The keyword needs to be the same as the category (the first time you use a keyword it creates the category for you)

    - Don

    ReplyDelete
  23. Hi Don,

    It was a great help. Though I've added tabs on my blog, i still find some problem.
    there are two tabs in my page. Home and Modeling either i click any of them it displays the same content. Can u please tell me how to make the content display according to the tab.

    ReplyDelete
    Replies
    1. Hi Bishal!!

      I took a look at your blog and found the problem. Your URL for the category is just off a bit. Instead of <>/search/labels/Modeling the word 'labels' should just be 'label' like this - <>/search/label/Modeling

      That will fix it as long as you have the keyword label in each post for Home or for Modeling.

      Hope that helps!!

      - Don

      Delete
  24. Can Anyone Create This For Me Please?

    ReplyDelete
  25. Its Great Man. Now I Can Have A Small Business Its All Thanks To You :D
    Still Making It More Perfect After That Its Business Time :3
    I Had To Read This Post 5 Times To Understand Something In Middle Properly
    Anyway Thank You Very Much

    ReplyDelete
  26. hey thanks a lot 4 this awesome tutorials. i've done with my complete editing just now. keep up ur perfomance!

    ReplyDelete
  27. Loved it (y) Tried it on my blog and it looks wonderful now :D
    Check it out -> www.ommeramer.blogspot.com

    Thanks (^_^)

    ReplyDelete
    Replies
    1. Hi Syed!

      Looks great! Glad it helped you out!

      - Don

      Delete
  28. hy Don,
    Thnak you so much.... done.

    but i have a question... how can i post my category Page?

    ReplyDelete
    Replies
    1. Hi Ali,

      I guess I don't understand your question - can you add more info?

      Don

      Delete
  29. Thank you sooo much ! I searched a lot for this thing and finally I found your informative instructions. Now my blog has categories like I wanted thanks to you; http://musicaltalks.blogspot.com/

    ReplyDelete
  30. Don great, thank you so much! I do have a question -- my problem is that I need to add more tabs and when I create them ( like you told us ) they go straight under my profile photo :( . can I do something?
    here is my blog: www.littlebeautybag.com
    Thank you!

    ReplyDelete
    Replies
    1. Hi Elise,

      Nice blog!! I see what you mean -there are two options. One is to reduce the width of your posts section - the tabs should wrap around (not the best looking design, however). Otherwise, you need to move the profile picture down under the tabs.

      What about reducing the font size of the tabs or using a tab font that is very narrow?

      Let me know!

      Don

      Delete
    2. Just another comment - I love how you added the Pinterest button right on the photos - very nice touch!!

      Be careful of the size and total number of images on a page - your main blog page is really, really big - lots of data. Gave my browser a warning. You can compress the JPEGs more and lower the number of posts on the main page as options as well.

      Nicely done!

      Don

      Delete
  31. Hello there, thanks for this helpful post and btw how can i place the pages titles in the middle?

    ReplyDelete
    Replies
    1. Hi Tarek,

      I wasn't sure I understood - you want to put the tabs in the middle of the blog rather than starting on the left side? If so, you'll have to go deep into the template and alter the .tabs CSS code to center them.

      - Don

      Delete
  32. Thank you so much! Very easy to understand, now I can carry on blogging.

    ReplyDelete
  33. Great, it worked just fine! Things seem much more organized on my blog now, thank you :)
    On question: you know if it`s possible to display a list of links to posts instead of the list of posts, when clicking a category? I really think it`d be easier to get a full view of the category`s content this way, but I can`t find anything on google.
    thanks again!

    ReplyDelete
    Replies
    1. Hi Renata,

      Unfortunately, that is a bit more difficult. You can only create categories to posts, or, links to pages. Now, you could just create your own categories tabs to post to pages with links, but, you would have to add the links manually to each page after posting - kind of a pain but doable.

      Don

      Delete
  34. Hi! i did the same for my label to become page, and it shows on my blog, but when i click on the particular page which i just did ,it directs to google and says page not not found, u can check on my blog.http://alluringlifestyles.blogspot.com/ My womens day page is not opening.

    ReplyDelete
    Replies
    1. Hi Shannon,

      I tried it and it seems to work just fine - did you get it fixed today?

      - Don

      Delete
  35. This was an amazing tutorial! Very easy to follow and I have now made the changes I want to my blog. Thank you very much!

    ReplyDelete
  36. Very helpful and easy tutorial! However, when I try to create a new page in Blogger, there is no drop down menu to choose the web address option nor is there a place to adjust the top tabs. Is there a way to fix this? Thanks!

    ReplyDelete
    Replies
    1. The drop down has moved to the Gadget instead of the Page!! Thanks for calling this out - I'll change the instructions!

      - Don

      Delete
  37. It doesn't give me the option to choose web page from the "new page". Is there another way to do this?

    ReplyDelete
    Replies
    1. Hi BB,

      Not sure I understand - you're not seeing the drop down for new page?

      - Don

      Delete
    2. Hello, Don! I have the same problem. I can see only "new page" and the only option is to create a common page. There's no way I can make a web adress page. I tried putting the link of the label directly into the menu but it didn't work either...

      Delete
  38. I am not able to find a drop down menu saying web addresses,new page in my blooger plz help me!!!!!!

    ReplyDelete
    Replies
    1. The drop down has moved to the Gadget instead of the Page!! Thanks for calling this out - I'll change the instructions!

      - Don

      Delete
  39. no drop down anymore - it takes you to a new blog post. Help!

    ReplyDelete
    Replies
    1. The drop down has moved to the Gadget instead of the Page!! Thanks for calling this out - I'll change the instructions!

      - Don

      Delete
  40. Thank you so much for the last tip about Gadget! Found at last what I was looking for :)

    ReplyDelete
  41. hi don, i read ur tips and tried to do it but in the first step itself, i got stuck... there is no drop icon for pages.. what do i do? is there a partiular templete that i need to be using in the first place?

    ReplyDelete
  42. adding the links to the page is now different, but i was able to figure it out. thanks!

    Arianne | http://ariannecruz07.blogspot.com

    ReplyDelete
  43. Thanks for sharing this that was great post

    ReplyDelete
  44. the page created will it be a static page, cos i hate static page, i need a dynamic page that carries all the features of the home page, which seems to be impossibel in blogger

    ReplyDelete
  45. Hello Don, I have followed various online tutorials on blog creation, but yours have really been the best, and quite direct and simple, have been able to successfully create one, but i still lack professional knowledge of many things.... Please can you check (open) the blog so that you see it and point out corrections were its need. thanks
    The url of the blog is up49ja.blogspot.com

    Harrison John

    ReplyDelete
  46. thank you very much, finally i found the way. so helpful :D

    ReplyDelete
  47. Thanks so much, I just did this and it worked like a charm!

    ReplyDelete
  48. Thx. Very good and useful tutorial.

    ReplyDelete
  49. Good article, I definitely appreciate this website. Continue the good work!
    Feel free to visit my site lebatekblog.com

    ReplyDelete
  50. Thanks!!! I didn't think it possibile! I'll try this program! :)

    ReplyDelete
  51. Hello, Don! Thank you for the article. Sorry, I left a comment about the drop box not working but now it worked. I had that problem because my label links are written in Russian and when copied to the tab they didn`t look like a link ))) All I had to do was to copy only the part in english (myblogspot.com/search/label/) and type the label name in Russian on my own. And it`s going ok! :-) Probably it maybe helpful for those who use language with a non-latin alphabet or with diacritics.

    ReplyDelete
  52. Thank you! Great tips and very helpful!

    ReplyDelete
  53. Thanks for this post! How do I customize it so that all the menu tabs can be centered on the page and also without the actual menu bar (so that it looks like it's floating in the middle of the page)?

    ReplyDelete
  54. Thanks a lot. I found this article when I was looking for a solution and I think it shows the easiest way to categorize posts by using labels. http://q.gs/9MQ0o

    ReplyDelete
  55. GOOD POST, I AM TRYING TO MAKE WHEN YOU ARE MAKE ME TO BLOGGER...ALL THE BEST.

    FROM,
    MIZORAM, INDIA

    ReplyDelete
  56. great tutorial....

    ReplyDelete
  57. I think i'm going mad, mine doesn't have the drop down option on the 'new pages' section, I can't do a web address :(

    ReplyDelete
    Replies
    1. I had a note at the beginning of this post -- Blogger has moved the function to set the category URL from the Pages section below to the Pages Gadget. You don't add category links in the Page but add them in the Gadget

      Delete
  58. I'm really impressed along with your writing skills as smartly as
    with the structure in your weblog. Is that this a paid subject
    matter or did you modify it yourself? Anyway keep up the nice quality writing, it is uncommon to peer a nice weblog
    like this one today.

    ReplyDelete
    Replies
    1. Thank you! Appreciate the comment. All subject matter and content is my own.

      - Don James

      Delete
  59. Grate and valuable content you always post thanks for sharing and keep posting

    ReplyDelete
  60. Hello there, I found your site via Google at the same time as looking for a
    comparable matter, your web site got here up, it seems to be great.
    I have bookmarked it in my google bookmarks.
    Hello there, just was aware of your blog through Google, and located that it's truly informative.
    I am gonna watch out for brussels. I will be grateful if you happen to proceed this in future.

    Lots of folks will be benefited from your writing.

    Cheers!

    ReplyDelete
    Replies
    1. Thanks! Not sure what brussels are - but watch out :)

      Delete
  61. Wow! This can be one particular of the most helpful
    blogs We've ever arrive across on this subject.
    Actually Excellent. I'm also an expert in this topic therefore I can understand your hard work.

    ReplyDelete
  62. I do not know if it's just me or if everyone else encountering issues with your website.
    It appears like some of the text in your content are running off the
    screen. Can somebody else please comment and let me know if
    this is happening to them as well? This could be a problem with my internet
    browser because I've had this happen before. Appreciate it

    ReplyDelete
    Replies
    1. Seems to be something in your browser. What are you using? I test in IE, Chrome and Firefox and have no content spanning or running off issues.

      Delete
  63. I was extremely pleased to find this site. I need to to thank you for your time just for this wonderful read!!
    I definitely loved every little bit of it and i also have you book-marked to see new stuff on your
    web site.

    ReplyDelete
  64. This is a topic which is near to my heart... Many thanks!
    Where are your contact details though?

    ReplyDelete
    Replies
    1. The details to send me a note are right in the menu at the top - select Contact

      Delete
  65. Hey there superb website! Does running a blog similar to this require
    a massive amount work? I have very little knowledge of programming
    but I was hoping to start my own blog soon. Anyways, should you have any suggestions or techniques for new blog owners please share.
    I understand this is off subject nevertheless I simply wanted to ask.
    Thank you!

    ReplyDelete
    Replies
    1. No programming really needed for using Blogger. The work is all in writing your posts for your audience. This blog is not focused on new blog owners really - mostly on how to configure Blogger for best use cases. Good luck!

      Delete
  66. Good post. I learn something totally new and challenging on websites I stumbleupon everyday.
    It will always be helpful to read through articles from other
    writers and use a little something from other websites.

    ReplyDelete

NOTE: If you are logged into a Google account and you cannot see your Google profile image and name next to the 'Comment as:' in the comment editor, your 3rd party cookies are blocked and the comment won't post. If blocked, please comment preferably by Name/URL.