It's a faith in technology.

create an automatically updated Tabs menu

Share on :

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.

0 comments on create an automatically updated Tabs menu :

Post a Comment and Don't Spam!

Thanks For Your Comment. You can also reach me at my mai Id :- blogtips.frd@gmail.com

 

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: