Place Page Tabs Above Header in Blogger Blog

Page tabs above header : Page tabs will appear on your Blogger blog after installing page list gadget on your Blogger blog. Actually page list gadget is installed on your Blogger blog by default. To appear page tabs on your Blogger blog you have to go to pages and choose show pages as top tabs. Page tabs will display just below your header in your Blogger blog. We can move the page tabs to the sidebar or footer by simply drag and drop the page list gadget. But you can't place the page tabs above the header in your Blogger blog with drag and drop method. In this post I'm explaining about how to place page tabs above the header in Blogger blog.

How to Place Page Tabs Above Header in Blogger :

You can place the page tabs above the Blogger header. But you have to do some changes in your Blogger template code. This method is easy and simple to move page tabs to the top of your Blogger header. We don't need to add third party code to your Blogger blog to place tabs above your Blogger header. Simply make small changes in your template code of your Blogger blog. This method is simply to follow.

Follow below steps to place page tabs above the blog header in Blogger


Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search for <div class='tabs-outer'>

Copy and cut code from <div class='tabs-outer'>  up to above line of the <div class="main-outer">
I.e : Copy and cut code the code between </header> and <div class="main-outer">

Next copy that copied code just above <header>

Step 5 : Click on Save template.

Refresh your Blogger blog once, now page tabs will appear above your Blogger header. This method is easy and simple to place the page tabs above the header in your Blogger blog.

2 comments: