Page Navigation with Blog Pager Design for Blogger Templates

Page Navigation with Blog Pager Design for Blogger Templates


Page navigation for blogger is most important widget for blogger. Generally this widget can make visitors easy navigate to blog posts. For engaging the visitors with your blog page navigation is very powerful widget.  Always readers get bore by Next or Previous page button because they can't visit  according to their desire pages instantly. I have designed this Page Navigation that is attractive and it will work smoothly. As well as it will change the Blog Pager (Next, Home, Previous) appearance that will make more attractive. 

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.

/* Blog pager by*/
padding:5px 0 0 0;
#blog-pager a,.showpagePoint,.showpageOf,.showpageNum a{
margin:0 2px 0 0;
padding:4px 10px 5px;
border:1px solid #000;
text-transform: uppercase;
font:normal normal 12px Oswald;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
#blog-pager a:visited{
#blog-pager a:hover,.showpagePoint {
background-color: #264778;
border: 1px solid #000;
color: #fff;

Step 5 Now Find this code </body> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </body> and Save the templates.

<!--Page Navigation by Starts-->                                 <script type='text/javascript'> var pageCount=1;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
<script src='' type='text/javascript'/>
<!--Page Navigation by Ends-->
var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='' type='text/javascript'/>                                                                               <!--Page Navigation by Ends--><div class='clear'></div>


  • Change the Digit Count=1 for Display Post Per page
  • Change the Digit displayPageNum=3 for display Page Number
Open Comment Box

thank you sir I was looking for it..And it's working well.

Anonymous 4/03/2013

Good Brother.
But Page Numbers are not working properly.Thanks

Mohammad Fazle Rabbi says: 4/03/2013

I just visited ur site you are only using CSS code but already using this pagination in many site and I have just tested it another site and working good. Kindly install it I will check it again to make it work. Thank you brother.

Zuolo says: 6/28/2013

I can't save templet.
Error parsing XML, line 2021, column 3: The element type "body" must be terminated by the matching end-tag "body>".

Mohammad Fazle Rabbi says: 6/28/2013

Hi Zuolo It should work now. I have added 1 extra line..and follow the above tutorial step by step..but it works on most of the templates

MM NAUMAN says: 7/21/2013

Bro I want recent comments widget like yours if possible please give the script.

Mohammad Fazle Rabbi says: 7/21/2013

Hi Nauman I have already shared this comment box. Please visit--

Andrej Boskovski says: 9/19/2013

i have same problem like Zuolo

Mohammad Fazle Rabbi says: 9/21/2013

Hi Andrej..pls remove the code after line from step 6. And let me know that is it working or not?

Parvej Alam says: 3/31/2016

Page Numbers are not working properly. My URL:

Mohammad Fazle Rabbi says: 3/31/2016

This widget won't work on your template. because your template containing different script. and this will be very hard to remove specific script. :ex

Contact Form


Email *

Message *