Home » CSS » Optimasi Wordpress » Cara Mencegah Copy Paste Dengan CSS

Cara Mencegah Copy Paste Dengan CSS

15 Feb. 201279 comments
Cara Mencegah Copy Paste Dengan CSS

disable-klik-kananBanyak cara yang bisa dilakukan untuk mencegah copy paste content atau postingan blog, baik dengan menggunakan plugin atau tanpa plugin, menggunakan script php, javascript dll, tapi begitu mudahnya pula untuk mengakalinya seperti yang pernah saya bahas di postingan sebelumnya yaitu cara mengatasi disable klik kanan.

Beberapa bulan terakhir saya iseng-iseng pasang script CSS yang berfungsi menonaktifkan fungsi user-select pada mouse (mouse selection) sehingga pengunjung tidak bisa menyeleksi tulisan/teks menggunakan mouse kiri khususnya pada bagian postingan.

Karena postingan blog ini banyak yang berisi tutorial yang di dalamnya banyak script/code yang harus dishare maka pada bagian itu (bagian yang berisi script/code) harus tetap bisa dicopy paste. Hal ini sebenarnya sudah saya antisipasi dengan cara membuat conditional tag yakni pada bagian element <pre> </pre> (elemen untuk menempatkan script/code) pada blog ini masih tetap bisa dicopy codenya.

Dengan conditional tag alhamdulillah bisa berjalan di browser Chrome. Namun untuk Firefox conditional tag-nya ternyata tidak berfungsi (bagian yang berisi script/code tetap tidak bisa dicopy), ini benar-benar di luar dugaan saya karena saya lebih sering menggunakan Chrome, dan baru saya ketahui seminggu yang lalu setelah banyak yang protes tidak bisa copy code dari blog ini. Pada kesempatan ini sekaligus saya mohon maaf, jika beberapa pengunjung ada yang mengalami kesulitan dengan copy paste script/code khususnya ketika menggunakan Firefox. Namun masalah ini sudah bisa saya atasi yakni dengan menonaktifkan fungsi user-select hanya pada elemen  yang mengandung syntax <p> </p> (paragraph), sedangkan untuk <pre> </pre> (elemen untuk menempatkan script/code) masih tetap bisa dicopy codenya.

Gara-gara saya menonaktifkan fungsi user-select (pengunjung tidak bisa menyeleksi tulisan/teks menggunakan mouse kiri) ternyata cukup banyak yang menanyakan cara pasangnya. Walau sebenarnya cara ini sudah cukup lama ada dan sudah banyak yang mempostingnya namun masih banyak juga yang belum tahu caranya. Dan berikut ini script/code CSS yang saya gunakan :

display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
-o-user-select:none;
user-select:none;
unselectable:on;

Tambahkan script/code CSS tersebut pada bagian properties dari sebuah ID atau class yang akan dinonaktifkan mouse seleksinya, misalnya jika akan diterapkan di semua elemen dari blog dari ujung rambut sampai ujung kaki, kita bisa menambahkan kode tersebut pada properties body :

body{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
unselectable:on;}

Atau misalnya hanya pada bagian postingan saja silahkan tambahkan code tersebut pada properties dari ID atau class dari postingan, untuk wordpress biasanya menggunakan ID atau class.post atau ada juga yang menggunakan .post .content, silahkan disesuaikan dengan masing-masing theme. Untuk blog tutorial yang berisi script/code yang akan dishare sebaiknya script/code untuk mendisable user-select ditempatkan pada tag <p> </p> (paragraph) pada bagian postingan supaya bagian elemen <pre> </pre> (elemen untuk menempatkan script/code) agar masih tetap bisa dicopy (kebetulan saya pakai cara ini). Jika class dari <p> </p> (paragraph) pada bagian postingan belum ada di file CSS, kita bisa menambahkannya, caranya :

Cari ID atau class postingan, misalnya untuk theme yang saya gunakan ini (theme Inove) class pada postingan bernama .post .content kemudian kita buat class tersendiri menjadi .post .content p (ditambahkan huruf p dibelakangnya) selanjutnya masukkan script/code CSS untuk mendisable user-select pada properties dari class yang telah kita buat tadi, code keseluruhan menjadi :

.post .content p{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
-o-user-select:none;
user-select:none;
unselectable:on;}

Penjelasan dari code di atas :

Untuk Webkit, syntaxnya :

-webkit-user-select: auto | none | text

auto : user dapat menyeleksi conten dari sebuah element.
none : user tidak dapat menyeleksi conten (disable user-select).
text : user dapat menyeleksi text dari sebuah element.

Contoh :
user dapat menyeleksi conten dari sebuah element :

p {-webkit-user-select: auto;}

user tidak dapat menyeleksi conten (disable user-select) :

p {-webkit-user-select: none;}

user dapat menyeleksi text dari sebuah element :

p {-webkit-user-select: text;}

Untuk Gecko/Firefox syntaxnya :

-moz-user-select: none | text | all | element

Untuk Internet Explorer 10 syntax yang biasa digunakan :

-ms-user-select: none | text | auto | element

none : user tidak dapat menyeleksi conten (disable user-select).
text : user dapat menyeleksi text dari sebuah element.
auto : user dapat menyeleksi conten dari sebuah element.
Catatan :

  • Cara ini ternyata tidak bisa diterapkan di browser Opera (tidak berfungsi), walaupun sudah ditambahkan parameter yang biasa digunakan di browser Opera, atau ada yang tahu caranya dan ingin menambahkan? saya akan sangat berterima kasih.
  • Mohon dikoreksi jika penjelasan saya tentang user selection ini ada yang kurang pas atau kurang tepat.

Cara mengatasi  disable user-select :

Seperti yang saya singgung di atas, banyak cara yang bisa dilakukan untuk mencegah copy paste content atau postingan blog, baik dengan menggunakan plugin atau tanpa plugin, menggunakan script php, javascript, CSS dll, tapi begitu mudahnya pula untuk mengakalinya.

Demikian halnya dengan cara ini, meskipun sudah diterapkan disable user-select (mouse selection tak berfungsi) cara ini bisa disiasati dengan menggunakan browser jadul yang tidak support CSS3, Opera atau jika menggunakan Firefox klik menu View pilih Page Style kemudian klik/pilih yang No Style, maka dalam sekejap semua fungsi CSS tidak akan berfungsi termasuk disable user-select (mouse selection).

Selanjutnya yaa terserah anda apakah mau copas atau tidak, dalam hal ini saya tidak mengajarkan copas dalam arti yang negatif yaitu aktifitas salin tempel postingan orang lain kemudian dipublish di blog sendiri atau orang lain tapi tanpa menyertakan/menyebutkan link sumbernya. Kalau copas dari blog sendiri yaaa gak apa-apa atau copas blog orang lain tapi hanya untuk dikonsumsi dan dibaca sendiri di komputer lokal misalnya.

Cara Mencegah Copy Paste Dengan CSS Reviewed by: Mas Alwi on Rating : 5
Mudah-mudahan artikel tentang Cara Mencegah Copy Paste Dengan CSS ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Membuat Efek Text Stroke Dengan CSS
  2. Bypass Template Path dan Stylesheet Path
  3. Yesterday, The Beatles
  4. Cara Mengganti Font Dalam Postingan
  5. Border Style, Border Width, Border Color
  6. Customisasi Tampilan Tag Cloud
  7. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  8. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  9. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  10. CSS Image Sprites Generator
  1. 2-11-2012 at 14:01 | #1

    terimakasih, sangat membantu dalam mencegah copy paste sembarangan ..

    Reply

  2. 26-1-2013 at 05:16 | #2

    ngapain sih ga boleh klik kanan tuh?
    oh ya bolg saya ga mutu punya recept ga untuk menikkan mutu, bukan hanya tips seo lho, ga ada yang memberi tips bagaimana blogging yang bermutu

    Reply

  3. satriya
    5-2-2013 at 14:41 | #3

    wah bagus banget sharenya om,. ijin coba :D

    Reply

  4. 9-4-2013 at 21:34 | #4

    Aku pilih pakai plugin saja, terasa sulit bagi saya kalau pakai css!

    Reply

  5. 11-10-2013 at 12:59 | #5

    kalau misalkan ingin mengaktifkan fasilitas agar pengunjung bisa mencopy pada imagenya aja gimana ya mas?

    Reply

    Rey Reply:

    Kalau gambar bisa diklik kanan :D

    Reply

  6. 23-12-2013 at 23:47 | #6

    keren,,segera diterapkan,,makasih om :)

    Reply

  7. 16-1-2014 at 17:47 | #7

    satu lagi,, mantap tutorialnya. memang sangat menjengkelkan jika artikel kita di copas orang lain tanpa ijin.

    Reply

  8. 9-2-2014 at 21:12 | #8

    Masih bingung masangnya di blogspot

    Reply

  9. 22-3-2014 at 15:03 | #9

    tapi mas, kalo tidak bisa dikopi paste bukannya ada kelemahannya karena biaasanya visitor yang murni ingin berkunjung mungkin menyalin untuk tugas dsb

    Reply

  10. 9-4-2014 at 19:21 | #10

    Mantap mas infonya, perlu dan harus di coba nih…

    Reply

Comment pages
0+9=? (Wajib diisi)