05 November 2012

How to move your page tabs or navigation links to the top of your blog page

05 November 2012
As you know, the default location of page tabs in Blogger is either below the header or as links on your sidebar. In this post I will show you how to move your page tabs to the top of your blog page instead of below the header.
Page tabs BELOW header

How to move page tabs

1. Go to Template and Click on Backup/Restore on the top right to back up your current template. Click on Download full template and save the file somewhere in your computer.

2. Click on Edit HTML. Click on Proceed.

3. Look for this line of code: <div class='tabs-outer'>. You should find it below this tag </header>.

4. Put your cursor to the beginning of that line, hold down the shift key, and use your page-down key to highlight the entire tabs code from <div class='tabs-outer'> down to the </div> tag above this line of code: <div class='main-outer'>.



5. Now, cut that entire group of code -- ctrl-x or right-click and select cut.

6. Next, look for this tag: <header>. You should find it above this line of code: <div class='header-outer'>.

7. Paste your tabs code ABOVE the <header> tag.

8. Click on Preview to see the result of moving that code. If it looks right, then click on Save template and you're done!


Page tabs ABOVE header


This trick should work. If it doesn't, leave me a comment and I'll see if I help! :)

38 comments:

  1. HI! I just found your blog! Just trying to revamp my blog and tried this trick and it worked! Thank you so much! I have been trying to figure out how to move that bar for FOREVER. Thanks so much for a great tutorial! :)

    ReplyDelete
  2. Hello, and thanks for the tip!

    I am trying to add a space before my pages tab to align it with an image that sits above it. The only info I was able to find was to align it left, right or center. Is there any way to move it wherever I want to?

    ReplyDelete
    Replies
    1. Have you tried playing around with the margins? Margin-left, margin-right, margin-top...

      Delete
  3. Worked perfectly. Thank you so much for sharing!!

    ReplyDelete
  4. hey this worked well but my external links in the tab are not working, do you know how to fix that?

    ReplyDelete
    Replies
    1. Hmm I'm not sure. It should work if you're adding them under the Pages tool. :)

      Delete
  5. Thank you!

    saltTooth.blogspot.com

    ReplyDelete
  6. I am looking for the tabs next to my header :) any advice?

    ReplyDelete
    Replies
    1. I usually just follow this tutorial to put things beside my header :) -

      How to split your header or add a gadget inside your header space - http://helplogger.blogspot.com/2012/03/how-to-add-gadgetwidget-inside-your.html

      Delete
  7. Thanks a bunch! Only blog I found helpful! Just one thing I would add if I were you: the find key (CTRL+f) that works for chrome btw. and you can paste the HTMLs you showed us and it will find it for us right away! Everything else was fine!

    ReplyDelete
  8. Hi. :) Is there a way for the tabs to always be there on top of the page even though you've scrolled down already?

    Thanks,
    rache

    ReplyDelete
    Replies
    1. Sorry, I haven't tried doing this. :P

      Delete
  9. worked really well but then my fonts changed and they wouldn't change back. So I had to put it all back to how it was...sorry

    ReplyDelete
  10. I cannot find those tags you've mentioned above, can you help me on this?

    ReplyDelete
    Replies
    1. Hi Nindya, have you tried expanding the HTML code (clicking on the little black arrowheads on the left side) before looking for the tag?

      Delete
  11. OMG! Thank you so much for this! :*
    hugs! :)


    Armi Fernandez
    http://stylearmi.blogspot.com/

    ReplyDelete
  12. this worked great, except I can not get the pages to be in the same format as I had them before. How do I keep my page tabs from showing up as a list?
    Thanks for your help :-)
    Cathy
    www.threekidsandafish.com

    ReplyDelete
  13. Thank you so much - this was really helpful. Do you know how I can align the tabs to the right? At the moment they're aligned to the left!

    ReplyDelete
    Replies
    1. You can try this - Open the template designer and under "Add CSS" put this:

      .PageList {text-align:right !important;}
      .PageList li {display:inline !important; float:none !important;}

      Check the preview first to make sure your tabs are aligned to the right. :P

      Delete
  14. Thank you! That was super easy!
    www.debashblog.blogspot.ca

    ReplyDelete
  15. Hi, is there a way to create a second set of tabs above the header?

    ReplyDelete
    Replies
    1. Sorry, I haven't figured out how to do that yet, so I can't say. :P

      Delete
  16. Thank you so much Leah, this is so helpful! I was wondering if you know how to remove only one of my line spacer's on the right-hand side of the page tabs? It looks a little odd?

    http://messyjessecrafts.blogspot.co.uk

    ReplyDelete
    Replies
    1. Hey Jessie! Thanks for dropping by here. :)

      I think the easiest thing to do is just "remove" all the line spacers by making the tabs border transparent via the Blogger Template Designer. :P It's hard to remove just that one line without affecting the others. :/

      Delete
  17. This moved the pages, but the pages are in the form of a list instead of tabs when moved above the header. Is there a way to fix that?

    ReplyDelete
  18. Very useful, just what I needed as a beginner on Blogger! Thank you so much!

    http://eeshasglam.blogspot.com

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

    ReplyDelete
    Replies
    1. Hi Leanda! Sorry I'm not sure what's wrong. :(

      Delete
  20. Same here! It doesn't work for me :( I think I did everything correctly. Leah, do you think you'd be able to take a look at my blog's html code and see what's wrong?

    ReplyDelete
    Replies
    1. I'm sorry, Olivia. I haven't been able to figure out why it works for some and doesn't for others. It tends NOT to work for those whose templates have been tweaked a lot. :(

      Delete
  21. Hi Leah! Quite an urgent query! I've been searching high and low for how to do this and not finding any answers :( Right now my page tabs menu is touching my header and I would like to create a space between them. The second thing I need to do is this: my actual tabs fit nicely under the header (and I have centered them) but the rest of the bar sticks out with blank space in both directions. How do I shorten it? I can't remove the background because my tabs are not easily read against the background.

    ReplyDelete
  22. Hi there!
    Lovely tutorial, and it worked just fine! But I would like to ask how to move the page bar further upwards (reduce the space above the page bar). Right now it looks like this: www.concrete-home.blogspot.com - I hope you can help.

    - Louise

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

    ReplyDelete
  24. Thank you so much! Amazing tutorial! So simple and easy to do!
    xx
    www.junewantsitall.com

    ReplyDelete
  25. I have been searching how to do this for so long and every post I found didn't work! Until today that is, thank you! So simple, yet helpful!

    http://www.scampinchips.co.uk/

    ReplyDelete

Thanks for dropping by! :)

© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.