Memperbaiki Navigasi Nomor Halaman Blog Blogspot

Page navigation merupakan menu yang cukup penting. Dengan menu ini dapat memudahkan pengunjung kita dalam menelusuri artikel-artikel kita pada semua halaman. Page navigation menunjukkan halaman aktif yang sedang kita kunjungi menggunakan nomor halaman.

Dari hasil penelusuran, saya menemukan beberapa situs khususnya situs berflatform blogger menggunakan page navigation yang kurang baik termasuk situs saya. Sehingga saya memutuskan untuk melakukan perbaikan terhadap page navigation yang saya gunakan.

Dari hasil penelusuran saya menemukan sebuah kekurangan yaitu page navigation yang digunakan tidak berjalan baik pada versi mobile. Tapi pada versi desktop, page navigation berfungsi dengan benar. Apa yang terjadi?. Pada versi mobile, saat klik tombol next atau tombol “2” pada halaman utama (home), kita akan menuju ke halaman berikutnya. Tapi, jika kita perhatikan page navigationnya, bukan tombol “2” yang aktif melainkan tombol “1”. Bukan hanya itu, saat kita klik tombol “next” lagi pada halaman “2” maka kita akan tetap ada di halaman “2”. Begitu seterusnya. Silahkan periksa menu ini pada situs anda, khususnya pada versi mobile ya.

Cara Memperbaiki Navigasi Nomor Halaman Blog

Untuk memperbaiki page navigation situs kita, saya menyarankan untuk mengganti page navigation yang kita gunakan saat ini. Berikut cara untuk memperbaiki page navigation kita.

1. Buka dasbor blogger>>Template. Masuk ke menu "Edit HTML". Kemudian, salin kode css berikut tepat di atas teks */]]></b:skin>.

.showpageNum a,.showpage a{background:#999;text-decoration:none;white-space:nowrap;color:#ffffff;margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out}

.showpageNum a:hover,.showpage a:hover{color:#ffffff;text-decoration:none;background:#47AADD}

.showpageOf{display:none;margin:0}

.showpagePoint{color:#ffffff;text-decoration:none;background:#47AADD;font:20px "PT Sans Narrow";margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out

}

@media only screen and (max-width:640px){

.blog-pager,#blog-pager{font:14px "PT Sans Narrow";}}

Jika kita punya kode css yang sama seperti di atas, silahkan dihapus terlebih dahulu ya.

2. Cari kode id='threaded_comments' var='post'.

Salin kode javascript berikut di bawah kode id='threaded_comments' var='post'.

<script type='text/javascript'>

    var postperpage=10;

    var numshowpage=5;

    var upPageWord =&#39;&#171; Previous &#39;;

    var downPageWord =&#39;Next &#187;&#39;;

    var urlactivepage=location.href;

    var home_page=&quot;/&quot;;

  </script>

<script src='http://yourjavascript.com/218437119/halamanav.js' type='text/javascript'/> 

Catatan:
Silahkan sesuaikan kode berikut sesuai kebutuhan kita.

    var postperpage=10 : Jumlah postingan/artikel yang tampil per halaman.

    var numshowpage=5 : Jumlah nomor halaman maksimal yang ditampilkan.

Supaya lebih jelas, silahkan lihat gambar berikut ini.

Jika sudah, silahkan simpan template. Kemudian lihat blog pada versi mobile untuk melihat perubahan.

Selamat mencoba dan semoga berhasil menerapkan cara di atas ya.