Tuesday, May 21, 2013

Anti Copy Paste WEB/BLOG

Sobat teens.
Nih buat kalian yang punya web/blog, pada saat kalian punya post tiba - tiba di copy-paste di blog orang lain gimana ?
Kesel gak ?
Curhat dikit nih sob. Ada blog sebelah yang copy-paste dari artikel gua. Kesel, marah ahh campur aduk semuanya :(
Apalagi sekarang gue daftar Google Adsense, kan ga boleh copy-paste. Takutnya ntar yang di tuduh copy-paste punya gue sob. Selain kita rugi, juga sulit buat daftar adsense sob.

Anti Copy-Paste
Pict. by http://pasarwebsite.blogspot.com/


Gue punya solusi yang jitu sob. Simak baik - baik ya.
Nah ada dua pilihan buat kalian nih sob, kalian bisa menggunakkan javascript atau CSS3.
Sekarang cara untuk javascript dulu ya:

JavaScript

<script type="text/JavaScript">
 //courtesy of BoogieJack.com
 function killCopy(e){
  return false;
 }

 function reEnable(){
  return true;
 }
 
 document.onselectstart=new Function ("return false")
 if (window.sidebar){
  document.onmousedown=killCopy
  document.onclick=reEnable
 }
</script>
Nah sob, untuk cara ini, kalian bisa menempatkan di atas tag </head> kalian. Atau di dalam antara tag <body> dan </body>.
Cara ini adalah cara flexible, karena kalian bisa menempatkannya di mana saja pada dokumen HTML kalian. Tapi saran aja nih sob, tempatin kode JavaScript ini tempatkan di dalam antara tag <body> dan </body> aja sob biar load website kalian cepet.

CSS

Nah sekarang gue kasi script buat CSS3 nih sob:
.namakelas{
 -webkit-touch-callout: none;
 -webkit-user-select: none; /* Webkit */
 -moz-user-select: none;    /* Firefox */
 -ms-user-select: none;     /* IE 10+  */

 /* saat ini opera belum mendukung */
 /* mungkin sebentar lagi akan mendukung CSS3 ini */
 -o-user-select: none;
 user-select: none;
}
Untuk penjelasan pada baris pertama, kita bisa lihat di sana ada script CSS untuk kode kelas, yaitu dengan ditandai tanda titik ".", nama kelas ini bisa kalian ganti dengan nama kelas atau ID (dengan ditunjukkan oleh tanda pagar "#") sesuai kebutuhan kalian.Nah nama class atau ID untuk CSS ini diletakkan sesuai kebutuhan kalian.

Contohnya kalian ingin meletakkan di tempat khusus dengan nama kelas yaitu <div class="namakelas">Contoh dokumen</div>, seperti contoh CSS yang ditulis di atas. Nah maka untuk kelas yang bernama "namakelas" tadi tidak akan bisa di blok atau di pilih oleh pengunjung sob. Contohnya seperti tulisan di dalam posting gue ini. Coba kalian blok atau sorot atau kalian pilih dengan cara men-drag mouse kursor kalian di tulisan. Pasti tidak bisa. Hehehehe :D

Ada yang bertanya kenapa di atas memakai value "none", karena simple aja bro, supaya tidak bisa di blok oleh pengunjung.


Loh, terus kalo biar bisa di blok lagi gimana caranya ?
Tenang aja sob, gue juga punya kok. Nah dalam kasus ini, kalian akan bisa memberi daerah mana saja yang boleh diblok oleh visitor, contohnya seperti Syntax Highlighter di atas, coba kalian sorot, seperti yang kalian lihat, tulisan di dalam Syntax Highlighter di atas bisa disorot dengan normal kan ? Kalian bisa memberi perhatian khusus buat daerah yang kalian inginkan. Caranya seperti di bawah ini:
.bolehsorot{
 -webkit-touch-callout: text;
 -webkit-user-select: text; /* Webkit */
 -moz-user-select: text;    /* Firefox */
 -ms-user-select: text;     /* IE 10+  */

 /* saat ini opera belum mendukung */
 /* mungkin sebentar lagi akan mendukung CSS3 ini */
 -o-user-select: text;
 user-select: text;
}
Kode CSS di atas untuk mengijinkan visitor untuk menyorot kode kalian di dalam kelas "bolehsorot". Kelas ini secara khusus akan dengan normal lagi bisa disorot bro.
Untuk penjelasan udah jelas kan :) hampir sama seperti penjelasan di atas kok.

Nah gimana sobat ??
Tapi di antara pilihan di atas, kalian bisa mengetahui kelemahan dan keuntungan masing - masing dari javascript maupun CSS3 di atas.
Untuk perbandingan keuntungannya kita bisa melihat tabel di bawah ini:

Kelebihan
JavaScript CSS
Kita bisa memfilter browser apa saja yang bisa menyorot konten kita dengan JavaScript. Kita bisa memfilter browser apa saja yang bisa menyorot konten kita dengan CSS.
Kita bisa memberi peringatan dengan cara menambahkan alert untuk ditampilkan supaya ketika visitor menyorot konten, lalu kaluar alert untuk memberi peringatan.Kita bisa memilih bagian mana saja yang boleh disorot maupun yang tidak boleh disorot dengan mudah menggunakkan filter kelas ataupun ID.
Kita bisa menambah script JS supaya tidak bisa diklik kanan untuk copy text. Website kita lebih cepat loading apabila menggunakkan CSS daripada JS, karena CSS langsung terintegrasi dan menempel dengan tag HTML.
Visitor tidak bisa mematikan fitur CSS di browser.

Selain ada nilai plus, pasti ada nilai minusnya dong ya, nah di bawah ini ada kekurangan apabila kita menggunakkan JS ataupun CSS:

Kekurangan
JavaScriptCSS
Visitor bisa dengan mudah menonaktifkan fitur javascript di browser.Tidak semua browser mendukung CSS3.
JavaScript membuat loading page lama.Belum semua browser yang mendukung CSS3 untuk user-select, contohnya opera.
Meskipun kita menggunakkan alert untuk memperingatkan pengunjung agar tidak bisa klik kanan atau aksi lainnya, visitor bisa memberi centang pada tulisan "Prevent this page from additonal dialogues" sehingga alert tidak bisa muncul atau tidak aktif lagi.Hanya browser terbaru / update saja yang bisa membaca syntax CSS3.

Nah, dari perbandingan kekurangan dan kelebihan di atas, kalian bisa menyimpulkan sendiri sob. Kalian mau pake JS atau CSS.
Kalo gue sih suka pake CSS karena sebab - sebab di atas.
Terserah kalian mau pilih yang mana, tapi ini sesuai dengan kebijakan kalian ya sob :)

4 comments:

  1. Bisa ga ya, dalam tulisan tertentu saja yang ga bisa di copy paste tapi pada tulisan/postingan lain masih bisa copy paste???
    tx

    ReplyDelete
    Replies
    1. tergantung browsernya juga mas
      kalo browsernya mendukung css3 atau javascript (tergantung pemakaian) ya bisa bekerja :)

      Delete
  2. Makasih ya bang infonya. Terus maju Teens Sharing ..

    Blog Walking ya bang .. http://belomlulus.tk

    ReplyDelete
  3. Makasih gan, http://blog-medianet.blogspot.com/

    ReplyDelete