Cara Membuat Tulisan Tidak Bisa Diseleksi dengan CSS

Arsipbiru.com - Seperti yang kita sebelumnya bahwa dalam menulis sebuah artikel yang menarik di blog itu tidak semudah yang dibayangkan. Segala upaya dilakukan demi melindungi artikel mereka. Ada yang memasang script anti copy paste di blog, mulai dari menonaktifkan klik kanan, men-disable keyboard shortcut, dan men-disable text selection highlight. Jadi, wajar saja jika di beberapa blog atau website justru memasang script semacam ini demi melindungi artikel mereka.

Namun, terlepas dari itu semua, hal semacam itu justru menjadi boomerang bagi mereka. Mereka akan kehilangan pengunjung secara signifikan. Sebab pengunjung tidak bisa secara leluasa berada di blog tersebut. Hal tersebut akan berimbas pada kurangnya pengalaman pengunjung atau UX. Bahkan yang lebih parah lagi, jika mereka telah memasang AdSense, maka hal semacam itu tidak bagus bagi blog yang menyematkan script semacam itu di blog mereka.

Script anti copy paste terdiri dari beberapa macam. Ada script anti klik kanan, script disable keyboard shortcut, script disable text selection highlight, dan lain-lain. Nah, disini saya akan membagikan tutorial terkait bagaimana cara membuat disable text selection highlight dengan CSS. Disable text selection highlight adalah membuat tulisan yang ada di blog tidak bisa diseleksi untuk mencegah copy paste oleh oknum yang tidak bertanggungjawab. Script yang dibutuhkan murni hanya menggunakan CSS. Jadi tidak perlu menambahkan script yang cukup ribet di blog.

Jika Anda tertarik untuk membuat tulisan tidak bisa diseleksi di blog, silahkan simak baik-baik dengan seksama step-by-step nya. Perlu diingat kembali bahwa menyematkan script ini dapat memberikan dampak yang kurang bagus untuk blog Anda. Namun, jika Anda telah siap dengan konsekuensinya nanti, maka silahkan dilanjutkan.

Cara Membuat Tulisan Tidak Bisa Diseleksi dengan CSS

1. Pertama, masuk ke Blogger > pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

2. Lalu, cari kode CSS dari body.

3. Apabila di dalamnya sudah terdapat kode CSS, JANGAN DIHAPUS!! Tambahkan saja barisan kode CSS berikut ini di dalam CSS dari body. Hasilnya kurang lebih akan seperti berikut ini.

BODY {

 user-select:none;

 -moz-user-select:none;

 -ms-user-select:none;

 -khtml-user-select:none;

 -webkit-user-select:none

}

4. Terakhir, simpan Tema dan lihat hasilnya.

Karena kodenya disimpan di body, maka semua tulisan yang ada di blog benar-benar tidak bisa diseleksi. Hal ini kurang bagus bagi blog dengan niche tutorial. Apalagi blog tutorial yang biasanya terdapat Syntax Highlighter. Ini akan membuat kesal dan jengkel para pengunjung, karena kode-kode tersebut tidak bisa disalin.

Kalau Anda ingin membuat tulisan tidak bisa diseleksi hanya di beberapa bagian, silahkan coba kode berikut ini. Hanya saja Anda harus paham betul dengan tag HTML. Umumnya isi artikel di sebagian besar template disimpan di dalam div yang memiliki class .post-body atau ID #post-body. Maka jika hanya ingin membuat tulisan tidak bisa diseleksi hanya di area tersebut, Anda bisa menambahkan kode berikut ini ke dalam CSS dari class post-body atau ID post-body. INGAT!! Jika di dalamnya sudah ada CSS, jangan dihapus!! Nanti hasilnya kurang lebih akan seperti ini.

.post-body {

 user-select:none;

 -moz-user-select:none;

 -ms-user-select:none;

 -khtml-user-select:none;

 -webkit-user-select:none

}

Jika tag HTML dengan kode <div class="post-body">, kode CSS-nya adalah .post-body. Namun, jika tag HTML-nya dengan kode <div id="post-body">, kode CSS-nya adalah #post-body. Jadi, Anda hanya perlu memodifikasi di salah satu CSS tersebut.

Sedangkan kode berikut ini adalah kebalikannya, yaitu mengaktifkan seleksi tulisan. Silahkan simpan dimana pun Anda butuhkan, tergantung id dan class yang digunakan. Misalnya, jika Anda ingin mengaktifkan seleksi tulisan di bagian Syntax Highlighter, maka Anda perlu menambahkan sedikit barisan CSS pada bagian CSS pre dan code. Nanti hasilnya kurang lebih akan seperti ini.

.post-body pre code {

 user-select:text;

 -moz-user-select:text;

 -ms-user-select:text;

 -khtml-user-select:text;

 -webkit-user-select:text

}

Demikianlah tutorial singkat terkait bagaimana cara membuat tulisan tidak bisa diseleksi dengan CSS. Jika ada saran dan masukan, silahkan berkomentar yang sopan di kolom komentar di bawah ini. Terima kasih dan semoga bermanfaat.

Sumber:

Igniel.com