Add Beautiful Page Navigation (in Numbers) Widget on Blogspot/Blogger

Here is a Wonderful Step by Step guide on how to add a beautiful page navigation Widget on blogger blog

Adding this widget contains only 2 steps:

First is Adding CSS And Second is Adding the script.

1. Adding CSS:

Step1: goto blogger dashboard and click on Template on Left tab pane.

Step2: Now Click the Mouse inside the code area and press ctrl+F and then type ]]>

and then hit enter to find the code.
Step3:  Now Paste the Following Code Just Above the  ]]>
.

 .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);}

2. Now we have Finished Step1 Now we move on to step 2:

Step4:  Now search for the below Line by pressing ctrl+F .

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

Step5: Now add the Following Script Just above Below it

 

<b:includable id='page-navi'>

<div class='page-navigation'>

<script type='text/javascript'>

var pgNavigConf = {

perPage: 7,

numPages: 6,

firstText: "First",

lastText: "Last",

nextText: "Next",

prevText: "Prev"

}

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>

<div class='clear'/>

</div>

</b:includable>

Step6: Now find the Below code:

 <!-- navigation -->

<b:include name='nextprev'/>

Step7: Now Replace the Above Code With the following code:

 <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 Navigation code  Then Find This  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:

Insert the Below Code Above 
  :

 <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>

That's All Now your done! Hope You Understood this Post to Add Beautiful Page Navigation. If you have any doubts Please feel free to contact us.!