How to Create Unlimited Page Navigation on Blogger - Peak Fiction

On this occasion, Peak Fiction will give a tutorial on How to add Unlimited Page Navigation on Blogger. This Page Navigation has a numbering feature, before and next so that visitors to our blog can access the next page or certain pages marked with page numbering.

Unlimited Page Navigation has a feature of loading 10,000 articles, whereas generally page navigation only functions to display 500 articles. Not a few bloggers use this Unlimited Page Navigation, because this page navigation apart from having the feature of being able to load 10 thousand articles, this unlimited page navigation is also very dynamic to install on your blog, so I suggest that you also install this unlimited page navigation on your blog.

Follow these step to add responsive unlimited page navigation in blogger website: 

Login to Blogger > Template > Edit Html > Select the CSS Codes below > Then save before the Code </head>.

<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 V-Terang */

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

The next step is to save the JS code below before the code </body>.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>

<script type='text/javascript'>

/*<![CDATA[*/

var postperpage=5;var numshowpage=3;var upPageWord =' Prev';var downPageWord =' Next';var urlactivepage=location.href;var home_page="/";

/*]]>*/

</script>

<script src='https://cdn.rawgit.com/zaiv/MasDzgn-html/master/u.p.nav.js' type='text/javascript'/>

</b:if>

Next, look for the post HTML code below.

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

Then scroll the mouse down and find the code below:

!-- navigation -->

    <b:include name='nextprev'/> 

Replace the code above (or something similar according to the template you are using) with the code below:

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

Save your Edit Template results and see the results.

That's the tutorial on how to create unlimited page navigation on Blogger, hopefully it's useful.