Membuat Tulisan Tidak Bisa Diseleksi Untuk Mencegah Copy Paste Pure CSS

Script Tulisan Tidak Bisa Diseleksi Dan Tidak Bisa Dicopy Paste

Gimana perasaan kamu kalau artikel yang sudah dibuat susah payah akhirnya didupikat orang lain? Sakit hati dan kesel kan?! Nggak sedikit dari mereka yang sadis banget, yaitu copy paste tulisan blog tanpa dimodifikasi sedikitpun. 100% sama dengan artikel aslinya. Akhirnya kamu nggak bisa berbuat banyak selain melapor pada Google dan berharap blog sang pengcopy paste terkena penalti. Kalau hal itu nggak berhasil, ujungnya kamu hanya bisa merelakan artikel copy paste tersebut muncul dimana-mana. Makanya, kamu sebagai pembuat konten dituntut untuk lebih meningkatkan keamanan blog.

Kali ini blog Igniel akan berbagi trik sederhana yang sedikitnya bisa meningkatkan keamanan blog, khususnya dalam hal anti copy paste. Triknya sederhana banget, karena hanya berupa kode CSS. Ini bisa digunakan di semua platform seperti Blogger, Wordpress, dan lainnya. Kodenya untuk membuat tulisan blog tidak bisa diseleksi.

Cara Membuat Tulisan Tidak Bisa Diseleksi Agar Tidak Bisa Dicopy Paste

Berikut langkah-langkah untuk platform Blogger. Untuk platform lain, silakan pergi ke pengaturan CSS masing-masing.
  1. Masuk ke menu HTML
  2. Klik tombol Edit HTML
  3. Tekan CTRL + F bersamaan pada keyboard untuk memudahkan pencarian. Carilah kode CSS dari BODY.
  4. Kalau di dalamnya sudah ada kode CSS, JANGAN DIHAPUS! Tambahkan deretan kode berikut ke dalam CSS dari BODY tersebut. Sehingga hasil akhirnya kurang lebih jadi seperti ini.
    BODY {
     user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     -khtml-user-select:none;
     -webkit-user-select:none
    }
  5. Jangan lupa tekan tombol Save theme

Karena kodenya disimpan didalam BODY, maka setiap tulisan yang ada di blog bener-bener nggak bisa diseleksi semua. Jadi buat blog tutorial yang biasanya punya Syntax Highlighter agak nyebelin nih, karena kode dari blognya malah nggak bisa dicopy oleh pembaca.

Kalau kamu mau membuat tulisan tidak bisa diseleksi pakai CSS HANYA di beberapa bagian, coba deh kode yang dibawah ini. Syaratnya, kamu harus sedikit paham (sedikit aja kok) dan ngerti tentang tag HTML. Misalnya gini. Di hampir semua template Blogspot yang beredar, isi artikel disimpan di dalam div yang memiliki class .post-body. Maka kalau hanya ingin membuat tulisan tidak bisa diseleksi HANYA di area tersebut, kode CSSnya adalah:
.post-body {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}

Dalam CSS, id diwakili oleh tanda pagar #
Dan class diwakili oleh titik .

Jika tag HTML dengan id <div id="post-body">
Kode CSSnya: #post-body

Jika tag HTML dengan class <div class="post-body">
Kode CSSnya: .post-body

Sedangkan kode dibawah ini untuk kebalikannya, yaitu mengaktifkan seleksi tulisan. Simpan dimanapun kamu mau, tergantung dari id dan class yang digunakan. Saya contohkan agar fitur seleksi aktif di bagian Syntax Highlighter Blogspot yang biasa menggunakan pre dan code.
.post-body pre code {
 user-select:text;
 -moz-user-select:text;
 -ms-user-select:text;
 -khtml-user-select:text;
 -webkit-user-select:text
}

Sederhana kan cara aga artikel postingan tidak bisa diseleksi dengan CSS diatas? Langsung praktekan ya. Semoga dengan ini sedikit menambah kemungkinan blog tidak bisa dicopy paste.

Artikel Terkait

17 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Kanx Ifoel
    4/3/21
    Profil: https://www.blogger.com/profile/18024606962931193839
    Ini ni yg saya cari.. Terima kasih mbak ilmunya, semoga berkah.. 🙏
  • Sakukurata
    13/1/21
    Profil: https://www.blogger.com/profile/14282057837304352647
    Oh, kolo saya pakai violoncello
  • Rubah bulan
    12/1/21
    Profil: https://www.blogger.com/profile/12104611664884459596
    Hahaha, gua bisa copy lu pake textbrowser😊
  • Apriyani Bylla
    17/7/20
    Profil: https://www.blogger.com/profile/09695185491530974878
    BODY {
    user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none
    }


    Tapi kok saya otomatis ya kak.. Jadi syntax hilightnya normal ajah cuman text body doang yang gak bisa dicopy.. Padahal saya cuma nambahin code pertama doang, Lucky :V
    • Sadikur Rahman
      7/10/20
      Profil: https://www.blogger.com/profile/12720932664960749220
      How i contact with you?
  • BangNof.com
    21/4/20
    Profil: https://www.blogger.com/profile/08312734998539890850
    Terimakasih mbak. Cara ini juga saya gunakan pada blog saya meski menggunakan WP cek bangnof.com
  • Faaris Muda
    9/2/20
    Profil: https://www.blogger.com/profile/06330408544305453982
    kadang ngerasa percuma masang karna di firefox ada mode reader view
  • Trial MembƎr
    14/7/19
    Profil: https://www.blogger.com/profile/15515183494785880008
    Thanks mbak, saya pakai cara pertama. Work!
  • Mas Ari
    30/4/19
    Profil: https://www.blogger.com/profile/15352095659481926903
    mbak cara biar beberpa kaliamat biar bisa di copy bagaimana ia?
    blm ngerti saya.
    cuman ngerti bagian kode pertama dan ke dua saja
  • SYBER
    12/4/19
    Profil: https://www.blogger.com/profile/16306120554651388837
    Saya masih pemula jadi masih kurang paham..
    Soalnya dengan menempatkan kode html yang terpotong potong itu sangat rumit..
    Edit html juga di potong potong jadi bingung we
  • Marthunis
    4/2/19
    Profil: https://www.blogger.com/profile/17198531567968815543
    Untung Ada email langganan artikel buat copas, hehehe bercanda
    • Igniel
      4/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Percuma kalo feed diset short. Cuma dapet 100-200 karakter pertama. Karakter loh bukan kata.
  • Nucky
    14/3/18
    Profil: https://www.blogger.com/profile/01010359403355701052
    keren teman saya akan coba nanti di blog saya ..
  • Robin
    3/3/18
    Profil: https://www.blogger.com/profile/04087260289119072340
    mbak, supaya gambar gak bisa di loading ketika di klik gmna ya mbak?
  • mbok dolan
    21/2/18
    Profil: https://www.blogger.com/profile/00533933211881717688
    mbak igniel, kalau untuk kode html yang dikotak itu bisa di copas gmn caranya? apakah pakai yang cara ke dua itu kah?
    • Igniel
      21/2/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cara ketiga mas. Yang .post-body pre code
  • Yuli Aenuropiq
    16/2/18
    Profil: https://www.blogger.com/profile/08562586688709429767
    makasih mba igniel artikelnya membantu sekalii

    ini nih nanti saya coba dehh...ada beberapa artikel saya yang dicopas...nnanti pake jurus iini nihh...hheheh