
Navigasi halaman berfungsi untuk membawa pengunjung ke artikel-artikel lama yang telah dipublish terlebih dulu. Secara default, Blogger memang sudah support page navigation. Tapi bentuknya masih standar sehingga tidak bisa langsung menuju ke artikel yang sangat lama, tapi harus di-klik satu persatu sampai akhirnya tiba di halaman yang dituju.

Dengan dibantu sedikit script, maka fungsinya akan lebih baik. Seperti ini contoh dari cara membuat page navigation Blogger bernomor.

Kamu bisa langsung memilih halaman yang berada sangat jauh di belakang dengan meng-klik nomor yang tersedia. Jauh lebih praktis dan cepat kan.
Cara Membuat Halaman Navigasi Bernomor di Blogspot
Tambahkan script ini "SEBELUM / DI ATAS"</body>
.<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>
Lalu tambahkan kode CSS "SEBELUM / DI ATAS"
</style>
./* 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}
Simpan template lalu lihat hasilnya. Live demo bisa cek ke template premium yang saya jual yaitu Igniplex - Blogger Template. Kalau mau beli silakan, harganya Rp. 150.000 untuk unlimited domain. Langsung hubungi saya di halaman KOTAK. Saat ini memang belum ada update, tapi percayalah setelah update nanti tampilannya akan jauh lebih keren.
Cukup ya tutorial cara membuat page number halaman keren di blog ini. Dadah~
Thx gan, langsung work di blog ane.
BalasHapusmantull (y)
BalasHapusterima kasih mbak igniel, langsung diterakan di blog saya , sensudesu.com
BalasHapuskok nggak bisa ya?
BalasHapusKalau pasangnya sesuai tutorial pasti jalan
Hapusdi template soho bawaan gak bisa mbak ?
BalasHapusBisa di semua template.
HapusMantab infonya berguna sekalia terima kasih
BalasHapusterima kasih atas ilmunya
BalasHapuswork, makasih
BalasHapuswork tetapi saya cek di handphone tampilannya tidak beraturan
BalasHapusPastikan CSS disimpan di dalam tag kondisional global, bukan di dalam tag kondisional halaman tertentu.
HapusMantab, trimaksih gan...
BalasHapusgan. ko pas di halaman terkhir. tombolnya ko ga ada ya, jd ga bs buat kembali ke halaman sebelumnya.
BalasHapuscara mengganti page infinity scrooll dgnti pagenumber gimna kak,.. soalnya mental trus klo di kasih pagenumber, malah page load infinity scrollnya tetep ada... mohon pencerahannya kak..?
BalasHapusKalau tanpa Nomor bagaimana mbak? Sy butuh yang tanpa nomor
BalasHapusMbak igniel, dulu kayaknya pernah buat tentang artikel pagination ala tribunnews, apakah sudsh dihapus ya? Aku cari-cari gak ada lagi
BalasHapusMba, cara ubah Pagination di Halaman Search seperti di Homepage gimana ya mba? https://prnt.sc/svmmwp
BalasHapusTerima kasih min, lgsung update
BalasHapusGan untuk di seacrh label nya engga tampil kok ya?
BalasHapustombol paginationnya pada halaman arsip kok nggak work ya min?
BalasHapusengga muncul di pencarian dan di halaman label kenapa ya??
BalasHapusHalaman Navigasinya muncul.. tapi pas mau di tes ke halaman 4 misalnya, malah balik ke halaman 1.. halaman 4 gak kebuka? Gimana cara ngatasin nya min
BalasHapus