October 14, 2011

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,


]]></b:skin>

 

    4.   Paste the following code just above it,

/*-----MBT Page Menu-----*/
#PageList1 {
background:#333;
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:





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 ▼
PLEASE NOTE:
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

    http://www.accountancystudents.net/

    ReplyDelete
  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.
    www.accountancystudents.net

    ReplyDelete
  3. Masha Allah another delightful post!

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

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

    ReplyDelete
  6. Great one....
    thanks for sharing

    http://www.twitchtime.in/

    ReplyDelete
  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.

    ReplyDelete
  8. i didn't find
    header wrapper

    ReplyDelete
  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?

    -!r0nm4n7

    ReplyDelete
  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
    id='header-wrapper'>
    what should i do to add the code

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




    HELP ME PLEASE .

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

    class='tabs-outer'>

    GOT IT , THANKS

    ReplyDelete
  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 menu..so how can i do in blogger???plz give me some trick..

    ReplyDelete
  13. successfully added :) nice post

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

    http://nannu4u.blogspot.in/2012/06/facebook-fanpage-admin-role-all-page.html

    Regards
    Thirsty Hackers

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

    ReplyDelete
  15. it was very useful to me.thanks a lot
    www.finalsemeceprojects.blogspot.com

    ReplyDelete
  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 :www.internetbusinessblogging.blogspot.com
    Peace unto you,
    Amen

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

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

    ReplyDelete
  19. Thanks for the info. Really liked it

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

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

    ReplyDelete
  22. wonderful update... keep it up.

    http://releasedateinindia.blogspot.in/

    ReplyDelete
  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...
    thanks.

    ReplyDelete
    Replies
    1. yes this code is very good for every one

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

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

    www.keyguru.blogspot.com

    ReplyDelete
  26. http://thehealthandfitness-tips.blogspot.com/

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

    ReplyDelete
  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
    www.hridayparivartan.blogspot.com

    ReplyDelete