Create Automatic Menu From Blogger Pages

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.

Categories: WEB TUTORIALS