Blogger/BlogSpot Page Navigation (Pagination) trick

1. Go To Blogger Dashboard >> Design >> Edit HTML

2. Search (CTRL + F) for this code:  </body>

And paste this code ABOVE/BEFORE it:

<!--PAGINATION-STARTS-->
<script type='text/javascript'>

var pageCount=10;
var displayPageNum=3;

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://file1.hpage.com/006123/81/html/1pagenevi.js' type='text/javascript'/>
<script src='http://file1.hpage.com/006123/81/html/2pagenevi.js' type='text/javascript'/>
<!--PAGINATION-STOPS-->

 var pageCount=10; is the number of posts to be displayed on each page. [For ex. in a simple search on each page you are shown 10 search results] - change the number "10" to any number you want.

var displayPageNum=3; is the number of buttons to be shown (on each side) along with the page number currently seleted.

Prev1 2 3 4 5 6 7  Next
i.e. 3 page numbers on each side of number 6.


STEP #2
Now we'll do the styling of these pagination numbers...

 </head>

 And paste this code ABOVE/BEFORE it:

<!--PAGINATION-STARTS-->
<link href='http://file1.hpage.com/006123/81/html/1pagenevi.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>
<!--PAGINATION-STOPS-http://founted.com-->

In the code above, everywhere #92416C refers to color.
Replace it with the color codes you want.

Posted in: blogger tips