Cara Membuat Multiple Pages pada Postingan Blogger

Pembaca blog biasanya akan menghindari artikel-artikel panjang yang monoton. Nah, Anda bisa menyiasatinya dengan membagi artikel panjang menjadi beberapa bagian atau halaman (multiple pages).

Umumnya, tujuan membuat multiple pages atau pagination pada suatu postingan ini adalah untuk menyamarkan artikel yang panjang agar tidak membosankan. Namun bisa juga untuk tujuan meningkatkan pageviews, seperti yang dilakukan oleh kebanyakan situs berita seperti Liputan6 dan Tribunnews.

Di platform WordPress sendiri sebenarnya multiple pages atau pagination bisa dibuat dengan mudah menggunakan bantuan plugin. Namun, pengguna Blogger mesti lebih bersabar karena harus membuatnya secara manual dengan CSS.

Kebanyakan kode pagination untuk Blogger yang ada di internet tidak menggunakan fungsi refresh. Artinya, walaupun pembaca artikel mengklik halaman 1, 2, 3, dan seterusnya, mereka seperti hanya membuka satu halaman saja. Dengan begitu, pageviews pun tidak akan bertambah tiap kali mereka mengklik bagian atau halaman berikutnya.

Tetapi kali ini kita akan belajar membuat multiple pages pada Blogger dengan halaman tidak terbatas dan blog akan otomatis refresh.

Multiple Pages di Blogger dengan Fungsi Refresh

#1. Masuk ke dasbor Blogger > “Tema” > “Edit HTML”.

#2. Salin dan tempel kode CSS di bawah ini di atas kode ]]></b:skin> atau di atas kode </style> dengan 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}}

#3. Selanjutnya kita akan menambahkan JavaScript di bawah ini. Salin dan tempel 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>

#4. Berikutnya kita buat tombol pagination. Ada dua opsi yaitu tombol akan muncul secara otomatis di semua artikel atau bisa dimunculkan pada artikel tertentu saja.

- Salin dan tempel kode di bawah ini setelah kode <data:post.body/> jika Anda ingin memunculkan tombol pagination di seluruh artikel secara otomatis. Yang perlu Anda perhatikan adalah kode <data:post.body/> di template biasanya muncul beberapa kali, jadi coba satu persatu.

- Salin dan tempel kode di bawah ini di bawah artikel pada mode HTML jika Anda hanya ingin memunculkan tombol pagination di artikel tertentu.

<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><center><a href='#' target='_blank' title='Banner Iklan'><img alt='iklan banner' src='https://4.bp.blogspot.com/-6ZDrg7GHPa4/VytnmRI9BaI/AAAAAAAAD0w/dyOGpRSMe78xiIGN4sDumyA-VGDjDYksACLcB/s1600/AdSpace768x90.png' title= Banner Iklan '/></a></center><br/><p class='paging'/>

Kode di atas juga mencakup satu slot banner iklan berukuran 768x90 pixels tepat di bawah kalimat “HALAMAN BERIKUTNYA:”. Apabila Anda tidak menginginkannya, maka cukup gunakan kode berikut:

<div class='dblanter'><b>HALAMAN BERIKUTNYA:</b></div><br/><br/><p class='paging'/>

Menerapkan ke Artikel

Penerapan kode multiple page atau pagination ini pun dilakukan secara manual ketika Anda membuat postingan baru. Tetapi Anda harus menggunakan mode HTML, bukan Compose. Salin dan tempel kode berikut:

<div class="post-content content_1">
Isi artikel halaman 1.
</div>

Buat sebanyak-banyaknya sesuai kebutuhan. Cukup ganti angka 1 dengan 2, 3, 4, 5, 6, dan seterusnya seperti contoh berikut:

<div class="post-content content_1">
Isi artikel halaman 1.
</div>
<div class="post-content content_2">
Isi artikel halaman 2.
</div>
<div class="post-content content_3">
Isi artikel halaman 3.
</div>

Jika sudah selesai, klik “Publikasikan”. Artikel Anda akan lebih tertata rapi dan mudah dibaca.

Tips

Cara ini bisa gagal jika Anda mengganti kode <data:post.body/> yang salah, seperti dijelaskan pada langkah keempat. Maka dari itu cobalah satu persatu sampai cara ini berhasil.

Selain itu jumlah halamannya pun sebaiknya jangan terlalu banyak, maksimal cukup 5 halaman saja. 

Demikian tutorial membuat multiple pages di Blogger dengan fungsi refresh. Sedikit rumit, namun tidak ada salahnya mencoba.