Pagination
Pagination atau navigasi halaman berfungsi memisahkan halaman website / blog yang banyak agar teratur berdasarkan tanggal publish, biasanya halaman pertama memuat postingan terbaru dan halaman terakhir postingan lama.
Sebenarnya tema blogger default pun sudah memiliki ini, tetapi tidak terlalu efektif karena kalian harus klik satu persatu untuk mencapai halaman terakhir.
Navigasi halaman yang akan saya bahas di artikel ini menggunakan nomor atau angka, jadi kalian tidak perlu klik satu persatu untuk mencapai halaman terakhir, oke kalau kalian tertarik baca tutorialnya dibawah ini.
Cara Membuat Navigasi Halaman Blogger
- Pertama, login dahulu ke akun blogger kalian.
- Masuk ke menu tema dan klik edit html.
- Lalu, cari kode </body> dan tambahkan kode berikut di atasnya.
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
/* Page Navigation with Number */
var postperpage = 7; // Jumlah halaman yang tampil
var numshowpage = 3; // Jumlah angka / nomor di menu navigasi
var upPageWord = 'Prev'; // Kata untuk navigasi halaman sebelumnya
var downPageWord = 'Next'; // Kata untuk navigasi halaman berikutnya
var urlactivepage = location.href;
var home_page= '/';
//]]></script>
<script src='https://cdn.rawgit.com/igniel/blogger/96670462/pagination.js'/>
</b:if>- Jika sudah, tambahkan CSS berikut di atas kode ]]></b:skin>.
/* Page Navigation with Number */
#blog-pager {clear:both; width:auto; line-height:17px; position:relative; display:block; text-align:left; overflow:visible; margin:0px; padding:0px}
.showpage a, .showpageNum a, .showpagePoint {position:relative; background:#2f303f; display:inline-block; font-size:13px; color:#fff; margin:0 4px 0 0;padding:7px 13px; text-decoration:none; border-radius:3px; transition:all .3s}
.showpageOf {float:right; color:#666; display:inline-block; font-size:13px; margin:0; padding:7px 0;}
.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 {background:#008c5f; color:#fff; position:relative}
.showpagePoint, .showpagePoint:hover {background:#008c5f; color:#fff}
span.label-info a.label-block:nth-child(n+2) {display:none}- Terakhir, simpan tema dan lihat perubahannya.
Akhir Kata
Oke, itu saja tutorial dari saya, terimakasih.