How to Create static pages in Blogger

How to Create static pages in Blogger

What are Blogger static pages?

Blogger allows you to make specific pages like About me,Contact me,Privacy & Terms etc. These pages are Stand-alone pages.You can publish static information on these pages.Static pages are similar to post pages.But There are some differences between post pages and static pages.Static pages are not shown on homepage and not included in Labels.Address of static page is different than usual post pages(Not include the date).It also static pages are not indexed as Archive pages.But Static pages are ranked in Search results highly than some posts.Keyword-rich static pages can rank in higher positions in your search queries.

How to create Static pages?

Step 1 : Sign in to your Blogger account.
Step 2 : Now click on "pages" from the drop down menu near the your blog's title.

Step 3 : Click New page-> Blank page.

Step 4 : Now type your page content from "Compose" mode or edit its content clicking on "HTML" button.

Step 5 : After you add content to page,Click on Preview button to see how it will appear on your blog.

Step 6 : When you finished editing the page,click on Publish button to publicize your static page.

How To Add Horizontal menu bar for Blogger

How To Add Horizontal menu bar for Blogger

Step 1:  Sign in to your Blogger account.
Step 2:  From Blogger Dashboard,go to Layout.
Step 3:  Now click on "Add Gadget" link and find HTML/JavaScript element on the pop up window.
Step 4:  Paste below codes on your "HTML/JavaScript" element and make below changes on the given codes.

<style>
#hrnav05 {
list-style-type:none;
padding:0px;
margin:0px;
font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
font-size:18px;
}
#hrnav05 li {
display:inline;
float:left;
margin:0px;
}
#hrnav05 li a {
color:#EDEA3B;
padding:11px;
text-decoration:none;
text-transform:capitalize;
background:#B7B7B7;
border-style:solid;
border-color:transparent;
border-width:3px;
-moz-transition:all 250ms ease-out;
-webkit-transition:all 250ms ease-out;
-o-transition:all 250ms ease-out;
transition:all 250ms ease-out;
}
#hrnav05 li a:hover {
color:#B20000;
border-style:solid;
border-color:#B0B0B0;
box-shadow:inset 0px 0px 8px 10px #ccc;
-moz-transition:all .3s ease-in ;
-webkit-transition:all .3s ease-in ;
-o-transition:all .3s ease-in ;
transition:all .3s ease-in ;
}
</style>
<br/>
<div id="hrnav05">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Currency converter</a></li>
<li><a href="#">Our Group</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>