Cara Memasang Navigasi Halaman Unlimited Pada Blog

Pada halaman depan blog pada bagian bawahnya biasanya akan terdapat tulisan "older post", yang jika di klik akan mengarahkan Anda kehalaman postingan sebelumnya yang lain pada blog tersebut. Halaman awal di blog hanya akan menampilkan postingan terbaru.

Maka untuk memperjelas tentang apa saja isi blog kita selain memasang sitemap, maka template blog membutuhkan halaman navigasi yang responsive.

Page navigaion ini berfungsi untuk mempermudah pengunjung blog untuk melihat postingan Artikel yang lain yang tidak ada pada halaman depan. ada banyak referensi penarapan page navigasi atau pager blog ini. termasuk salah satunya yang akan Admin share untuk teman-teman yang mungkin ingin menerapkan pada blognya.

Unlimited page navigation atau navigasi halaman tak terbatas ini sangat baik untuk blog, karena tidak membatasi jumlah postingan yang ada di blog Anda. Postingan ini saya share ulang dari arlina design. Sengaja saya posting juga di blog saya karena saya juga ingin mempelajarinya dan menyimpannya sebagai cadangan jika ingin mengedit template nanntinya.

Cara Pasang Navigasi Halaman Bernomor Tak Terbatas

1. Login Ke Blogger > Theme > Edit Template. Salin Kode berikut ini sebelum kode </head>
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>

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>

silakan pilih salah satu jenis cssnya dan mengedit isi cssnya (gelap / terang) sesuai  dengan pilihan Anda.

2. Selanjutnya silakan copy dan pastekan kode Script berikut 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.rawgit.com/rachma92/tipsterkini/master/unlipage.js' type='text/javascript'/>
</b:if>

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

3. Selanjutnya, cari kode di bawah ini
<b:includable id='main' var='top'>
Lalu scroll kebawah sampai Anda temukan Kode dibawah ini
<!-- navigation -->
    <b:include name='nextprev'/>

Kemungkinan lokasinya berbeda dari tiap template, jadi silakan cari saja letaknya pada template Anda.

Jika sudah ditemukan, hapus code tersebut dan gantikan 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>

Save template kemudian lihat hasilnya.

silakan lihat hasilnya di pada halaman home blog ini
Demikian tutorial kali ini tentang cara memasang Unlimited page navigation atau navigasi halaman tak terbatas pada blog. terimakasih

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

Share