√ Membuat Anti Copy Paste dengan CSS (Recommended)

Introduction

Css anti copy paste adalah code yang friendly dengan web loading, yang artinya ini tidak begitu mempengaruhi kecepatan website. Dan juga code anti copas ini juga dapat diterapkan pada halaman AMP.

Setup

Simple Usage

Anda hanya perlu copy paste code di bawah ke bagian tag style anda.

body{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none}

Taruh code tersebut di file css anda, saya akan berikan dua contoh blog biasa dan halaman AMP

AMP

<style amp-custom='amp-custom'>
   body{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none}
   
   ..../*Code css lainnya*/
   </style> 

Non-AMP

<style>
   body{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none}
   
   ..../*Code css lainnya*/
   </style>  

Dari kedua code tersebut yang berbeda hanya penempatan tag </style> saja. Jika halaman AMP taruh di bawah <style amp-custom='amp-custom'> dan begitu juga untuk blog biasa taruh code tersebut di bawah <style>

Advance Usage

Jika anda ingin bagian tertentu yang bisa di copy dan paste. Anda hanya perlu menambahkan code di bawah ini.

<style>
       body {
         user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none
       }
       .allow-copy { /*Pakai class "allow-copy" untuk membuat tag tertentu dapat di copy paste*/
         user-select: text;
         -moz-user-select: text;
         -ms-user-select: text;
         -khtml-user-select: text;
         -webkit-user-select: text
       }
   
       /*.... Code lainnya*/
   
   </style>    
    <div class="allow-copy">Anda bisa copy pada bagian ini</div> <!--Anda bisa mengganti tag div dengan tag lainnya dengan class="allow-copy" -->
   <div>Anda tidak bisa mengcopy bagian ini</div>  

Anda hanya perlu menambahkan class="allow-copy" pada setiap tag yang ingin dapat di copy dan paste. Lihat pen di bawah ini.

Dan juga jika anda ingin menempatkannya pada halaman AMP anda hanya perlu mengganti code <style> dengan <style amp-custom='amp-custom'>

Summary

Untuk membuat halaman anda tidak dapat di copy paste anda bisa menuju ke Simple Usage, Namun jika anda ingin tag tertentu yang bisa dapat di copy maka anda perlu ke bagian Advance Usage

Pada dasarnya ini semua sudah dapat diterapkan di CMS manapun seperti Blogger dan Wordpress atau CMS yang bahasa pemrogramannya code python dan juga dapat diterapkan di framework manapun seperti AMP dikarenakan kodenya sama.