Saturday 31 May 2014

Navigation bar

What is navigation bar 

A navigation bar is a section of a website or online page allow visitors to
travelling easily through page to page .  The implementation and design of navigation bars is a necessary for
a good web design and web usability.

In create page navigation system on webpage , you have to design two part Css part and Javascript part.
We want help our visitor. We put a ready code to use below so that visitor put that code easily and make their blog more valuable.

How design page Navigation css

The first thing you need to do is to log in into your Google account.
Once logged in go to Blogger Dashboard then go to Template and click on Edit HTML
then and search ( to search use Ctrl+F Key) for the Skin tag "]]></b:skin>". If don't find by searching then find manually,

"]]></b:skin>" tag is with in the <head> and </Head> tag.
After finding the skin tag, just above "]]></b:skin>" tag paste the following Css code.

--------------------------------------------------
.showpageNum a {
background: #02ab68;
padding: 6px;
padding-left: 11px;
border: 1px solid #b9b9b9;
padding-right: 11px;
margin-right: 6px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 6px;
padding-left: 11px;
border: 1px solid #b9b9b9;
padding-right: 11px;
margin-right: 6px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 16px;
color: #fff!important;
padding-left: 16px;
padding-right: 16px;
}
.showpagePoint {
float: left;
font-size: 16px;
padding-left: 16px;
padding-right: 16px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 364px;
margin-top: 11px;
}
---------------------------------------------------------

then Css style coding done now just you have to put Javascript.

How to design page Navigation Javascript


Now once the style sheet is added to your template,
it is the time to add the JavaScript coding that would turn the ordinary
looking order/newer post buttons into webpage and user-friendly  numeric page navigation.
Search for the ending </body> tag and just above it paste the following JavaScript coding.

----------------------------------------------------------
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=7;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

-----------------------------------------------------------

After putting javascript you have done every thing done. Then press “Save Template” button and enjoy
page navigation easily.

No comments: