Pagination In Blogger/BlogSpot Blogs:


This tutorial will show you how to add Pagination to any BlogSpot / Blogger based blog with just two steps. The pagination numbers are completely customizable.

Instructions to follow:

STEP #1:

Log in to Blogger, go to Layout -> Edit HTML

Find this code:
  </body>

And paste this code immediately ABOVE/BEFORE it:
<!--PAGINATION-STARTS--><script type='text/javascript'> var pageCount=10; var displayPageNum=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script><br /> <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'/> <!--PAGINATION-STOPS-->

var pageCount=10; is the number of posts to be displayed on each page. [For ex. in a simple Google 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.
For eg. If a reader is on page 6, then in the pagination, page numbers will be displayed like this:





Prev 3 4 5 6 7 8 9 Next
i.e. 3 page numbers on each side of number 6.

STEP #2
Now we'll do the styling of these pagination numbers...
By default, this code will give a purple look to the numbers.

Find this code in the template:
</head>

And immediately ABOVE/BEFORE it, paste this code:
<!--PAGINATION-STARTS--><br /> <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/><br /> <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><br /> <!--PAGINATION-STOPS-http://bloggerstop.net-->

In the code above, everywhere #92416C refers to purple color.
Replace it with the color codes you want [view color-combinations and get HTML hex-color codes from this page].
Try different colors for borders, backgrounds, hover effects, and the numbers text too, according to the instructions I have highlighted in RED/BLUE colors.

Save the template.

STEP #3

Download and save the files used in this tutorial as a backup on your PC [Download Link]