Mecha versi 2.6.3 sudah dirilis!

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

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.