Cara Membuat Pagination di Blogger

Tiga hari yang lalu saya memberikan tutorial cara membuat efek animasi salju di blogger, agar tampilan blog menjadi lebih menarik. Kali ini tak kalah pentingnya dalam membuat blog menjadi unik ataupun menarik. Karena pada kesempatan kali ini saya akan memberikan tutorial cara membuat pagination di blogger.
 
Pagination itu sendiri adalah proses membagi dokumen ke dalam beberapa halaman. Salah satu Website yang menerapkan pagination dalam sebuah artikel adalah tribunnews. Kamu bisa cek salah satu artikelnya jika tidak percaya.

Jika membuat pagination di blogger dengan cara yang saya buat, jumlah untuk memberikan pagination pada sebuah artikel tidak terbatas (unlimited). Jadi kamu bisa menentukan sendiri jumlah paginationnya, mau 300 kata di halaman pertama dan 500 kata di halaman kedua, jadi suka-suka kamu.

Bila kamu tertarik membuat pagination di blogger, perhatikan langkah-langkah berikut ini:

1. Pastikan kamu sudah masuk ke akun blogger

2. Kemudian pilih Tema > lalu klik Edit HTML

3. Selanjutnya silahkan copy kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau bisa juga di atas </style>

/* Pagination CSS by WarungInter.net */

.post-content{display:none}.warunginternet{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:#d400ff;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}

.tombol.warnet{background:#0ef}

.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #d400ff;color:#d400ff;border-radius:5px;margin-right:10px}

@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}} 

Baca Juga: Cara Membuat Kolom Komentar Disqus

4. Kemudian masukan kode Javascript di bawah ini tepat di atas kode </body>

<script style='text/javascript'>

//<![CDATA[ 

function get_n(p){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===p)return void 0===o[1]||o[1]}$(document).ready(function(){var p=get_n("p");$(".post-content").hide(),void 0===p?$(".content_1").show():$(".content_"+p).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+"?p="+i+'" class="tombol p'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==p&&$(".tombol.n1").toggleClass("warnet"),p==p&&$(".tombol.p"+p).toggleClass("warnet")});

//]]>

</script> 

5. Buat Postingan Baru > Pilih Mode HTML > Silahkan masukan konten atau artikel yang ingin kamu buat di Teks Postingan 1, Teks Postingan 2, Teks Postingan 3 dan seterusnya (Tergantung Jumlah Pagination yang ingin kamu tampilkan)

<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> 

Note: Jika ingin memesang lebih dari 3, maka buat <div class="post-content content_4"> dan seterusnya

Baca Juga: Cara Menampilkan Profil Author di Postingan Blogger

6. Selanjutnya di bagian paling bawah atau terakhir masukan kode berikut ini (pastikan dalam mode HTML)

<div class="warunginternet"><b>HALAMAN SELANJUTNYA:</b></div>

<br/><p class='paging'/> 

Note: Jika ingin memunculkan tombol pagination secara otomatis di semua artikel, silahkan copy kode di atas tepat di bawah kode <data:post.body/>. Mungkin kamu akan menemui kode seperti ini lebih dari satu, silahkan di coba satu-persatu

Demo Click here

Pada tampilan demo yang saya berikan, hasilnya kurang sesuai pada tombol paginationnya, mungkin karena saya memasangnya di blog safelink, Tapi ketika dipasang di blog saya yang satu lagi dengan menggunakan template viomagz hasilnya sesuai.

Itulah cara membuat pagination di blogger, cukup mudah kan?. Sekarang blog kamu mirip seperti tribunnews.

Berbagi :