Wednesday, 19 March 2014

How to add pages and customize page menu tabs in blogger

Having page menu/tabs in a blog; either at the top or at the side of the page helps the audience easily navigate/browse through the blog. It's similar to 'categories' in web directories where different content are grouped under separate headings (like education, business, lifestyle, home etc) so as to act like a catalog. Even Google recommends the use of user/HTML sitemap in every blog so that audience could easily browse through and find their desired content. 

Now, having pages with relevant post links are indirectly a way of site-mapping your blog; since you will be placing all your blog links somewhere or other. Note that having drop down menu style of tabs is another way of doing this. But as you can see, many blogs has got not less than 50 posts and it will be quite uneasy for the users to check them in the drop down list. So, it seems better to use a page for every category and include links relevant to that tab category. By employing pages  you can include as many links as you can. Note that you can even give sub-categories for a given category. For example, If the category is say education, then you may include sub categories like school, entrance exams, Engineering, medical etc. This will look more readable to the user. 

Remember; a normal user spend at the most 1 to 3 minutes in your site and he will try to check as many topics as he can (if found !). So, if the blog is designed to allow easy navigation, then the user might find related posts quickly and hence there's a greater possibility of viewing multiple posts !

Learn here how to add page tabs at the top or side bar in blogger using the following steps. I also gave some additional tips related to this subject at the end of this page to help you customize your blog for better design and look. 

Step - 1

Log in to your blogger account and go-to blog > Layout and click 'Add a Gadget' button (anywhere in your blogs layout) as shown below.

Step - 2

Clicking 'Add a gadget' will display a window with a list of available gadgets, scroll down a little to see 'Pages'. Click that. Clicking this will display a pop up window, something like shown below. The menu shows a list of available pages in your blog. 

Step - 3

Note that; only those pages which are checked will be displayed. If you want to hide a specific page from displaying, just un-check that option. For example I unchecked 'SEO' page in the below picture and as you can see in the 'Page order' list (see below picture) the tab 'SEO' disappeared. 

You may even re-arrange the order of the page tabs by just dragging the pages to the desired position with the use of a mouse. The arrangement in the below picture will display tabs in the order 
HOME > Blod Design > Make Money > Social Media

Step - 4

After you make your selection, click 'Save'. Now go-to the design of your blog (Layout) and drag the Page gadget to the top of the Layout (but below header gadget) as shown below, only if you wish to display the pages at the top of the blog like I did for this blog.

If you wish to display the tabs in some other location (say side bar) then drag the Page gadget to that location.

Step - 5 (Add a Page)

OK, Now you know how to create tabs as well as re arrange them, we further see on how to add more pages. For doing this go-to blog > Pages as shown below. Click 'New Page' 

Step - 6

Clicking 'New Page' will display a page similar to what we see while writing a new post; just like the one shown below. Do give a title in the space provided (numbered 1 in the picture). This title name will appear as a Page in the tab list. Don't forget to write search description for your new page (numbered 2 in the picture). Giving a brief and attractive description (with keywords) will help the search engines index your page and hence show them in search results.

Once you made your page click Publish and you are done. If you want to re arrange the order of this page in tabs just follow step 3

Step - 7 (Additional help)

OK, let me give you some more useful tips regarding this topic. Now we will see how to customize tab buttons - color of the tab, size, borders and more. 

To do this go-to Template > Customize as shown in the picture. Now you should be seeing the design of your page.

Notice some options at the top left of the page and click 'Advanced' as shown below. Now all you need to do is customize Font, values, colors and more under the two sub categories 'Tabs Text' and 'Tabs background' based on your blog design and color style. It's your own turn to choose the styles that match your blog. Make the selection and inspect how it looks by viewing your blog. Once you are satisfied with your customization click 'Apply to Blog' button provided at the top right corner and you are done !

OK, sometimes bloggers wish to put external post links in place of a page tab just for giving additional information. The link may be related to the same blog or related to some other website. Clicking such tabs will direct the visitor to the link post. 

To do this go-to blog > Layout > Pages (the page gadget that you created), click Edit to see the popup window similar to that shown in the second picture of this post. Click the link '+Add link page', which displays the following window. Give a desired title, that you want to show and paste the URL of the link. Save the changes and you are done.

Hope this helps.

Feel free to share your thoughts and suggestions by posting a comment below. 

Sharing is caring. Like us in social networks to get updated with latest posts. Subscribe to our free mail service in RSS feeder.



  1. Thanks ..great post.. Do visit my blog and let me know your just created my blog and it is 10 days old..Thanks

  2. Hi bro This is Naveen , this is my blog address, I used HTML JavaScript gadgets for the heading and tab menus , If I post anything means all contents posted in main page itself ,I need to post only in title with link in home page and if we click the link means it will need to display content in new tab , how to set that's HTML JavaScript gadgets , please guide me.

    1. As I understood, you want the main page to show only one standalone page and not all pages, right ? If so, u can check this post

      How to hide default home page tab in blogger

  3. Thank you bro , I tried to amazon affiliate sign up ,mistakenly i entered all details in us based forms ,now its possible to again reupload in amazon affilate india sign up ,is der any problem.

    1. Ya, it's possible, just delete/deactivate ur previous account and start a fresh account. Or, you can even try opening a new a/c using diff mail ID.

  4. Hi Bhanu,

    I would like to create sub tabs in main tab.

    For example, If my main tab contains 1. Home, Pages, Interests

    I want to create Facebook, Twitter tabs under Pages.

    How to do that?