INSTALLING UNLIMITED PAGE NAVIGATION ON BLOGGER

INSTALLING UNLIMITED PAGE NAVIGATION ON BLOGGER

Add page number navigation bar in blogger for easy access your blog by Jump. Cool page number navigation widget for blogger easy to add in blogger.

Suppose you have 200 of page in your blog and you have not page number navigation button in your blog you have only older post button newer post button how to visitor know how many page you have in your blog and second think is this suppose somebody want to go on page number 40 so by using page number navigation they easy can jump on page number 40 so this widget make easy to access your site.

The advantage of this is Page Navigation can load more articles 10000 Page Navigation is generally limited only to 500 articles alone and as a result the previous article can not be displayed on the blog page. For bloggers who yesterday had a request following the steps How to Install Unlimited Page Navigation on Blogger



1. Login to blogger> Open Template> Copy the code below before the </head>

CSS

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}
.showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}
.showpagePoint{background:#2980b9;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

2. Then copy the code below before the </body>

Javascript

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/>
</b:if>

Change the code postPerPage = 7 with the number of articles that will appear on every page, and change the number 3 on the code numshowpage = 3 into a number of numbers displayed in this Page Navigation

3. Next find the HTML code below post

HTML

<b:includable id='main' var='top'>

Then slide the mouse down and find this code (the code is taken from the standard template blogger)

HTML

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

Change the code above (or similar depending on the template used) with the code below

HTML

<!-- navigation -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if>

4. Save the template and see the results.

Hope You Like Post - How to Add Numbered Page Navigation Widget for Blogger

Thank to Arlina Design Official Link - Arlina Page Nagivation For Blogger