How To Add Numbered Page Navigation Widget For Blogger

In Blogger, We Have The Choice To Set The Amount Of Posts We Need To Show For Every Page By Setting Off To The Settings Menu > Posts And Comments > Show At Most ? Posts. When The Amount Of Aggregate Posts In Our Online Journal Surpasses This Number, We Will See "More Established Posts" And "Fresher Posts" Navigation Interfaces In Our Home Page And Chronicle Pages Footer As Blogger Doesn't Have Any Implicit Capacity On Page Numbering. Yet Page Numbers Rather Than More Seasoned And Fresher Posts Connections Could Help Our Web Journal Guests To Navigate Speedier (Bounce Starting With One Page Then Onto The Next Page Or Click On A Particular Page) And Know The Aggregate Number Of Posts Distributed. Here's An Excercise On The Most Proficient Method To Include Numbered Page Navigation Utilizing Javascript To A Blogger/ Blogspot Blog. You Can Select Any Of 3 Separate Styles That I Have Specified Underneath.

Adding Numbered Page Navigation To Blogger

You Can Add This Widget In Just Two Steps.
1. Adding The CSS.
2. Adding The Script.

Now Let's See How To Add The CSS Style For Page Navigation.

1. Adding The CSS

Step 1. Go To BloggerDashboard > Template > Click On The Edit HTML Button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Type or paste ]]></b:skin> tag inside the search box and hit Enter to find it.

Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1

 .page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;}
.page-navigation .pages{border:none;}

 Style 2

.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}
.page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:.

.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;}
.page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation .pages{border:none;background: none;}

2. Adding The Script 

Step 4. Now Find (CTRL + F) This Line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

 <b:includable id='page-navi'>
<div class='page-navigation'>
<script type='text/javascript'>
var pgNavigConf = {
perPage: 7,
numPages: 6,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>
<div class='clear'/>
</div>

</b:includable> 

Step 6. Now We Need To Put The Page Navigation Where It Has To Be Shown (Posts Footer). Find The Code Below (If You Can't Find It, Try To Find Only The First Line):

 <!-- navigation -->
<b:include name='nextprev'/>

Step 7. Replace It With This One:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

If You Can't Find The Old Page Navigation Code, Then Find This Section Of Code:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>

</b:section>

Insert this code immediately above the </b:includable> tag:

 <b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Configuration

After Installing, You Might Want To Change Some Default Settings. All The Settings Are In The Script Of Step 5 above:

var pgNavigConf = {
perPage: 7,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

- Perpage: Number Of Posts Are Shown In Each Page (7)
- Numpages: Number Of Pages Are Shown In Page Navigation (6)
- You Can Change The Text By Replacing The "First", "Last", "Next" And "Prev" Texts.

Step 8. Click On The Save Template Button And That's It! Enjoy!