Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya akan berbagi tips memperbolehkan klik kanan hanya pada blockquote/area tag pre untuk anda yang memiliki blog tutorial dan hanya ingin mengijinkan pengunjung untuk mengcopy kode saja.
Pertama silahkan buka pengaturan Template blog anda, cari kode tag <body> dan ganti kode tag tersebut dengan kode di bawah ini...
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>cara ini memiliki kekurangan, yaitu kotak penelusuran/pencarian bawaan dari template blog anda tidak akan berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika anda merasa bahwa kotak penelusuran itu sangat penting. atau anda dapat menggantinya dengan kotak penelusuran/pencarian kostum seperti google search/kotak pencarian dengn jQuery.
Kemudian, kita buat jQuery yang meriset element blockquote/pre agar ketika pointer menyorot/berada di area tersebut fungsi dari klik kanan di aktifkan. dan ketika pointer keluar dari area elemen tersebut fungsi klik kanan akan di nonaktifkan kembali. lihat contoh kode di bawah ini:
$(function() {
$('body').attr('oncontextmenu', 'return false;'); // mematikan fungsi klik kanan
$('blockquote').hover(function() { // menentukan element dengan hover
$('body').removeAttr('oncontextmenu'); // pengecualian alternatif klik kanan
}, function() {
$('body').attr('oncontextmenu', 'return false;'); // memfungsikan klik kanan pengecualian element
});
});contoh kode di atas saya eksekusikan dalam element blockquote, jika anda ingin menggantinya pada elemen tertentu, ubah saja kode $('blockquote').hover(function() yang mengandung blockquote dengan element yang anda inginkan, misalnya seperti pre, post, code dan lain sebagainya
Setelah itu kita bungkus kode sehingga menjadi seperti berikut:
<script type="text/javascript">
//<![CDATA[
$(function() {
$('body').attr('oncontextmenu', 'return false;');
$('blockquote').hover(function() {
$('body').removeAttr('oncontextmenu');
}, function() {
$('body').attr('oncontextmenu', 'return false;');
});
});
//]]>
</script>Letakkan kode di atas sebelum tag kode </body> dan simpan template anda.
Sebelumnya trik ini hanya sebuah percobaan saja, belum sempat saya uji, silahkan sobat coba jika ada masalah/tidak berfungsi tulis saja di komentar dan saya akan coba memperbaiki. Semoga sukses....
