How To Add Page Number Navigation On Blogger

Now I share how to add page navigation on blogger. By using this blog visitors can easily go to an appropriate page. Visitors show numbering page on bellow the content box. By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages. You have to put a code in HTML/JavaScripts box.

Add Numbered Page Navigation Widget for Blogger:

• Firstly Login to your Blogger Dashboard 
• Select your blog and click on right side bar
• Select "Layout" on drop down menu

Add Blogger Page Navigation Widget:

Step 1:

A. Click on "Add Gadget" in your template sidebar

B.  Choose "HTML/JavaScript" Gadget 

Step 2:

      A. Write widget name in "Title" box (if you need)

      B. Past the bellow code paste in "Content" box

Numbered Page Navigation HTML Code:

<style type='text/css'>

#blog-pager{height: 28px;

    padding: 10px 0 0;

overflow:hidden;

text-align:center;

}

.showpageArea a {text-decoration:underline;

font-size: 16px;

       text-align: center;}

.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}

.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}

.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}

.showpage a:hover {text-decoration:none;background: #cccccc;}

.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>

<script style='text/javascript'>var pageCount=7;

var displayPageNum=6;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://help2blogging.blogspot.blogspot.com" style="font-size:0pt">Blogger tutorials</a>

<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Note: You can change count number ‘7’

            Change ‘6’ to show how many additional Page Navigation numbers display on the page.

Step 3:

Firstly you can see how many most post already have in your blogger template
Go to Setting >Post and comments >Posts >Show at most? 

• Click on Save button and enjoy.

Customize Numbered Pagination Place in Your Blogger Blog:

• Now Change the position of the widget place under the Blog posts show the bellow picture.

• That's all !!!

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

If you have any question and suggestions related blogger

Please don't hesitates just sent email or leave comment

Thanks to follow this tutorial

Best regards

help2blogging team