Cara Menonaktifkan Fungsi Seleksi Dengan Css

Cara Menonaktifkan Fungsi Seleksi dengan CSS - Mencegah orang melaksanakan seleksi terhadap teks yang ada di blog kadang sangat diperlukan, apa lagi di jaman yang serba mudah menyerupai kini ini tidak sedikit orang yang sembarang mengambil atau mencopas goresan pena orang lain tanpa izin.

Untuk itu diharapkan pencegahan. Kalau dulu orang melaksanakan pencegahan dengan memanfaatkan fungsi Javascript, namun cara tersebut masih dapat diakali dengan menonaktifkan fitur Javascript di browser yang digunakan.

Kali ini Saya akan mencoba melaksanakan pencegahan atau setidaknya menyulitkan orang lain untuk menyeleksi teks yang ada di blog kita dengan memanfaatkan fungsi CSS.

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

Pertama, buka Blogger > Template > Klik edit HTML > Terapkan arahan di bawah ini sempurna 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) dapat sahabat terapkan menyerupai pola di bawah ini pada goresan pena 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>

See the Pen Fungsi Seleksi by (@arlinadesign) on CodePen.

Jika tidak ingin repot-repot menambahkan arahan 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 jikalau ingin mengaktifkan seleksi pada goresan pena tertentu yang ada di dalam post-body sebagai parent class yang dinonaktifkan, sahabat 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 melaksanakan seleksi terhadap text. Untuk mencegah orang lain melaksanakan seleksi terhadap seluruh text di blog, gunakan CSS diatas di tag body.


Browser Support :

Tidak Support IE9 kebawah.


Ok demikian tips singkat kali ini ihwal Cara Menonaktifkan Fungsi Seleksi dengan CSS, biar bermanfaat.

Tweet

Subscribe to receive free email updates: