Cara Memasang Unlimited Pager Navigation di Blog

Saya akan membagikan tutorial yang cukup menarik pada kesempatan kali ini, yaitu membuat Unlimited Page Navigation

Unlimited Pager Navigation

Saya akan mengulasnya kembali di blog saya ini dan akan membagikan Design yang saya buat dari Unlimited Page Navigation ini, sebelum membuat Unlimited Page Navigation kamu mungkin ada dari kalian yang belum mengerti manfaat dari Unlimited Page Navigation ini.

Unlimited Page Navigation Berfungsi untuk membuka kembali Artikel Sebelumnya yang sudah tidak muncul dihalaman depan website dengan penomoran yang ada pada setiap page.

Langkah-langkah Membuat Navigasi Halaman Pada Blogger
Taruh kode dibawah ini tepat diatas kode  </head>
Kode dibawah ini adalah Style dari Unlimited Page Navigationnya kamu bisa Edit CSSnya sesuka kamu

Untuk Warna Terang

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

Untuk Warna Gelap

<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:#2d3141;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{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}
.showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

Oke setelah itu
kamu taruh kode dibawah ini tepat diatas kode </body>

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

"postperpage=7" Kamu bisa mengedit jumlah post yang akan tampil disetiap page navigation
"numshowpage=3" Kamu bisa mengdit jumlah nomor yang akan ditampilkan di page navigation

Selanjutnya kamu cari kode

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

Kode diatas adalah letaknya sudah pasti tidak jauh dibawah kode <b:includable id='main' var='top'>
Kamu bisa dengan mudah cari kode diatas bila kamu masih memakai template bawaan blogger,
Tapi kalau template buatan orang akan sulit dicari kamu bisa cari kode yang mirip dengan kode diatas

Note:
Kalau Template Orang yang kamu pakai biasanya kode Unlimited Page Navigationnya akan bentrok dengan kode template yang sedang kamu pasang,

Setelah ketemu,
Ganti kode yang kamu cari tadi dengan HTML dibawah ini

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

Oke save template kamu, dan jadi deh..
Untuk contohnya kamu bisa lihat pada blog ini.

Referensi : www.arlinadzgn.com

Sekian dari Tutorial "Membuat Unlimited Page Navigation" yang saya share, apabila ada yang kurang jelas bisa kamu tanyakan dikolom komentar, Thanks