Search

Join this Blog for direct reference of any post into your inbox. To join just click on "Join this Site" under "Follower" then Login with your Email.*** DECLARATION: I Maintain this Blog for Helping Myself While at Work and Welcome any body Needing Help!!!.*** CAUTION: Using any of the script from this Blog may contain at Own Risk. These scripts May or May not have been Tested.***

Sunday, 21 September 2014

How to Add Number of Pages Navigation Widget to the Blogger

The Page navigation widget helps your readers to jump from one page to another page or specific page which they want. It has a small button at bottom by which any visitors can go directly on last page.
Step1:  Open Blogger Dashboard>> Template>> Edit HTML and Press Ctrl + F and search the code: <b:includable id='mobile-index-post' var='post'>
Then Paste below code before the above line.
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,numPages: 5,firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>
<div class='clear'/>
</div>
</b:includable>
Step2: Now find this code: <b:include name='nextprev'/>. And Replace <b:include name='nextprev'/>  code with code shown below.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>
Step3: Now find the code: ]]></b:skin>
And Copy the below code and paste before the ]]></b:skin>
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
     margin: 0 5px 0 0;
     padding: 2px 10px 3px;
     text-decoration: none;
     color: #fff;
     background: #2973FC;
     -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#blog-pager a:visited, .pagenavi a:visited {
     color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
     color: #fff;
     text-decoration: none;
     background: #000;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
     color: #fff;
     text-decoration: none;
     background: #000;
}
.pagenavi .pages, .pagenavi .current {
     font-weight: bold;
}
.pagenavi .pages {
     color: #fff;
     background: #2973FC;
}
Now Click Save Template and check the end of the post you will find "Number of Navigation pages" is added.

0 comments:

Post a Comment