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

28 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • ABU AULIA
    20/8/22
    Profil: https://www.blogger.com/profile/12337757024212397979
    terimakasih ilmunya bang, manfaat, mudah mudahan selalu sehat dan berkah
  • Cita
    2/9/21
    Profil: https://www.blogger.com/profile/15248344048057307883
    kak. /style kan banyak. nah ditaronya di yg mana ya?
    • Igniel
      2/9/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang ada dalam tag kondisional halaman post.
  • Kang Nolep
    30/7/21
    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/4/21
    Profil: https://www.blogger.com/profile/07187641116593193975
    Mba igniel ada tutorial cara buat page navigasi didalam artikel ga? Buat mendekin artikel yang panjang.
  • Unknown
    9/4/21
    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/1/21
    Profil: https://www.blogger.com/profile/15530518687137342981
    engga muncul di pencarian dan di halaman label kenapa ya??
  • GRAD
    10/12/20
    Profil: https://www.blogger.com/profile/14968232197495970328
    tombol paginationnya pada halaman arsip kok nggak work ya min?
  • Pownime
    27/11/20
    Profil: https://www.blogger.com/profile/15530518687137342981
    Gan untuk di seacrh label nya engga tampil kok ya?
  • Bpnclassicguitar.bpogspot.com
    15/9/20
    Profil: https://www.blogger.com/profile/09697570807038072262
    Terima kasih min, lgsung update
  • Fadell
    8/6/20
    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
    1/5/20
    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/4/20
    Profil: https://www.blogger.com/profile/03768382552947955413
    Kalau tanpa Nomor bagaimana mbak? Sy butuh yang tanpa nomor
  • Abbas Thok ThilL
    11/3/20
    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
    9/2/20
    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/1/20
    Profil: https://www.blogger.com/profile/04765876783468140169
    Mantab, trimaksih gan...
  • F13an1
    19/1/20
    Profil: https://www.blogger.com/profile/12557639394287796173
    work tetapi saya cek di handphone tampilannya tidak beraturan
    • Igniel
      22/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan CSS disimpan di dalam tag kondisional global, bukan di dalam tag kondisional halaman tertentu.
  • Mas Operator
    7/1/20
    Profil: https://www.blogger.com/profile/15812777906641831653
    work, makasih
  • A M I R
    1/12/19
    Profil: https://www.blogger.com/profile/01276038301132275391
    terima kasih atas ilmunya
  • Endoy
    12/9/19
    Profil: https://www.blogger.com/profile/01755943924350127453
    Mantab infonya berguna sekalia terima kasih
  • Ananda Narayana
    1/9/19
    Profil: https://www.blogger.com/profile/05533576786081253710
    di template soho bawaan gak bisa mbak ?
    • Igniel
      1/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa di semua template.
  • Admin
    10/4/19
    Profil: https://www.blogger.com/profile/15527704996543893327
    kok nggak bisa ya?
    • Igniel
      11/4/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau pasangnya sesuai tutorial pasti jalan
  • Admin
    17/3/19
    Profil: https://www.blogger.com/profile/10770083315732140657
    terima kasih mbak igniel, langsung diterakan di blog saya , sensudesu.com
  • Centervote
    12/3/19
    Profil: https://www.blogger.com/profile/04635152651711934566
    mantull (y)
  • sobat-software.blogspot.com
    28/10/18
    Profil: https://www.blogger.com/profile/10159113786324085183
    Thx gan, langsung work di blog ane.