Disable Right Click Part II (Updates!!!)
Hari ini aku lawat GengBlogger dan ada satu isu panas. Pasal plagiat dan photocoy. Sian budak tu. Mungkin baru kot dalam dunia blog ni. Apa pun, good luck pada yang berkenaan. So, aku tertarik untuk udates(UPDATES=huruf P kat kibod aku ni memang sengal sikit) antara kaedah-kaedah yang boleh kita gunakan untuk menghalang isi dan gambar di blog kita daripada ditiru atau dicuri.
Ada kaedah mudah iaitu guna watermark. Tetapi itu hanya untuk gambar. (Klik SINI untuk download Alamoon Watermark). Bagaimana dengan yang lain?
Di awal blog ini, ada satu post yang diberi nama Disable Right Click. Apa itu "Disable Right Click"? Pergi ke post itu penerangan lebih lanjut.
Kali ini, beberapa kaedah lagi akan diberi untuk tajuk post ini. Mudah dan berkesan.(TETAPI, kaedah right click tetap boleh digunakan sekiranya blog anda mempunyai shoutbox atau sebarang kotak chat)
Anda ingin gunakan kaedah ini pada blog anda? Jom ikut langkah berikut.
Kaedah Pertama: Disable Right Click Or Drag Picture
Pergi ke Blogger Dashboard >> Layout >> Edit HTML dan anda cari tag <body>.
Tambahkan kod di bawah kepada tag di atas:-
oncontextmenu="return false" onselectstart="return false" ondragstart="return false"
dan tag body akan kelihatan seperti berikut:
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
Kaedah Kedua: Disable Right Click Or Drag Picture II
Pergi ke Blogger Dashboard >> Layout >> Add A Gadget >> HTML/Javascript. Kemudian masukkan kod di bawah ke dalam kotak HTML/Javascript.
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
Klik "Save".
Kaedah Ketiga: Copyright Notice When Clicking On Image
Pergi ke Blogger Dashboard >> Layout >> Add A Gadget >> HTML/Javascript. Kemudian masukkan kod di bawah ke dalam kotak HTML/Javascript.
<script language="JavaScript" type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
//-->
</script>
Klik "Save". Dan bila setiap kali anda ingin masukkan gambar dalam post anda, akan kelihatan tag untuk gambar seperti berikut:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJX1F6pnSM_aEoA_J0bnAheRacFvTRcP1Zcxt5CVgz3nhFeXxl3Unzxl50h_UXj7lD4KH8NHKfkj_9ME5KJ75nAFPEXiltLifED4MeOK1tsa-Kfmjslk1C_dQ2tl7OPfGfikvBUcDTO5G/s1600-h/love.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJX1F6pnSM_aEoA_J0bnAheRacFvTRcP1Zcxt5CVgz3nhFeXxl3Unzxl50h_UXj7lD4KH8NHKfkj_9ME5KJ75nAFPEXiltLifED4MeOK1tsa-Kfmjslk1C_dQ2tl7OPfGfikvBUcDTO5G/s320/love.jpg" /></a></div>
Tambahkan kod ini:
onMouseDown="popupMsg('HakCipta Terpelihara -- TycoBlogger 2010')"
selepas tag gambar yang saya highlightkan seperti di atas. Maka tag gambar anda nanti akan kelihatan seperti di bawah:-
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJX1F6pnSM_aEoA_J0bnAheRacFvTRcP1Zcxt5CVgz3nhFeXxl3Unzxl50h_UXj7lD4KH8NHKfkj_9ME5KJ75nAFPEXiltLifED4MeOK1tsa-Kfmjslk1C_dQ2tl7OPfGfikvBUcDTO5G/s1600-h/love.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJX1F6pnSM_aEoA_J0bnAheRacFvTRcP1Zcxt5CVgz3nhFeXxl3Unzxl50h_UXj7lD4KH8NHKfkj_9ME5KJ75nAFPEXiltLifED4MeOK1tsa-Kfmjslk1C_dQ2tl7OPfGfikvBUcDTO5G/s320/love.jpg" onMouseDown="popupMsg('HakCipta Terpelihara -- TycoBlogger 2010')"/></a></div>
**NOTA** Highlight berwarna biru boleh ditukar mengikut kehendak anda. Klik gambar di bawah:-
Kaedah Keempat: Imej Bertindih
Kaedah ini agak rumit sedikit. Mula-mula, anda kene cipta satu titik yang latar belakangnya adalah transparent. Di sini aku buat satu dot yang berukuran 5x6 pixels.
Contoh di bawah:-
http://img222.imageshack.us/img222/465/dot.png (guna URL ini kalau malas nak buat titik sendiri)Gunakan kaedah tag image seperti di bawah:-
<table><tbody>
<tr><td background="URL GAMBAR YANG DIPOST" width="100"><img height="KETINGGIAN GAMBAR YANG DIPOST" src="URL GAMBAR TINDIH/TITIK" width="KELEBARAN GAMBAR YANG DIPOST" /></td></tr>
</tbody></table>
URL GAMBAR YANG DIPOST - Link untuk gambar yang akan anda postkan
KETINGGIAN GAMBAR YANG DIPOST - Ketinggian gambar yang akan dipost
URL GAMBAR TINDIH/TITIK - Link untuk gambar yang akan jadi penindih
KELEBARAN GAMBAR YANG DIPOST - Kelebaran gambar yang akan dipost
(Untuk KELEBARAN dan KETINGGIAN gambar, anda boleh lihat right click pada gambar tersebut dan click pada Properties atau Image Info)
Di bawah adalah contoh kaedah di atas. Right Click pada image dan click "Save Image As". Lihat hasilnya. Yang akan disimpan adalah "dot" dan bukan image yang tertera.
 |
Dan contoh tag image untuk gambar di atas adalah seperti di bawah:
<center><table><tbody>
<tr><td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqVP0OAftrN83tB7vq2V49jDOm5Pjn3ZlJ8sQQ9a3B-A-LdozrQD4oTgXJ_UyVdbXzb4mlY9aM5YJDzV30PTIUk6xTcAnQeLQa5ihoXNvvsp00OcWpqTK6bDkT45dBsU8-ui8ghtITaJn/s320/10196150-love-and-money.jpg" width="100"><img height="240" src="http://img222.imageshack.us/img222/465/dot.png" width="320"/></td></tr>
</tbody></table></center>
Demo untuk semua tricks di atas boleh anda lihat di sini.
Jadi, selamat mencuba.
Comments
Post a Comment