Cara Memasang Page Unlimited Page Navigasi di blog

Baca Juga

Cara MemasangPage Unlimited Page Navigasi di blog – page navigasi ini berfungsi untuk membuka artikel selanjutnya yang berada di halaman depan blog sobat dengan penomeran yang di tampilkan sesuai dengan jumlah artikel yang ada di blog sobat.

Pengertian Unlimited di sini adalah dapat menampilkan Keseluruhan halaman artikel milik sobat. umumnya Page navigasi hanya di batasi hingga 500 saja dan hasilnya artikel sebelumnya tidak akan dapat di tampilkan di halaman blog. Di sini lah keunggulan Memasang Page Unlimited Page Navigasi di blog, dari page navigasi ini adalah dapat memuat 1000 artikel lebih yang pada umumnya hanya dapat di tampilkan 500 artikel saja. bagaimana? Tertarik mencobanya?, silahkan di simak tutorial nya berikut ini.

Cara Memasang Page Unlimited Page Navigasi di blog

1. Login Ke Blog sobat > Buka Tempate.

2. Salin kode di bawah ini dan letakkan kode tepat sebelum kode </head>

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 Gelab

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>

3. Kemudian salin kode di bawah ini dan letakkan kode tepat sebelum kode </body>

Javascript

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

4. Selanjutnya cari kode HTML Post di bawah ini

HTML

<b:includable id='main' var='top'> Kemudian geser mous ke bawah dan temukan kode ini (kode ini di ambil dari tamplate setandar blogger)
HTML<!-- navigation -->    <b:include name='nextprev'/>

5. selanjutnya ganti kode di atas (atau yang mirip tergantung template yang di gunakan) 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>

6. Simpan Template dan lihat hasilnya.

Demikian tutorial mengenai Cara Memasang Page Unlimited Page Navigasi di blog. Jangan lupa berkomentar dan Selamat Mencoba.