Navigasi Halaman dengan Keyboard

Tabel Konten
  1. Menambahkan Efek Aktif (Seperti Tertekan) 

Sisipkan kode ini di atas </head> atau di atas </body> pada editor templat Anda, lalu simpan perubahan:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            win.location.href = pager.children[0].href;
            return false;
        }
    };

})(window, document);
//]]>
</script>

Sekarang Anda akan bisa melakukan navigasi menggunakan tombol panah kanan atau kiri pada keyboard. Ini cuma berlaku untuk markup HTML navigasi halaman Blogger yang masih standar. Untuk navigasi halaman yang sudah mengalami perubahan mungkin akan memerlukan sedikit modifikasi, terutama pada bagian nilai variabel pager di dalam kondisional switch.

Menambahkan Efek Aktif (Seperti Tertekan) 

Dengan cara menambahkan kelas active pada navigasi halaman ketika tombol panah kanan dan/atau kiri ditekan, maka kita bisa menciptakan efek aktif/tertekan palsu melalui kelas tersebut:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };

})(window, document);
//]]>
</script>
#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  background-color:red;
  color:white;
}

Demonstrasi bisa Anda lihat di sini. Pastikan Anda sudah berada dalam keadaan terfokus pada area ketika hendak menekan tombol panah kanan dan kiri:

Lihat Demo

Metode ini mungkin tidak cocok untuk diterapkan pada blog yang bersifat umum karena akan mengganggu fungsi tombol keyboard yang asli. Lebih baik terapkan pada blog-blog yang bersifat pribadi saja.

10 Komentar

  • Admin

    wah ini cocok buat blog komik nih :-bd

  • IRIL SAGITA

    Aku coba berhasil kak, tapi jika ingin navigasi atas dan bawah tidak di fungsikan apakah memotong bagain ini :

    doc.onkeydown = function(e) {
    };
  • Unknown

    Coba dulu :-bd

  • Unknown

    wah untuk pribadi sih kayanya oke juga nih mas :)

  • Yonda Wahyu

    Wah, mantep mas.. :)

    • Unknown

      wah keren ijin copy yang bang,
      Rencana mau dishare ulang

  • Unknown

    Bagus kk, tapi kalau ditambah fitur buat newer oldernya untuk post yang selabel saja gimana caranya kakak ?

  • tai

    Kayaknya yang buay pos manusia setengah kode nih :D , gilaa sampe bisa bikin kayak gini. BTW Nice bisa buat jadi referensi

Komentar telah ditutup.