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~

Artikel Terkait

30 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Liang Solusi
    06 Desember, 2022
    Profil: https://www.blogger.com/profile/04268286254039496650
    work,, terima kasih mbk. sangat menginsfirasi! semoga semakin sukses dan sehat terus
  • GlobalHD
    07 Oktober, 2022
    Profil: https://www.blogger.com/profile/03114548990455508725
    in mobile version the number is not appreciated
  • ABU AULIA
    20 Agustus, 2022
    Profil: https://www.blogger.com/profile/12337757024212397979
    terimakasih ilmunya bang, manfaat, mudah mudahan selalu sehat dan berkah
  • Cita
    02 September, 2021
    Profil: https://www.blogger.com/profile/15248344048057307883
    kak. /style kan banyak. nah ditaronya di yg mana ya?
    • Igniel
      02 September, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang ada dalam tag kondisional halaman post.
  • Kang Nolep
    30 Juli, 2021
    Profil: https://www.blogger.com/profile/02724958570048647984
    mba, ini gk fungsi kalo di halaman search (yg gada max-result nya)

    cara atasinnya gmana mba supaya fungsi di halaman search/archive tanpa max-results?
  • Andika Leksana
    19 April, 2021
    Profil: https://www.blogger.com/profile/07187641116593193975
    Mba igniel ada tutorial cara buat page navigasi didalam artikel ga? Buat mendekin artikel yang panjang.
  • Unknown
    09 April, 2021
    Profil: https://www.blogger.com/profile/16783182305785727146
    Halaman 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
  • Pownime
    19 Januari, 2021
    Profil: https://www.blogger.com/profile/15530518687137342981
    engga muncul di pencarian dan di halaman label kenapa ya??
  • GRAD
    10 Desember, 2020
    Profil: https://www.blogger.com/profile/14968232197495970328
    tombol paginationnya pada halaman arsip kok nggak work ya min?
  • Pownime
    27 November, 2020
    Profil: https://www.blogger.com/profile/15530518687137342981
    Gan untuk di seacrh label nya engga tampil kok ya?
  • Bpnclassicguitar.bpogspot.com
    15 September, 2020
    Profil: https://www.blogger.com/profile/09697570807038072262
    Terima kasih min, lgsung update
  • Fadell
    08 Juni, 2020
    Profil: https://www.blogger.com/profile/05582547321676695033
    Mba, cara ubah Pagination di Halaman Search seperti di Homepage gimana ya mba? https://prnt.sc/svmmwp
  • Chapteria
    01 Mei, 2020
    Profil: https://www.blogger.com/profile/09838961540189264270
    Mbak igniel, dulu kayaknya pernah buat tentang artikel pagination ala tribunnews, apakah sudsh dihapus ya? Aku cari-cari gak ada lagi
  • Ois Chanel
    11 April, 2020
    Profil: https://www.blogger.com/profile/03768382552947955413
    Kalau tanpa Nomor bagaimana mbak? Sy butuh yang tanpa nomor
  • Abbas Thok ThilL
    11 Maret, 2020
    Profil: https://www.blogger.com/profile/08787360565600501672
    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..?
  • Ahmad Yani
    09 Februari, 2020
    Profil: https://www.blogger.com/profile/06558495022122041908
    gan. ko pas di halaman terkhir. tombolnya ko ga ada ya, jd ga bs buat kembali ke halaman sebelumnya.
  • Fathian
    22 Januari, 2020
    Profil: https://www.blogger.com/profile/04765876783468140169
    Mantab, trimaksih gan...
  • F13an1
    19 Januari, 2020
    Profil: https://www.blogger.com/profile/12557639394287796173
    work tetapi saya cek di handphone tampilannya tidak beraturan
    • Igniel
      22 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan CSS disimpan di dalam tag kondisional global, bukan di dalam tag kondisional halaman tertentu.
  • Mas Operator
    07 Januari, 2020
    Profil: https://www.blogger.com/profile/15812777906641831653
    work, makasih
  • A M I R
    01 Desember, 2019
    Profil: https://www.blogger.com/profile/01276038301132275391
    terima kasih atas ilmunya
  • Endoy
    12 September, 2019
    Profil: https://www.blogger.com/profile/01755943924350127453
    Mantab infonya berguna sekalia terima kasih
  • Ananda Narayana
    01 September, 2019
    Profil: https://www.blogger.com/profile/05533576786081253710
    di template soho bawaan gak bisa mbak ?
  • Admin
    10 April, 2019
    Profil: https://www.blogger.com/profile/15527704996543893327
    kok nggak bisa ya?
    • Igniel
      11 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau pasangnya sesuai tutorial pasti jalan
  • Admin
    17 Maret, 2019
    Profil: https://www.blogger.com/profile/10770083315732140657
    terima kasih mbak igniel, langsung diterakan di blog saya , sensudesu.com
  • Centervote
    12 Maret, 2019
    Profil: https://www.blogger.com/profile/04635152651711934566
    mantull (y)
  • sobat-software.blogspot.com
    28 Oktober, 2018
    Profil: https://www.blogger.com/profile/10159113786324085183
    Thx gan, langsung work di blog ane.