Memasang Unlimited Page Navigation Di Blogger

Memasang Unlimited Page Navigation di Blogger - Pada kesempatan ini akan mengembangkan tutorial Cara Membuat atau Memasang Unlimited Page Navigation di Blogger. Page navigation ini berfungsi untuk membuka artikel selanjutnya pada halaman blog dengan penomoran yang ditampilkan sesuai dengan jumlah artikel yang ada di blog.

Keunggulan dari Page Navigation ini ialah sanggup memuat 10000 artikel lebih yang pada umumnya Page Navigation hanya dibatasi hingga 500 artikel saja dan balasannya artikel sebelumnya tidak sanggup ditampilkan di halaman blog. Bagi teman blogger yang kemarin sempat request berikut langkah-langkah Cara Memasang Unlimited Page Navigation di Blogger.

Memasang Unlimited Page Navigation di Blogger

1. Login ke blogger > Buka Template > Salin isyarat di bawah ini sebelum </head>

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>

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>

Edit kembali isyarat CSS di atas sesuai kebutuhan

2. Kemudian salin isyarat di bawah ini sebelum </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.jsdelivr.net/gh/Arlina-Design/redvision@master/unlipage.js' type='text/javascript'/> </b:if>

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

3. Selanjutnya cari isyarat HTML post di bawah ini

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

Kemudian geser mouse ke bawah dan temukan isyarat ini (kode ini diambil dari template standar blogger)

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

Ganti isyarat di atas (atau yang seolah-olah tergantung template yang digunakan) dengan isyarat di bawah 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 template dan lihat hasilnya.

Result

Demikian tutorial wacana Memasang Unlimited Page Navigation di Blogger yang sanggup Saya sampaikan kali ini, supaya bermanfaat.

Share this post