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.
Baca Juga

Artikel Terkait

5 Komentar

  1. makasih mba igniel artikelnya membantu sekalii

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

    ReplyDelete
  2. mbak igniel, kalau untuk kode html yang dikotak itu bisa di copas gmn caranya? apakah pakai yang cara ke dua itu kah?

    ReplyDelete
    Replies
    1. Cara ketiga mas. Yang .post-body pre code

      Delete
  3. mbak, supaya gambar gak bisa di loading ketika di klik gmna ya mbak?

    ReplyDelete
  4. keren teman saya akan coba nanti di blog saya ..

    ReplyDelete

Centang kotak "NOTIFY ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.