We use cookie to improve your experience on our site. By using our site you consent cookies. See our Cookies Policy and Privacy Policy for more datails

√ 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>

See the Pen Simple Disable Copy Paste by Ahmad Ramadhan (@dhadhan) on CodePen.

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'>

See the Pen Advance Disable Copy Paste by allowing certain code to be copied by Ahmad Ramadhan (@dhadhan) on CodePen.

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.

1 komentar

  1. Merkur Gold Strike Safety Razor - FEBCASINO
    Merkur's septcasino.com Gold Strike https://febcasino.com/review/merit-casino/ Safety Razor, Merkur https://septcasino.com/review/merit-casino/ Platinum Edge Plated Finish, German, Gold-Plated, Satin wooricasinos.info Chrome https://tricktactoe.com/ Finish. Merkur has a more aggressive looking,
  1. Berkomentarlah dengan sopan, tidak Sara atau SPAM. Author berhak menghapus komentar & tidak dapat diganggu gugat.
  2. Komentar ini, diurutkan dari yang terbaru
  3. Tinggalkan komentar sesuai topik tulisan
  4. Tambahkan Response anda tentang artikel ini dengan menggunakan tag #Yes atau #No berserta alasannya
  5. Jika ada pertanyaan tambahkan tag #Ask
  6. Gunakan <i rel='pre'><!--[Parse Code]--></i> Untuk menambahkan Code(dalam bentuk parse HTML) pada komentar