Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog

Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog

Rio Ilham Hadi

30 December 2017

Halo sobat Blanter, sekarang saya akan membagikan sebuah tutorial cara membuat pagination number di postingan. Pagination number seperti ini biasa kita jumpai pada website-website berita ataupun blog yang mempunyai artikel panjang, hal tersebut dilakukan agar pembaca tidak bosan dengan artikel yang terlalu panjang ke bawah dan juga berguna agar pembaca terdeteksi aktif di blog tersebut (tidak AFK).

Tutorial pagination ini menggunakan script baru dan juga otomatis kecuali pengaturan bagian-bagian artikel yang ingin dibuat muncul di nomor tertentu, maka hal ini akan mempermudah sobat untuk mengatur bagian-bagian artikel yang akan dihilangkan dan dimunculkan pada halaman selanjutnya.

Jumlah untuk pagination ini tidak terbatas (unlimited) sobat bisa membuat halaman sebanyak mungkin dan dilengkapi dengan kolom iklan berukuran 768x90. Saat berpindah halaman, blog akan otomatis refresh menuju halaman artikel selanjutnya.

Perlu diperhatikan, minimal sobat mengenal tag pembuka dan penutup pada HTML dan usahakan artikel tersebut tidak copy paste dari Microsoft word atau situs lainnya karena akan mempersulit pengeditan.

Demo

Tertarik untuk membuat pagination di postingan blog? Silahkan ikuti tutorial di bawah ini :

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> sobat juga dapat meletakannya di atas </style> dan menggunakan Tag Kondisional.

/* Pagination CSS by Idblanter.com */
.post-content{display:none}.dblanter{font-size:130%;text-align:center}
.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}
.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}
.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}
.tombol.blanter{background:#000}
.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}
@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}

Selanjutnya letakan Javascript di bawah ini tepat di atas kode </body>

<script style='text/javascript'>
//<![CDATA[ 
function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")});
//]]>
</script>

Untuk memunculkan tombol pagination number secara otomatis di semua artikel, letakan kode di bawah ini tepat di bawah kode <data:post.body/> kode seperti ini ada banyak, jadi pastikan coba satu-persatu.

Bagi sobat yang ingin memasang Pagination pada artikel tertentu saja maka kode di bawah ini hanya perlu di letakan tepat di paling bawah artikel (mode HTML)

<div class='dblanter'><b>HALAMAN SELANJUTNYA:</b></div><br/>
<center><a href='#' target='_blank' title='Kunjungi blog Dunia Blanter'><img alt='iklan banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzb6fsAUrzCKlQTkzoZFYDZSvn1sEqeTURn3Hy01fQgbHmG-6JEqGRlgozZ3u0UIan3kDii7uvUuxsh-sCPzMmv4cMkrdrQTrZUN9lnsfa65OiiNBNbRt4xW6atn0Xl2ojc1H7fSpKyA/s1600/AdSpace768x90.png' title='Kunjungi blog Dunia Blanter'/></a></center>
<br/><p class='paging'/>

Langkah terakhir, sobat harus melakukan pengaturan manual untuk mengatur setiap kata-kata pada postingan agar tampil pada halaman yang sobat inginkan melalui Edit Post > masuk ke Mode HTML bukan Compose, kodenya seperti ini

<div class="post-content content_1">
</div>

Ganti angka 1 dengan 2,3,4,5 dan seterusnya.

Contoh Penerapannya seperti ini :

<div class="post-content content_1">
Teks Postingan 1
</div>
<div class="post-content content_2">
Teks Postingan 2
</div>
<div class="post-content content_3">
Teks Postingan 3
</div>

Simpan.

Lihat Juga : Masign Magz Premium Material Design Blogger Template

Nah, itulah tutorial yang dapat saya bagikan kali ini, semoga bermanfaat untuk sobat. Terimakasih. 😊

Share This