Mencegah Copy Paste dengan CSS

Semenjak blog sudah bisa dimonetize, acara copas mencopas artikel milik orang lain sudah menjadi tradisi yang susah dihilangkan. Disini saya coba berbagi dengan agan mengenai cara saya untuk membuat para copycat diluar sana lebih sulit untuk beraksi.

Mungkin pertanyaannya, "Nanggung amat, kenapa ga sekalian dicegah saja".

Jawabannya simple, karena sangat ga mungkin sekali untuk dicegah kecuali agan berhenti menulis atau berkarya.


Sebetulnya ada banyak cara yang bisa dilakukan untuk mencegah copas, kebetulan saya disini hanya menggunakan trik dari CSS. Karena menurut saya cara ini yang paling mudah digunakan dan paling mudah di customize.

Misalnya agan ingin semua tulisan yang ada di blog agan kebal dari kombinasi Ctrl+A, Ctlr+C dan berujung Ctrl+V. Silahkan agan tambahkan CSS dibawah ini pada blog agan, kalau agan menggunakan blogger bisa melakukannya dengan editing template atau menggunakan Blogger Theme Designer.

body {
 -webkit-touch-callout: none; /* iOS Safari */
 -webkit-user-select: none; /* Chrome, Opera, Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
 user-select: none; /* Standart syntax */
}

Setelah di simpan, maka seluruh bagian di blog agan tidak bisa di select dan di copy kecuali melalui view atau show page source.

Bagaimana kalau agan mempunyai blog tutorial atau programming yang tentunya banyak melibatkan source code. Sudah pasti banyak yang akan jengkel kalo source code yang agan sediakan tidak bisa di select dan di copy. Bisa jadi pengunjung akan berkurang. Dengan menggunakan trik ini agan ga perlu kuatir. Agan tinggal memasukkan CSS diatas dalam tag yang biasanya digunakan untuk menuliskan code seperti <code> atau <pre> . Bisa juga pada element html yang lainnya seperti<blockquote>. Singkatnya silahkan agan tambahkan Rule baru sbb:

blockquote, pre, code {
 -webkit-touch-callout: text; /* iOS Safari */
 -webkit-user-select: text; /* Chrome, Opera, Safari */
 -khtml-user-select: text; /* Konqueror HTML */
 -moz-user-select: text; /* Firefox */
 -ms-user-select: text; /* Internet Explorer/Edge */
 user-select: text; /* Standart syntax */
}

Dengan cara diatas, maka hanya bagian code saja yang bisa di copas, selebihnya tidak bisa. Selamat mencoba!.