Membuat Tulisan Tidak Bisa Diseleksi Untuk Mencegah Copy Paste Pure CSS

Cara membuat tulisan artikel di blog tidak bisa dicopy paste dengan script dan kode CSS. Tulisan dibuat agar tidak bisa diseleksi dan diblok.
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.
25
Membuat Tulisan Tidak Bisa Diseleksi Untuk Mencegah Copy Paste Pure CSS
Membuat Tulisan Tidak Bisa Diseleksi Untuk Mencegah Copy Paste Pure CSS
Cara membuat tulisan artikel di blog tidak bisa dicopy paste dengan script dan kode CSS. Tulisan dibuat agar tidak bisa diseleksi dan diblok.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

25 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Noer
    07 Desember, 2023
    Profil: https://www.blogger.com/profile/06748535559636391431
    Ngaruh ke trafik gak kak?
  • Zip
    06 Juni, 2022
    Profil: https://www.blogger.com/profile/16368072689704679044
    Tante..
    lagitu pernah copas css yg ini biar web ga bisa di seleksi. klo saya mau bikin Syntax Highlighter atau kode yg bisa di copas gmn tan..?
    ini lagi saya search artikel'nya blm ketemu2 soalnya
    • Igniel
      07 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Padahal di paragraf terakhir jelas banget.
  • Syaipullah.HS
    04 Maret, 2021
    Profil: https://www.blogger.com/profile/18024606962931193839
    Ini ni yg saya cari.. Terima kasih mbak ilmunya, semoga berkah.. 🙏
  • Sakukurata
    13 Januari, 2021
    Profil: https://www.blogger.com/profile/14282057837304352647
    Oh, kolo saya pakai violoncello
  • Unknown
    12 Januari, 2021
    Profil: https://www.blogger.com/profile/12104611664884459596
    Hahaha, gua bisa copy lu pake textbrowser😊
    • Igniel
      15 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bagus. Emang pinter lu, hebat 🙂
    • Unknown
      15 Juli, 2022
      Profil: https://www.blogger.com/profile/12104611664884459596
      Halo mbak, saya buat komentar udah 1 tahun yang lalu kenapa baru dibawab Sekarang ?? Sedangkan orang yang komen sekarang di balas Sekaran, kenapa komentar saya dulu gak dibalas dulu
    • Igniel
      15 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mau aja.
    • Yudi pw
      06 Desember, 2022
      Profil: https://www.blogger.com/profile/05287942762664483222
      wkwkwk
  • Apriyani Bylla
    17 Juli, 2020
    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
  • BangNof.com
    21 April, 2020
    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
    09 Februari, 2020
    Profil: https://www.blogger.com/profile/06330408544305453982
    kadang ngerasa percuma masang karna di firefox ada mode reader view
  • Rabbit Run
    14 Juli, 2019
    Profil: https://www.blogger.com/profile/15515183494785880008
    Thanks mbak, saya pakai cara pertama. Work!
  • Yuki Ari
    30 April, 2019
    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
  • GGNews
    12 April, 2019
    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
    04 Februari, 2019
    Profil: https://www.blogger.com/profile/17198531567968815543
    Untung Ada email langganan artikel buat copas, hehehe bercanda
    • Igniel
      04 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Percuma kalo feed diset short. Cuma dapet 100-200 karakter pertama. Karakter loh bukan kata.
  • Nucky
    14 Maret, 2018
    Profil: https://www.blogger.com/profile/01010359403355701052
    keren teman saya akan coba nanti di blog saya ..
  • Anonim
    Anonim03 Maret, 2018
    mbak, supaya gambar gak bisa di loading ketika di klik gmna ya mbak?
  • mbok dolan
    21 Februari, 2018
    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 Februari, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cara ketiga mas. Yang .post-body pre code
  • Yuli Aenuropiq
    16 Februari, 2018
    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