How to get Tabs (navigation bar) on new blogger templates

Hi There,
First of all you might have seen that blogger has brought-up new Template Designer. This article is to tell you that "how can you add tabs in these new templates?"

Its very easy

  1. Open http://draft.blogger.com/home
  2. Go To layout section and add a page element of type "HTML/Javascript" just below "Blog Header"
  3. Now add this code in the widget.



<ul>
<li><a href="http://sampleurl.com">Sample URL</a></li>
<li><a href="http://example.com" >Example Links</a></li>
</ul>

Note that between ul tag you can add many as li items as you want.
each li item will have a anchor ("a") element whose href property needs to be set to the URL you want this tab to link, and text portion goes in between.

customize this code as you want, and then paste them in the widget section.
save your widget and enjoy the tabs.

Thanks for reading my blog



128 comments:

  1. Thank you for posting this; super easy to follow!

    ReplyDelete
  2. brilliant.. thanks for this very useful trick..

    ReplyDelete
  3. Thank you- your post makes it incredibly easy. I searched for more than five hours and created tabs in five minutes after finding your blog.

    ReplyDelete
  4. That was so so easy! I spent 2 hours and the solution was so simple.

    You're great!
    *salute*

    http://stuffilearnttoday.blogspot.com/

    ReplyDelete
  5. Can you please tell me how to center the tabs horizontally?

    ReplyDelete
  6. YOU. ARE. AMAZING.
    Seriously. Thank you!!

    ReplyDelete
  7. Thanks I have been looking for something like this. But I was thinking more of adding tabs to the blog where I can divide different subjects within the blog. Any suggestions?

    ReplyDelete
  8. I really love your code cos it works ...I pray that the God I serve bless you more and more in Jesus Name. AMEN.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. thank you soo much!! my blog's a little bit better now :-)

    ReplyDelete
  11. thank you so much for your tips ..i created the tabs in just 2 mins ...but can u please tell me how can relate my posts to a specific tab...bcoz every time i click on any tab it says Sorry, the page you were looking for in the blog does not exist...please tell me what to do..thanks in advance..looking forward for your reply..

    ReplyDelete
  12. Roxaina,
    I think u have a different need.
    just delete the page element you have added.
    Step1:Go to your dashboard.
    Step2:Goto "Edit Post" --> "Edit Pages"
    Step3: And create a "new page" put the content this page will automatically appear as tab on your blog(linked to your newly created page).

    ReplyDelete
  13. Excellent - so easy. Thanks v. much!

    ReplyDelete
  14. u r genius...thank u so much...

    ReplyDelete
  15. I am new to adding tabs so I am not sure how to use this code to and make the tabs line up from left to right underneath my Header. Please help....thanks

    ReplyDelete
  16. Thanks , it helped me a lot

    ReplyDelete
  17. hey markandey dude i have created the tabs successfully...but i am not sure how to make a post under the specific tab?????????or how to link one post with multiple tabs......waiting for ur reply...thanks:p

    ReplyDelete
  18. thnx it was very helpfull....

    ReplyDelete
  19. Thanks for the tab help! My page looks so fosisticated now.

    ReplyDelete
  20. Additional info to get your tabs to categorize your posts: you've got to replace the sample link in the code!

    1. label your posts ex: "recipes"
    2. add Label widget and click on the word "recipes"
    3. this will bring up all posts with that label - note the url in address bar.
    4. copy the url and paste it into Markandey's code between the quote marks. You are now replacing the sample link in the code with the link to your posts.
    5. Remove the labels widget so the info isn't repeated.

    ReplyDelete
  21. Woo Hoo!! You saved me A LOT of headache!! I love programming people!!!

    ReplyDelete
  22. this is awesome and easy. thank you!

    ReplyDelete
  23. Hi, I have just started blogging...and I have a template which already has tabs made..Now, I want to know how to add different posts to different tabs..Please help!! :) you seem like a good teacher:)

    http://chicklogger.blogspot.com/

    ReplyDelete
  24. This is really fantastically helpful! Thank you so much for making this information easy to find and easy to follow!

    ReplyDelete
  25. Thanks for the post I used it in my blog Latest Tech Tips Stop by if you get time, thanks again...

    ReplyDelete
  26. FYI I love you. Like a crazy person. Thank you so much! Haha I couldn't figure out how to do this :P

    ReplyDelete
  27. I still don't understand.
    What am I gonna write inside the http to make the tab? And where should I write the things that I want in the tab?

    ReplyDelete
  28. Thanks for the tip. Simple and effective :)

    ReplyDelete
  29. thnx bro it waz really helpful . thnx again :)))

    ReplyDelete
  30. Just what I was looking for, I couldn't find this option!

    ReplyDelete
  31. I have my tabs up but now I am unsure how to add content to them. When I click on the tab it goes to the home page no matter which tab I click. I appreciate your help.

    ReplyDelete
  32. Sorry also how can I make them in color?

    ReplyDelete
  33. @Creative Crafting

    Just add pages in that case, they automatically appear as tab. remove the code which you have done reading this blogpost.

    this post is older when pages feature was not available in blogger.

    ReplyDelete
  34. Thank you so much, i cant believe it was that easy. I searched so much for dead ends until this blog! Thanks again!

    ReplyDelete
  35. Thank you! This was so easy to follow. I am just wondering, how do I center my tabs? Thank you!

    ReplyDelete
  36. Hi Mark :)

    Just wanted to ask if these are the right instructions for what i want on my blog...

    I would like some tabs that say: Home, Photography, Random Finds.

    So I would like to be able to post all photography related photos under 'Photography', but I want the posts to be dated, so just like they would appear on the blog posts. Is this possible?

    I didn't think a page would be the right way to go about this...because i want the tab contents to have all posts relating to it, and in chronological order..i hope this makes sense.
    Thanks :)

    ReplyDelete
  37. This was super helpful, and I was able to use it to add tabs in the nav bar for certain topics/filters. Like prev mentioned, you need to have your posts already tagged with keywords, then click on that keyword on your blog to get the url for all those posts.

    THEN, you use the code above and use that URL and whatever text you want for the title of the tab. In my template (Blogger's SIMPLE) I put it after this code:
    {li class='selected'}{a expr : href='data:link.href'}{data:link.title/}{/a}{/li}
    (replace all with brackets for proper code)

    The thing is, I can't figure out how to make my new tabs go AFTER the ones made for pages. If I move this code, I end up repeating tabs across my blog. I want them to be last in line for the tabs.

    Thank you for this tutorial, it was the only one I found online that even remotely provided easy and accurate instruction!

    ReplyDelete
  38. Hey there, thanks for the nice tutorial but I have a problem. My new page keeps the old one's content except the newly added stuff. How can I avoid this?

    ReplyDelete
  39. @buxer can u explain a bit more ???

    ReplyDelete
  40. Okay, these are my first steps as a blogger and I might look like a noob :) Let's say I posted some text and pictures on my home (first) page. I've just made a second page which appears as a 2nd tab thanks to your info. But the thing is that the 2nd page (tab) has the whole information (text and pictures)from the first page plus the newly added stuff.

    ReplyDelete
  41. OMG! Thanks so much I was like Roxaina and had trouble though she's right u are a genuis

    ReplyDelete
  42. Thanks this did help me out a ton. I can only get two tabs to be side by side and I need to more tabs but they will only go under the current tabs I have in place. If you can help I would greatly appriciate it. Also how do I get a little RSS Feed button and a FB button to make it easy for people to follow the blog and Fb. Thanks www.kaleidoscopefarms.com

    ReplyDelete
  43. Thank you! This is so easy and helpful! I just added it to my blog with no problems whatsoever.

    ReplyDelete
  44. perfect !!!!
    color chnged and is lookign awesum!!!

    my new cool blog


    www.blogsforall.co.cc

    ReplyDelete
  45. Awesome so easy thank you and i'm a dunce so you should be proud!

    ReplyDelete
  46. So that tells us how to add the tabs on your page, so how or where do I create the pages these tabs link to. For example, I want to do a Sports blog with a page for hockey, a page for basketball, etc. Do I create multiple blogs and link the pages to each blog?

    ReplyDelete
  47. its indeed very simple thank u very much

    ReplyDelete
  48. SWEET, been looking everywhere and finally found this VERY SIMPLE code, thanks for sharing this!

    ReplyDelete
  49. uhm. i don't have the 'layout section' i only have 'design.' are they the same? o_O

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. Thank you for this. I was pulling out my hair for hours trying to deal with other "guides" to posting tabs in Blogger. You're amazing. Thanks!

    ReplyDelete
  52. So simple... Thank you so much!

    Any idea how to make a tab open a new window (when going to an external site, such as an etsy shop)? Thanks.

    ReplyDelete
  53. Thakn you!!

    Is there any way to transfer posts to a different tab?

    ReplyDelete
  54. Just started using blog, really helpful and informative. Thanks

    ReplyDelete
  55. Markandey-

    THANK YOU for this blog. I have looked everywhere for a helpful and easy How to but this is the only one that worked and that made sense. The video really was key. I was so frustrated I was almost wiling to pay someone but this was very helpful to get the tabs started.

    ReplyDelete
  56. Thanks a lot... It was very helpful!!

    ReplyDelete
  57. Thank you!!

    Best explanation i've seen!

    http://wild-missingno.blogspot.com

    ReplyDelete
  58. Really easy neh :) It sure helps alot thks thks *v*

    ReplyDelete
  59. hi! thanks..it sounds like you know what you're doing. UNLIKE ME. Pretend I just opened a blogspot for the first time in my life and I NEED tabs for my blog. please help me tiny step by tiny step. I can't figure out how to do this even though everyone else said it was easy :( ok so i sign in to my blog...now what?

    ReplyDelete
  60. Ok. So I had pages but couldn't figure out how to assign content to them. I know it has something to do with labels. When I put the label on (probably wrong) it still didn't go to the page that had that name. So now I'm lost. I tried the tabs thing and it send me to the "sorry this page doesn't exist" page. Could you break it down for those of us less technically savvy? I've been trying for two days and I'm sure it's something simple I'm missing. Thanks a ton!

    ReplyDelete
  61. Thanks so much! I did this and it worked great! If you have anything related to tabs with a drop down to related pages please let me know!

    For instance: a tab labled "How to make baby food" and then drop down tabs with "peas", "green beans", "sweet potatoes", ect... with each drop down taking you to the instructions for only one of the posts....

    Again, THANKS!

    ReplyDelete
  62. why can't everyone make it that easy!! i am definitely bookmarking you for future edits. thanks!
    Crystal
    quiltedpecan.blogspot.com

    ReplyDelete
  63. Hi, I have got a template with tags and i want to show Recent Posts, Categories, Popular Posts inm the tabs. Do you mind helping me to get the things going.

    ReplyDelete
  64. @sid sorry blogger does not support that yet :(

    ReplyDelete
  65. This has been very helpful to me. Thank you :)

    ReplyDelete
  66. Thank you Thank you Thank you!!! really useful info, and really useful video. Thanks so much for taking the time!

    ReplyDelete
  67. As everyone above me has said already... THANK YOU!

    I've been wondering for a while how to do this and done a number of searches over the months. Finally today I found this and a short time later, I finally have tabs on my blog! Result :D

    Thanks for sharing your wisdom :D

    ReplyDelete
  68. THANK-YOU SO MUCH! YOUR A LEGEND!

    ReplyDelete
  69. i just need to know how to add post into tabs

    ReplyDelete
  70. Thank you so much! I appreciate that you taught me how to use the Add Pages feature. My blog is just how I want it now!

    ReplyDelete
  71. i have create a page but after publishing, it didnt shows up on my blog..whats the problem?

    ReplyDelete
  72. This was SO easy to follow! Thanks a million!!!

    ReplyDelete
  73. it won't work with minima lefty template =(

    ReplyDelete
  74. Dude, YOU ROCK!! I've spent hours searching for a way to add "tabs" and you solved my problem in minutes... I now have working tabs for my Blog! Thank you soooo much! :-)

    ReplyDelete
  75. I just found out that the tabs I created while using Firefox look terrible when viewing my blog in Explorer. The last one on the top row is all squished up at the end. Can anyone help me fix this?

    ReplyDelete
  76. My tabs are forming vertically, how can I make them horizontal?

    ReplyDelete
  77. figured it out guys...great info

    ReplyDelete
  78. thank you so much!!! so easy to understand.now i can use my tabs.yahooooo

    ReplyDelete
  79. Hello!
    I would like some tabs that say: Family, Random, Academic, etc.
    I'm not sure a page is what I want because I want the tabs to have all posts relating to it, and in chronological order.
    Thank you!

    ReplyDelete
  80. @lauren use labels to categorize, then link the label url the label URL will be of format
    http://www.markandey.com/search/label/<label name>

    ReplyDelete
    Replies
    1. I tried the same, it did not work. I tried to create pages, but the pages do not appear as tabs and i can view the page right after I create it using "view page". But when I open my blog the next time, i do not see any pages. Can you help me on this? Thank you!

      Delete
  81. I created a whole new kinds of websites that might make a millions of dollars and its basically sharing staff and sharing youtube subscribtions and twitter followers and facebook friends and everything is for free. and i decided that the first 100 people that will like my facebook page or join my facebook group i will give him up to 5% of my website earnings.
    and this is the website link
    http://www.are0you.blogspo/

    ReplyDelete
  82. I could kiss you dude, this went swimmingly! THANK YOU SO MUCH!

    ReplyDelete
  83. This is perfect - it means I can add links to pages outside of Blogger (unlike with the 'pages' option in the layout section). Thanks! Any way of centering the tabs?

    ReplyDelete
  84. Thanks
    This was fantastic and so easy to follow.

    ReplyDelete
  85. thank you very much. it's really good.

    ReplyDelete
  86. thanx a lot.... it was helpful n easy 2..

    http://gamerz-united.blogspot.com/

    ReplyDelete
  87. Works Fantastic!!! Thank you!

    ReplyDelete
  88. Thanks for the Info... Nice Blog...

    nice post... very informative... nice blog... care to exlinks? Let me know so I can add you on mine... tnx...

    Marvz Anime Blog
    http://marvzanimeblog.blogspot.com/

    ReplyDelete
  89. Hi thank u for showing me the super easy way of adding tabs and creating pages in the blog......

    ReplyDelete
  90. Hi how can i manage blog archive as like you,could u pls help

    ReplyDelete
  91. thank you so much for the tip!!! i saw the etra tabs this morning on another blog, and googled as soon ass i came home from work!! it really organises my blog page!! happy!!!

    ReplyDelete
  92. Thanks man, you helped a lot!

    m20
    http://mrmoof.blogspot.com/

    ReplyDelete
  93. Thank you so much for this! My blog (http://wttrmusic.blogspot.com/) is still in its infancy but your help on tabs has made it look better already.

    ReplyDelete
  94. Thank you, I have spent a few hours trying to figure this out!!!

    ReplyDelete
  95. This comment has been removed by the author.

    ReplyDelete
  96. Thanks for this! easiest tutorial to follow!

    ReplyDelete
  97. Thnkx!!!!!!!!! :D

    ReplyDelete
  98. Great tips! One question though. I put it on my blog and realised it create a line of tabs below my blogger page tabs. How do I get the tabs to be on the same line? or I could delete the blog page tabs (homes,about me, contact etc etc) and replace with your method BUT would need the HOME tab to be highlighted in some way, the way it is now. Any ideas?

    ReplyDelete
  99. Okay have a much easier way for you to share on your blog I have discovered the easy peasy way. If you make sure you are on the new blogger interface, click on pages section of the blog in question. Click new page and you have an option for static or making the tab go direct to a link. Hey presto my tabs are created and a couple of them link direct to my other sites instead of pages.

    ReplyDelete
  100. thanks for posting this! it really help me... though i find t hard cause i dont get this "html" things.. still i was able to fix my blog.. thanks and God Bless

    ReplyDelete
  101. Your tutorial has helped me a lot. Tq! Btw,i have a question regarding the tabs.

    Now that i can create as many tabs as i want to, i would love to design my tabs so that it will look catchy as other items in the blog.

    where can i get the designs and how to make it work? :)

    ReplyDelete
  102. Thanks! used it here it; http://freepremiumaccounts-seph.blogspot.com/

    ReplyDelete
  103. This is awesome! though, I have a question, is it possible that when I click the link on the tab, it will automatically open in new tab? if so, how? thanks...
    https://www.geekskateguide.blogspot.com

    ReplyDelete
  104. Thank you, this one was really informative.

    Iti Tyagi

    1. Content Writer/Contributor
    SpiderNetworks Ltd.

    2. Founder
    Intechworx Reviews
    Follow on:
    www.intechworx.blogspot.in
    www.careeropportunitiesnet.blogspot.in

    ReplyDelete
  105. Thanks!

    www.mkvfilms.net
    www.lolgalaxy.net

    ReplyDelete
  106. HI there...

    I used your tutorial on how to get a custom navigation bar up on my blogger page...but now I am wondering how I go about centering the tabs? It is driving me crazy to have them all the way to the left hand side. Do you have any ideas on how to do that?

    You can see my blog at:

    http://pinterest911.blogspot.ca/

    Let me know...

    ReplyDelete
  107. hi.. i want to put movies in my movies tab.. bt always times i post a tab goes ko Home .. hw can i do it ..?? plz help me

    ReplyDelete
  108. This is not enough, how to put the content...??

    ReplyDelete
  109. I was able to do what you posted and thank you it was simple to follow I am trying to add specific tabs to my blog such as an about,crafts,photos,awards could you be more specific on how to add,I'm not sure what to put in the URL link that you posted.sorry and thank you in advance

    ReplyDelete

Your comment will inspire me, Please leave your comment