Membuat Navigasi Halaman Dengan Keyboard

Navigasi Halaman

DEMO

• DEMO KLIK DISINI

Membuat Navigasi Halaman Dengan Keyboard - Navigasi dengan keyboard mungkin anda
Sudah tidak asing dengan sebutan itu , karena tutorial Ini sudah di share di blog terkenal
Yang bernama dte, membuat widget ini sangatlah mudah, dan juga dapat membuat blog
menjadi lebih rapih

Langkah-Langkahnya : 

1. Cari Kode </body> atau </head>

2. Letakan kode dibawah ini diatas kode tersebut

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

    var pager;

    // 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>

3. Membuat Efek Aktif (Seperti Tertekan)

4. Letakan Kode Dibawah Ini Di HTML/Java Scriptt

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

    var pager;

    // 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;
}

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