Memasang Unlimited Page Navigation di Blogger

4/27/2016
Memasang Unlimited Page Navigation di Blogger - Pada kesempatan ini Arlina Design akan berbagi 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.

Memasang Unlimited Page Navigation di Blogger

Keunggulan dari Page Navigation ini adalah dapat memuat 10000 artikel lebih yang pada umumnya Page Navigation hanya dibatasi hingga 500 artikel saja dan alhasil artikel sebelumnya tidak dapat ditampilkan di halaman blog. Bagi sobat 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 kode 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 kode CSS di atas sesuai kebutuhan

2. Kemudian salin kode 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.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/>
</b:if>

Ganti kode postperpage=7 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 di bawah ini

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

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

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

Ganti kode di atas (atau yang mirip tergantung template yang digunakan) dengan kode 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.


Demikian tutorial tentang Memasang Unlimited Page Navigation di Blogger yang bisa Saya sampaikan kali ini, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

11 comments

Wah bisa di coba nih..
kalau di blog sudah ada, bawaan template sebelumnya..
cara menerapkannya seperti apa Sist?

Balas

Makasih banget mba ^^ udah pernah nyari tutornya gak nemu-nemu,..eh disini udah ada aja :D mantap deh pokoknya ~ thanks

Balas

Sis, kalo untuk navigasi halaman per label gimana?
Saya pakai vienna mag responsive premium, kalo diklik label hanya muncul 2 artikel dan 2 halaman saja.

Contohnya : label A ada 15 artikel, tp kalau diklik label A yg muncul hanya 2 artikel dan 2 halaman. Gimana cara ngrubahnya sis? misal setiap halaman muncul 4-5 artikel, dan halamannya unlimited. Jadi kalau ada penambahan artikel di label A bisa tetap muncul.
Makasih sebelumnya sis, maaf pertanyaanya kepanjangan, hehe..

Balas

Hapus yang sebelumnya, ganti dengan yang baru

Balas

Iya semoga bermanfaat

Balas

Usahakan untuk menambahkan jump break pada artikel

http://www.arlinadzgn.com/2015/09/beberapa-optimasi-pada-postingan-blog.html

Balas

Hi, I am using g2 vusion template. This is not working for me.
When I implemented this code into my template. it is giving errors
Kindly guide me.

Regards,
Jatin

Balas

Download latest blogger premium templates for free on BThemes4u dot com

Balas

caranya bagaimana mbak biar gak eror

Balas

Saya punya masalah dalam cetakan (MINIMA COLORED 3 MAG STYLE) Pages hanya 15 halaman, meskipun jumlah yang tepat dari halaman 80 halaman
Terima kasih dan saya berharap solusi

Balas

Sis, kalo "next", "page x of y" nya diganti ke bahasa indonesia gmn ya ? hehehe

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.