Unlimited Page Navigation Blogger Terbaru 2019

Halo semuanya kali ini saya akan membagikan tutorial seperti judulnya, mohon maaf sebelumnya saya jarang update dikarenakan masih sibuk urusin orderan template blogger. Tutorial kali ini saya bagikan berdasarkan request. Page navigation ini sama dengan Unlimited Page Navigation bisa memuat hingga 1000 artikel atau 10x lebih banyak.

Update terbarunya yaitu work dipage seperti :

• /search/label/
• /search?q=CARI

Ok kita mulai saja tutorial kali ini.

Cara Membuat Unlimited Page Navigation Blogger

1. Buka Blogger > Tema > Edit HTML
2. Simpan Css berikut di atas </style> (Jika sudah ada Ganti/Replace)

/* Navigation Page - Arlethdesign 
   ======================================= */
#blog-pager{margin:auto;text-align:right;display:block;clear:both;background-color:#f1f1f1;padding:6px 2px;}
.showpagePoint{text-decoration:none;background:#333;color:#fff;padding:6px 9px;margin:2px;border-radius:3px;font-size:13px}
#blog-pager a:hover,.showpagePoint:hover{text-decoration:none;background:#333;color:#fff;}
#blog-pager .showpageOf{background:#222;color:var(--white-100)}
#blog-pager a,.showpageOf{text-decoration:none;background:#ccc;color:#333;font-weight:600;padding:6px 9px;margin:0 2px;border-radius:3px;font-size:13px}



3. Klik Lompat Ke Widget > Blog1, Cari <b:includable id='nextprev'>...</b:includable>



Ganti dengan HTML berikut

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-angle-double-left'/> <data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/> <i class='fa fa-angle-double-right'/></a>
      </span>
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
</b:if>
  <div class='clear'/>
</b:includable>



4. Simpan Javascript berikut diatas </body> (Letaknya ada dipaling bawah tema).

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Page Navigation
var perPage=9,
    numPages=5,
    firstText="First",
    lastText="Last",
    prevText="« Previous",
    nextText="Next »",
    urlactivepage=location.href,
    home_page="/";
//]]></script>
<script type='text/javascript' src='https://rawcdn.githack.com/Arleth98/Js/9c02d8d9421c1b0913cf305035f4a583f3c7ce7c/Upagenav2019.js'/>
</b:if>



5. Jika sudah save Tema.