Mencegah Pencurian Artikel Web Dengan CSS

Mencegah orang melakukan seleksi terhadap teks yang ada di website kadang sangat diperlukan, apa lagi di era Internet seperti ini banyak sekali orang yang sembarangan mengambil dan mengutip atau copy/paste tulisan orang lain tanpa izin.
Untuk itu diperlukan pencegahan, kalau dulu orang melakukan pencegahan dengan memanfaatkan Javascript, atau dengan image raplacement (yaitu dengan mengubah teks menjadi format gambar), atau cara-cara lain.

Image by ThrasherDave

Pepatah:

Mencegah lebih baik dari pada mengobati

Pada tulisan kali ini Tutorial-webdesign.com akan mencoba melakukan pencegahan atau setidak nya menyulitkan orang lain untuk menyeleksi teks yang ada di website kita dengan bermodalkan CSS. Sebalumnya kita pernah membahas tentang menonaktifkan sebuah link dengan css, sekarang kita akan menonaktifkan fungsi seleksi terhadap konten/teks yang ada di website.

Berikut adalah contoh penggunaan tag HTML dan CSS untuk mencegah seleksi teks halaman web.
HTML

<div class="website-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>

CSS

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

User-select: none, akan mencegah orang lain melakukan seleksi terhadap text.
Untuk mencegah orang lain melakukan seleksi terhadap seluruh text, gunakan script css diatas di tag body.
Untuk mencegah orang lain melakukan seleksi terhadap elemen tertentu gunakan script css ditas di tag yang ingin di disable saja.

Demo

Demo All Text
Demo Partial
Download 1
Download 2

Browser Support

Tidak Support IE9 kebawah dan Seluruh Opera.

Oke sekian tips singkat kali ini, semoga berguna untuk anda yang takut artikelnya dicuri oleh orang lain.

Salam Web Design Indonesia

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

11 thoughts on “Mencegah Pencurian Artikel Web Dengan CSS”

Adhi Blogz says:

February 28, 2013 at 16:43

Nice Info gan………

Yuri says:

February 28, 2013 at 16:43

Bermanfaat, terima kasih :)

AgusDemak says:

February 28, 2013 at 19:18

Artikel bagus, meski semua masih bisa “diakali” karena orang mau ‘nyuri’ itu ada aja jalannya. Tapi paling tidak bisa mempersulit sih…

TWD Editorial says:

February 28, 2013 at 22:42

Betul sekali, silahkan digunakan dengan baik :)
Rumah dikunci dobel pun masih disatroni maling, gimana cuma teks web :)

Reply

Menyertakan URL Sumber Setiap Copy Paste Artikel Web | Tutorial Web Design says:

March 1, 2013 at 14:52

[…] untuk mengatasi masalah itu, pada artikel sebelum nya tutorial-webdesign.com telah mencoba mencegah pencurian artikel web dengan css. Kali ini kita mencoba metode lain yaitu dengan menyertakan URL sumber artikel setiap kali […]

Anonymous says:

March 12, 2013 at 17:30

sob kalo ada blockquote nya ( blockquote nya bisa di copy tidak )

TWD Editorial says:

March 12, 2013 at 17:52

Kalau blockquote nya ada di dalam div yang di protect itu ya tidak bisa dicopy :)
Silahkan dicoba-coba sendiri

Reply

aldhy-syncmaste says:

March 25, 2013 at 15:49

keren artikelnya gan…

TWD Editorial says:

March 25, 2013 at 16:40

Thanks..

Reply

Lathif Nurdiansyah says:

March 30, 2013 at 12:07

Saya sangat menyukai cara ini… Selain lebih simple, ternyata aman juga. Karena dulu saya sempat menggunakan javascript sampai-sampai blog saya dihapus oleh pihak blogger, untungnya saya menkomplen dan akhirnya balik lagi blog saya :). Selain itu kalau menggunakan javascript itu masih mudah dibobol apabila menggunakan “Mozilla Firefox”, tinggal diatur aja settingannya supaya website yang mengandung javascript itu dihilangkan fungsinya. Sungguh ironis nasib orang-orang indonesia yang melakukan hal ini.

Sekali lagi terima kasih :) Komen balik ya mas kalau sempat, hehe

5 Plugin Wordpress Untuk Memberi Watermark Pada Foto | Tutorial Web Design says:

April 13, 2013 at 02:39

[…] Mencegah Pencurian Artikel Web Dengan CSS […]

Tutorial Web Design

Topik

Tags