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. Cara Menggabungkan File CSS WordPress
  2. Cara Mengganti Background Theme WordPress
  3. Source Code Main Remi Bersama Top Komentator
  4. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  5. Free CSS Button Generator
  6. Bypass Template Path dan Stylesheet Path
  7. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  8. CSS3 Animation, Zoom In Zoom Out, Rotation
  9. Cara Mengganti Font Dalam Postingan
  10. Mempercantik Tampilan Code Snippets Dengan CSS
  1. 15-2-2012 at 13:51 | #1

    seperti biasa Pak, kaLo ga bisa seLect apaLagi copypaste, andaLannya a Ctrl+U (saya pake Firefox)

    Reply

  2. 15-2-2012 at 13:52 | #2

    Ctrl+U juga sekaLigus mengatasi bLog yang ‘ga boLeh kLik kanan’
    ini menurut saya…

    Reply

  3. 15-2-2012 at 15:24 | #3

    Sangat tidak di sarankan..lagipula itu repot banget css vendor prefiksnya..ane lebih baik pake pseudo elemen.

    Blog yang tidak bisa di kopas, itu adalah blog yang tidak berguna sama sekali untuk user.
    –eric meyers–


    Sebelum membuat postingan ini dan juga sebelum menerapkan cara ini sebenarnya saya sudah sangat sepakat dg pendapat –eric meyers– tsb, secara substansial adanya sebuah blog dg postingan2nya adalah untuk asas manfaat yg seluas-luasnya, dan postingan saya banyak yg dicopas dan dipublish ulang saya juga gak terlalu mempermasalahkannya asalkan kreditnya (link) tidak dihapus, kalau linknya pada dihapus sumber tak disertakan, kalau blogger baru gak apa2 mungkin krn blm tahu, la kalau blogger lama? mungkin agak sedikit kecut, spt code2 Bang Amdhas yg diklaim blogger lain tanpa memberikan kredit, masygul juga kaaan?

    Saya sadar secara teknis sebenarnya memang tidak ada cara yg ampuh untuk bisa mencegah copas content itu selama halaman bisa dilihat di view page source mau pake javascript, php, css sama aja, jadi apapun caranya sebenarnya tidak akan efektif atau malah mungkin akan sia2.

    Maksud postingan saya ini sebenarnya sbg Test Case saya sampai sejauh mana pengaruhnya (pengaruh mendisable user-select) bagi pengunjung terhadap postingan mana saja yg disukai pengunjung baik blogger atau non blogger itu bisa saya lihat dari adanya protes/pertanyaan melalu facebook, email, komentar blog dll.

    Postingan itupun sudah saya duga pasti ada yang pro dan banyak yg kontra kalau diterapkan heee …. dan kalaupun sampai tiba waktunya saya tanggalkan mendisable user-select-nya buka karena adanya pro atau kontra tapi karena masa Test Case-nya sudah selesai, makanya walaupun judul postingan ini Cara Mencegah Copy Paste Dengan CSS tapi di akhir postingan malah saya kasih keterangan juga cara menyiasatinya.

    Ini sekaligus sbg jawaban untuk pertanyaan yg sejenis di bawahnya spt pertanyaan/komentar dari Obat Luka Diabetes, Green KLOPERER, Rizkyzone.Com dll

    Reply

    Syndicate OS Reply:

    Setuju sama mas hendro :D

    Reply

    djawa Reply:

    dulu saya pernah pasang anti copas, namun sy cabut lagi karena berbagai alasan, saya juga sadar kalau artikel yg saya posting juga jarang yang seratus persen murni hasil ciptaan kita.,

    jangankan artikel, agama juga ada yang copas., buktinya sekarang sudah ada agama copas hehe.,
    biarlah orang lain copas artikel kita, toh yg akan menila cuma yg diatas, dia tau kapan postingan itu dipublish dan dia tau postingan hasil copas itu dipublishnya., :D

    Reply

  4. 15-2-2012 at 15:25 | #4

    Manteb terima kasih tipsnya pak..
    Untuk yg gak bisa klik kanan saya kadang mematikan javascript di di browser sudah bisa..

    Reply

  5. 15-2-2012 at 15:28 | #5

    emang kerugiannya apa kalau ada orang yang copas,pedahal kan berbagi lho,,

    Reply

  6. 15-2-2012 at 15:51 | #6

    ooo…begitu ya, pantes saja pas saya mau copy halaman tentang optimasi wordpress tidak bisa di select…emang tob markotob deh bang alwi ini…….

    Reply

  7. 15-2-2012 at 16:09 | #7

    klo pengunjungnya itu adalah user biasa yg lg nyari informasi2 penting trus pengen nyimpen ati nge print buat di jadiin bacaan di rumah/pengarsipan buat dia pribadi gimna? tuh,,apa benr itu bakalan jadi blogy g bermanfaat buat semua,,apalgi banyak pelajar yg cari referensi/artikel di blog2 artikel di internet,,giman nasib mreka? apa bakalan ngebantu mreka buat beresin tugasnya? justr malah bikin mreka repot

    Reply

  8. 15-2-2012 at 16:25 | #8

    kang, saya mau nanya laen topik, untuk blog yang hack cara mengatasinya gmn ya kang? saya dah cari-cari tutorialnya tapi ga ada yg berhasil,… sebelumnya terima kasih


    Coba ganti dulu username dan password wordpress lewat php myadmin bisa baca di postingan ini : Cara Mengganti Username Dan Password WordPress, terus coba ganti theme, kemudian periksa file index.php baik yg ada di root direktori atau yg di wp-content, kemudian periksa file .htaccess yg ada di root, mungkin bisa dicoba itu dulu

    Reply

    arkhananta Reply:

    udah saya ganti username dan Paswdnya kang, sesuai dengan panduan, tapi tetp ga bisa login ke wp kang.. (sebelum saya ganti username dan password ada nama yg ga saya kenal)


    File .htaccess dan index.php belum dicek kaaannnn …. sebab mau username dan password berapa kali kalau ada setting redirect file .htaccess atau index.php yaa tetap tidak akan bisa login, jika sebelum ganti username dan password ada nama yg ga dikenal kemungkinan itu nama yg dimasukkan oleh hacker apalagi kalau sudah disett sbg administrator bisa berabe, kalaupun ganti username dan passwords jadi percuma dia tetap bisa masuk nantinya jadi sebaiknya dihapus saja

    Reply

    arkhananta Reply:

    alhamdulillah bisa kang, hatur nuhun pisan…

    Reply

  9. 15-2-2012 at 16:28 | #9

    buat apa blog di proteksi dan yang harus di ingat adalah tidak semua netter itu narablog, lagian kalau mang artikel itu bagus yang ingin copas khususnya narablog pastinya nggak akan kehilangan cara supaya dapat itu artikel, sekedar pengalaman saja ketika saya jaga di sebuah warnet, saya saat itu belum bgt tahu dunia internet, ada beberap pelajar mencari tugas sekolah. next>>

    Reply

  10. 15-2-2012 at 16:29 | #10

    hampir tiga jam muter2 cari atikel belum ketemu, sekalinya ketemu ternyata arikel tersebut tidak bisa di copas, akhrinya minta bantuan saya karena saya masih belum bgt ngerti seputar inet saya waktu itu juga nggak bisa berbuat banyak untuk membantu pelajar tersebut, dan bisa di bayangin bukan, 3 jam lebih ngenet keluar dengan tangan hampa, betapa sedihnya itu pelajar karena tidak dapat artikel yang di cari, kesimpulannya apa gunanya blog seperti itu ? apakah itu blog bermanfaat, sedangkan di tulisan terakhir dari artikel tersebut tertulis “semoga bermanfaat” lantas dimana manfaatnya dari artikel tersebut ? bener kata bang amdhas “Blog yang tidak bisa di kopas, itu adalah blog yang tidak berguna sama sekali untuk user.
    –eric meyers–”

    Reply

Comment pages
1 2 3 8 2601
2+8=? (Wajib diisi)