Cara Mencegah Copy Paste Dengan CSS
Banyak 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.
seperti biasa Pak, kaLo ga bisa seLect apaLagi copypaste, andaLannya a Ctrl+U (saya pake Firefox)
Reply
Ctrl+U juga sekaLigus mengatasi bLog yang ‘ga boLeh kLik kanan’
ini menurut saya…
Reply
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–
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
dllReply
Syndicate OS Reply:15-02-2012 at 17:11
Setuju sama mas hendro :D
Reply
djawa Reply:17-02-2012 at 15:07
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
Manteb terima kasih tipsnya pak..
Untuk yg gak bisa klik kanan saya kadang mematikan javascript di di browser sudah bisa..
Reply
emang kerugiannya apa kalau ada orang yang copas,pedahal kan berbagi lho,,
Reply
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
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
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
Reply
arkhananta Reply:16-02-2012 at 11:47
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)
Reply
arkhananta Reply:19-02-2012 at 12:30
alhamdulillah bisa kang, hatur nuhun pisan…
Reply
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
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