Cara Membuat Navigasi Halaman Dengan Nomor di Blogger

Cara Membuat Page Navigation Halaman Berikutnya Dengan Angka di Blogger

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.
Cara Membuat Navigasi Halaman Dengan Nomor di Blogspot

Dengan dibantu sedikit script, maka fungsinya akan lebih baik. Seperti ini contoh dari cara membuat page navigation Blogger bernomor.
Cara Membuat Halaman Navigasi Angka 1 2 3 di Blogger

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~
SHARE Pin Share
Artikel Terkait
15 komentar
  1. terima kasih mbak igniel, langsung diterakan di blog saya , sensudesu.com

    BalasHapus
  2. Balasan
    1. Kalau pasangnya sesuai tutorial pasti jalan

      Hapus
  3. di template soho bawaan gak bisa mbak ?

    BalasHapus
  4. Mantab infonya berguna sekalia terima kasih

    BalasHapus
  5. terima kasih atas ilmunya

    BalasHapus
  6. work tetapi saya cek di handphone tampilannya tidak beraturan

    BalasHapus
    Balasan
    1. Pastikan CSS disimpan di dalam tag kondisional global, bukan di dalam tag kondisional halaman tertentu.

      Hapus
  7. Mantab, trimaksih gan...

    BalasHapus
  8. gan. ko pas di halaman terkhir. tombolnya ko ga ada ya, jd ga bs buat kembali ke halaman sebelumnya.

    BalasHapus
  9. cara 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..?

    BalasHapus

Posting Komentar

×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!