Navigasi Halaman Dengan Keyboard - Dewa Blogger

Halaman

    Social Items

Buy Now

Navigasi Halaman Dengan Keyboard

Sisipkan arahan ini di atas </head> atau di atas </body> pada editor templat Anda, kemudian 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 dapat melaksanakan navigasi memakai 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 bab nilai variabel pager di dalam kondisional switch.

Menambahkan Efek Aktif (Seperti Tertekan)

Dengan cara menambahkan kelas active pada navigasi halaman saat tombol panah kanan dan/atau kiri ditekan, maka kita dapat membuat 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 dapat Anda lihat di sini. Pastikan Anda sudah berada dalam keadaan terfokus pada area saat hendak menekan tombol panah kanan dan kiri:

Lihat Demo

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


Sumber https://www.dte.web.id/