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.