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


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~

Baca Juga