Selasa, 15 November 2016

Menonaktifkan Fungsi Seleksi dengan CSS

Dilihat: kali

Menonaktifkan Fungsi Seleksi dengan CSS

Mencegah orang melakukan seleksi terhadap teks yang ada di blog kadang sangat diperlukan, apa lagi di jaman yang serba praktis seperti sekarang ini tidak sedikit orang yang sembarang mengambil atau mencopas tulisan orang lain tanpa izin.

Untuk itu diperlukan pencegahan. Kalau dulu orang melakukan pencegahan dengan memanfaatkan fungsi Javascript, namun cara tersebut masih bisa diakali dengan menonaktifkan fitur Javascript di browser yang digunakan.

trik kali ini mencoba melakukan pencegahan atau setidaknya menyulitkan orang lain untuk menyeleksi teks yang ada di blog kita dengan memanfaatkan fungsi CSS.

Berikut adalah penerapan CSS dan HTML untuk mencegah seleksi teks pada artikel di blog sobat.

Pertama, buka Blogger > Template > Klik edit HTML > Terapkan kode di bawah ini tepat sebelum ]></b:skin> atau </style>

.blog-content{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

Kemudian simpan template.

Selanjutnya untuk penerapan pada tag HTML di postingan (tab HTML) bisa sobat terapkan seperti contoh di bawah ini pada tulisan yang ingin di proteksi.

<div class="blog-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam perspiciatis dolorum! Quis dignissimos voluptatem illum facilis suscipit repellat non voluptates hic laboriosam nesciunt rem voluptatum provident obcaecati ea eum reiciendis nisi explicabo.</div>

Jika tidak ingin repot-repot menambahkan kode tag HTML di atas secara manual, cukup tambahkan CSS di atas pada CSS post-body di template sobat.

.post-body{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

Dan jika ingin mengaktifkan seleksi pada tulisan tertentu yang ada di dalam post-body sebagai parent class yang dinonaktifkan, sobat cukup tambahkan CSS di bawah ini ke dalam tag CSS tertentu. Misal pada tag pre

pre{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

Dengan menerapkan User-select:none maka akan mencegah orang lain melakukan seleksi terhadap text. Untuk mencegah orang lain melakukan seleksi terhadap seluruh text di blog, gunakan CSS diatas di tag body.

Ketika yang mudah dipersulit, yang sulit menjadi sangat mahal. Semakin pandai seseorang akan lebih mudah membodohi orang lain, tapi juga tak jarang orang yang tinggal menerima tak tahu diri dengan mengambil milik orang lain.

Gunakan pengetahuan dengan bijak
Silahkan isi kolom komentar dibawah