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

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! :)