Kode Anti Copas (Loading Ringan) dengan CSS untuk Blog

Tutorial kali ini Crepictdesign ingin bagikan kode CSS anti klik kanan ( area select block ), saya sengaja tidak menggunakan Javascript yang sudah umum menjadi tutorial dan sudah banyak dibagikan oleh para Sobat blogger. Disamping terlalu banyak Jacascript membuat Loading Blog semakin berat jadi saya gunakan CSS sebagai alternative kode anti copasnya.

Kenapa saya tidak menggunakan Javascript? Salah satu alasannya adalah tiap browser memiliki tips bagaimana cara menon-aktifkan java script, Nah..ketika javascript tidak diaktifkan pada browser yang digunakan oleh pengguna maka ARTIKEL kita akan dengan  mudah di copy paste.

Jika terlalu banyak javascript yang ada di dalam templatepun menjadikan loading Blog semakin berat, artinya meminimalkan penggunaan Javascript di dalam Blog adalah baik untuk meringankan loading Blog itu sendiri.

Pada dasarnya kod CSS Anti COPAS  berfungsi untuk melarang user mem block/select tulisan yang ada pada class tertentu, atau CLASS yang sudah kita tentukan akan secara otomatis  tidak bisa di select ( select area ) jadi tentu saja tidak bisa di copy paste.

Langsung saja pada tutorial dibawah ini :

Cara Memasang Kode Anti Copas untuk Blog dengan CSS

Dasar Kode Anti COPAS dengan CSS

/* Basic code CSS anti copas */

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-o-user-select: none;

user-select: none;

Diatas adalah kode basic atau dasarnya saja, jadi tidak langsung kita terapkan di Blog.

Cara Memasang pada Template Blog

Masuk ke Akun Blogger Sobat :

1.  Klik templat dan klik edit HTML

2.  Carilah kode  ]] >< /b:skin>gunakan Ctrl + F untuk memudahkan pencarian dan klik Enter

3.  Letakkan kode di bawah ini di atas kode ]] >< /b:skin>atau</ style>lalu klik simpan

1. Kode anti copas seluruh isi Blog

Pemasangan kode Anti copas dibawah ini cocok untuk Blog Pribadi ( Personal Blog )

body{display:block;-khtml-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;unselectable:on;}

Jika sudah selesai klik Simpan Template.

Pemasangan Kode CSS di atas memungkinkan semua artikel atau semua postingan tidak akan bisa di copy paste oleh pengunjung Blog. 

2. Kode Anti copas pada CLASS tertentu saja

Jika Sobat ingin menseleksi mana artikel yang boleh di Copy Paste dan mana mana yang tidak boleh di copy paste maka Sobat  harus menambahkan ( CLASS  tertentu ) agar tidak bisa di copy paste.

Pemasangan kode Anti COPAS pada class POSTBODY

Cara pemasangannya sama seperti pada langkah pertama ya Sob …!.

Pada CLASS area postbody ini seluruh area postingan artikel Sobat tidak bisa di copy paste. Kodenya adalah tersebut dibawah ini :

.post-body{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select:none;user-select: none;}

Setelah itu tekan Simpan Template

Pada bagian ini semua area postingan Blog Sobat tidak bisa di copy paste..!

Pertanyaannya : Lho bagaimana dengan kode CSS,Javascript,jQuery,HTML yang saya bagikan agar bisa di copas ??? Jawabannya adalah tidak bisa di copas juga...

Tutorial dibawah ini adalah Jawaban agar kode CSS,Javascript,jQuery,HTML yang Sobat bagikan bisa di copas oleh pengunjung Blog.

3. Pengecualian kode COPAS pada CLASS tertentu saja ( bisa di copas )

Kode dibawah ini adalah pengecualian dari semua kode diatas yaitu membolehkan pengunjung meng-copy paste area tertentu atau CLASS tertentu. Kodenya adalah dibawah ini :

pre,code{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;-o-user-select:text;user-select:text}

Setelah itu Simpan Template

Catatan : pre,code adalah class tertentu yang umum digunakan oleh Admin Blog dalam membagikan tutorial berupa kode CSS,Javascript,jQuery,HTML dsb.

Jika Sobat menggunakan CLASS yang lain silahkan ganti CLASS pre,code dengan CLASS milik sobat.

Demikian Tutorial Cara Memasang Kode Anti COPAS dengan CSS, semoga penjalasan saya mudah dimengerti dan bermanfaat bagi Sobat blogger semuanya. Silahkan tulis komentar jika ada pertanyaan seputar tutorial diatas jika Sobat menemukan masalah dalam penerapannya.

Semoga bermanfaat….