Cara Menonaktifkan Fungsi Seleksi dengan CSS

3/10/2015
Cara Menonaktifkan Fungsi Seleksi dengan CSS

Cara 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.

Kali ini Saya akan 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>

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



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.


Browser Support :

Tidak Support IE9 kebawah.


Ok demikian tips singkat kali ini tentang Cara Menonaktifkan Fungsi Seleksi dengan CSS, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 comments

saya pakai Template New Minima Colored.

saya sudah ikut langkah di atas tidak work. Minta solusinya??

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.