USER'S CHOICE POST

Internet Download Manager free download for life time activated
Top 10 software you must have in your computer/laptop/tab with free download link

Earn upto Rs. 9,000 pm checking Emails. Join now! And get Rs. 99 Instantly!

ALL THE INFORMATION GIVEN IN THIS SITE IS ONLY FOR THE LEARNING PURPOSE. WE SHOULD ALWAYS USE THE GENUINE SOFTWARE! USE OF ANY INFORMATION GIVEN HERE IS SOLELY USERS' RESPONSIBILITY!


Thursday, 22 November 2012

Create Automatic Menu From Blogger Pages

Filled under: ,



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.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...


Try New Whatsapp+ latest for free with lots of new Emoticons :) , Latest Version
Download NOW