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,
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.
- Go To Blogger > Edit Posts > Edit Pages
- Click Create New Page
- Now give your page a title and add some info inside it.
- Publish it.
- Done!
- 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:
- Go to Blogger > Design > Edit HTML
- Backup your template
- 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:
