Cara Membuat Unlimited Page Navigation di Blogger

Page Navigation ini mempunyai fitur penomoran, sebelum dan selanjutnya sehingga pengunjung blog kita dapat mengakses halaman selanjutnya maupun halaman tertentu yang di tandai dengan penomoran halaman.

Cara Membuat Unlimited Page Navigation di Blogger - Pada kesempatan sore ini Mas Design akan memberikan tutorial tentang  Cara Membuat Unlimited Page Navigation di Blogger. Page Navigation ini mempunyai fitur penomoran, sebelum dan selanjutnya sehingga pengunjung blog kita dapat mengakses halaman selanjutnya maupun halaman tertentu yang di tandai dengan penomoran halaman.


Unlimited Page Navigation ini mempunyai fitur memuat 10000 artikel yang pada umumnya page navigation hanya berfugsi menampilkan 500 artikel. Tidak sedikit para blogger menggunakan Unlimited Page Navigation ini, dikarenakan page navigation ini selain mempunyai fitur dapat memuat 10ribu artikel, unlimited page navigation ini juga sangat dinamis untuk di pasang di blog sobat, jadi saya sarankan agar sobat juga memasang unlimited page navigation ini di blog sobat. :)


Cara Membuat Unlimited Page Navigation di Blogger


1. Login ke Blogger > Template > Edit Html > Pilih salah satu Kode CSS di bawah > Kemudian simpan sebelum Kode </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>


<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-Gelap */
#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><>

Pilih salah satu kode CSS di atas.
Silahkan lakukan modifikasi pada kode CSS diatas sesuai selera sobat.

2. Langkah selanjutnya simpan kode JS di bawah ini sebelum kode </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>


Ganti kode postperpage=5 dengan jumlah artikel yang akan ditampilkan di setiap halaman dan ganti angka 3 pada kode numshowpage=3 menjadi jumlah nomor yang ditampilkan di Page Navigation ini

3. Selanjutnya cari Kode HTML post dibawah ini

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


Kemudian scroll mouse ke bawah dan temukan kode dibawah ini:

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

Ganti kode diatas (atau yang mirip sesuai template yang sobat gunakan) dengan kode 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>

4. Simpan hasil Edit Template sobat dan lihat hasilnya.

Demikian Tutorial tentang Cara Membuat Unlimited Page Navigation di Blogger pada sore ini, Semoga Bermanfaat.

Source : http://www.arlinadzgn.com/2016/04/memasang-unlimited-page-navigation-di-blogger.html