Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » Desain » JavaScript » Navigasi Halaman dengan Keyboard

Navigasi Halaman dengan Keyboard

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:

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.

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias . Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!