Langkah Memasang Unlimited Page Navigation di Blog

Langkah Memasang Unlimited Page Navigation di Blog - Hallo gengs  jumpa lagi dengan CORETANJAWA untuk kesempatan kali ini kami akan berbagi tutorial cara memasang unlimited page navigation di blogger. Page navigation berfungsi sebagai tombol cepat untuk membuka artikel ke halaman selanjutnya dengan nomor sesuai jumlah artikel yang ada  pada blog.

Keistimewaan page navigation ini dapat memuat 10000 lebih artikel yang pada umunya page navigation biasa hanya memuat 500 artikel kurang lebih dan alhasil artikel yang lama tidak dapat di tampilkan di blog. Berikut langkah - langkah nya :

Langkah Memasang Unlimited Page Navigation di Blog

Login ke blogger ⇒ Template ⇒ Edit HTML ⇉ Salin kode di bawah ini sebelum </head>


Warna Padang

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>

Warna Gelap

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

Biar lebih bagus edit CSS di atas sesuai kreatifitas sobat.

 Langkah selanjutnya salin kode di bawah ini sebelum </body>

JS<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/ILHAMRPL/zhuberzhu/master/pagenavigation.js' type='text/javascript'/>

</b:if>

Ganti kode yang saya tandai di atas "postperpage=7" dengan artikel yang akan di tampilkan dan numshowpage=3 dengan jumlah nomor page navigation yang akan di tampilkan.

 Selanjutnya cari kode di bawah ini :

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

Geser tikus ke bawah dan temukan kode yang mirip di bawah ini :

HTML<!-- navigation -->

    <b:include name='nextprev'/>

Lanjut ganti kode di atas dengan kode di bawah ini :

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>

Nice simpan template dan cek hasilnya.

• Demo

Demikian tutorial Langkah Memasang Unlimited Page Navigation di Blog, Jika bermanfaat hendak share terimakasih.