Computer Guru: Install Page Navigation in your Blogger Blog

Posted by Prakash timilsina Thursday, January 21, 2010

Install Page Navigation in your Blogger Blog

This is the Page Navigation Screen-Shot. This makes the blogger blog easy to use. Want to put this in your blog ?

You can see the live Demo at the end of the page

#Step 1

Goto Blogger.com then login there > Layout > EDIT HTML

Find :

</body>

Then Paste the below code just above it :

<script type='text/javascript'>

var pageCount=3;

var displayPageNum=3;

var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>

The RED colored codes can be replaced by you. if u want 5 result per page then just replace the 10 with 5

#Step 2

Now Find this code :

</head>

Then paste the below code just above it.

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}

// HOVER CODE for NUMBER BUTTONS

.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// STYLE CODE FOR "PREV and NEXT" BUTTONS STARTS
.showpageArea a {
border: 1px solid #92416C;
}

// HOVER CODE for NEXT-PREV BUTTONS

.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>

you are done
Now Click on save Template then see your blog

Thanks [BloggerStop.Net]