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


memperbaiki halaman navigasi 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.

bagian template blog

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

Selamat mencoba dan semoga berhasil menerapkan cara di atas ya.

11 comments:

  1. saya masih bingung mas.. soalnya di template saya class dan divnya beda, gimana apa harus dihapus semuanya yang berhubungan dengan page nav nya??

    ReplyDelete
  2. Wah udah tahun 2017 gan salam kenal

    www.edybagus.ga

    ReplyDelete
  3. terimakasih gan atas infonya, sangat bermanfaat, saya tunggu info selanjutnya, salam kenal?

    ReplyDelete
  4. min boleh tanya tentang edit template? saya sudah pasang template maverick
    ( http://maverick-beautytemplates.blogspot.co.id/?m=1 )

    tapi tidak muncul page navigation seperti live demo nya, sehingga cuma muncul 3 post aja (homepage).

    juga klo saya post tanpa pict gtu, gak muncul cuplikan post di homepage nya.
    yg ada cuplikan cuma postingan bergambar.

    ReplyDelete
  5. Di coba min mudah mudahan bisa blog saya jejaksipemalas mengalami masalah ini..

    ReplyDelete
  6. masih ngak work gan kalau di buka di hp,, padahal udah ngikutin tutor di atas, ane pake template evomagz coba deh agan liat di hp agan https://zonamirrow.blogspot.com

    ReplyDelete
  7. Terimakasih gan work di blog saya :D

    ReplyDelete
  8. Ah sorry salah tulis, ternyata masih gak work

    ReplyDelete
    Replies
    1. palingan gak cocok sama templatenya gan

      Delete
  9. Makasih um, akhirnya evo magz ane bisa d klik tombol next nya sama nomber page nya,,
    salam balik gan chandrasoekmawan.blogspot.com

    ReplyDelete