Create Automatic Menu From Blogger Pages

Last week we shared a tutorial on how to create a navigation menu from blogger labels and today we will use the official Pages Widget to create an automatically updated Tabs menu. If you have already created pages then they will all appear on this menu. Whenever you create a new page, the page will be added automatically to the link list in order. Such Menu is useful for displaying links to pages such as Contact, About and home. This is again a first time shared tutorial by MBT which converts Pages Widget into a Menu. I hope you like it. Lets first see a demo,

menu from blogger  pages widget

Live Demo

Create Pages

For this menu to work you will first need to create pages if you have not created one as yet. You will need to create two pages. One for your contact form and another for your About info. Give the pages any title you like but About and Contact is recommended.

  1. Go To Blogger > Edit Posts > Edit Pages
  2. Click Create New Page
  3. Now give your page a title and add some info inside it.
  4. Publish it.
  5. Done!
  6. Repeat this process twice for creating two pages.

Add Pages To Menu

Now we need to create a tabs menu that will display all page links at the top of your blog just above header. To do this follow these simple steps:

  1. Go to Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this,



    4.   Paste the following code just above it,

/*-----MBT Page Menu-----*/
#PageList1 {
height: 41px;
margin: 3px auto;
padding: 0;
width: 100%;

.PageList1 ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
.PageList li a {
color: #FFFFFF;
font: bold 12px arial;
padding: 12px 14px;
text-shadow: 0 1px 0 #000000;
text-transform: none;
.crosscol .PageList li, .footer .PageList li {
background: none repeat scroll 0 0 transparent;
float: left;
list-style: none outside none;
margin: 0;
padding: 12px 0;
.PageList li.selected a {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
.PageList li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;



    5.    Next search for this code,

<div id='header-wrapper'>


    6.    Just above it paste the following code,

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol1'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section> </div>


     7.   Save your template

     8.    You are all done!

Visit your blogs to see this amazing new automatic Tabs Navigation menu just at the top of your blog. More color themes and variations will be introduced in coming days so stay tune and make blogger a better place. Peace and blessings pals. :)

You can check the following menus too:

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

32 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. nice post...
    Thanks M.Ahmedzai

  2. how to add children categories in already installed navigation bar..
    Please share the tutorial about that ........

    Kindly check my blog to know exact issue.

  3. Masha Allah another delightful post!

  4. Can I create dropdown menu in page navigation??

  5. @ Mohmd, I can only find this code div id='header-inner'. So, how do I go abt implementing the 2nd part.

  6. Great one....
    thanks for sharing

  7. @Felix

    In your case kindly find this code instead <header>

    @admin @setan mehta
    your site url is not working. Further we can not add drop down menus to page navigation. If you have created pages then their titles and links will be automatically added to the menu.

  8. i didn't find
    header wrapper

  9. yup this is one information am searching for a long time. today i come up with the solution by your post dude. btw may i know you name?


  10. Thnaks for that , i've been searching for a long time to add this codes :D , THANKS DUDE BUT I'VE A Problem ..

    I can't find
    what should i do to add the code

    id='crosscol-wrapper' style='text-align:center'>


  11. If you are using the new blogger designer template then search for this code instead,



  12. I apply the navigation menu but my question is I want to show my all post in different categories like "Windows post will show in windows menu " and other will show in its how can i do in blogger???plz give me some trick..

  13. successfully added :) nice post

    Facebook Fanpage Admin Role | All Page Admins Must Read And Protect Your Fanpage ::

    Thirsty Hackers

  14. This comment has been removed by the author.

  15. it was very useful to me.thanks a lot

  16. Hello Moh'd, please I have a challenge with MBT Buster theme 3. I would like to customize the navigation bar and menu such that
    About Home Contact Guest Posts would be on top of the header ( to the left) And
    Blogging Internet Marketing Tools WordPress Blogger Advertise would be below the header. In fact just like your Smartearning methods navigation bar.
    You can have a look
    Peace unto you,

  17. What an amazing help for a beginner!!! Thank you so much!!!

  18. wow this one is cool, straight to the point and easy to install..thank you for the CSS and tips

  19. Thanks for the info. Really liked it

  20. i unable to find div id='header-wrapper' this code in blogger

  21. Thanks for the wonderful info ..... keep the good work up ....

  22. wonderful update... keep it up.

  23. Finally I find this tutorial.
    and i feel confused, my theme still error.
    but I'll try again.
    and now, its work to me...

    1. yes this code is very good for every one

  24. keep ur good work up and thnx for the post

  25. thank u so much....
    keep it up.......


  27. I just lost or delete my ]]> in my blog please will you help me to find it and use this service

  28. Can I Add Navigation In my Blogger Pages ? Not In Posts
    I want to add Navigation In my blogs pages
    here is my blog