Menjaga artikel dari penyalinan sembarangan menjadi salah satu perhatian bagi pemilik blog dan pembuat konten. Namun, memblokir seluruh fungsi copy secara total juga dapat mengurangi kenyamanan pengunjung, terutama pada blog yang menyediakan kode HTML, CSS, JavaScript, rumus, atau bagian teks tertentu yang memang perlu disalin.
Solusinya adalah menggunakan script anti copas cerdas di Blogger yang menerapkan pembatasan secara selektif. Teks artikel biasa dapat dibuat tidak mudah diseleksi, sementara area tertentu seperti Blockquote, Pre, dan Code tetap dapat dipilih serta disalin.
Pada tutorial ini, Anda akan mempelajari cara membuat anti copy paste Blogger menggunakan CSS dan JavaScript, cara memasangnya melalui gadget HTML/JavaScript, serta cara memastikan area kode tetap bisa disalin oleh pembaca.
Apa Itu Script Anti Copas Cerdas di Blogger?
Script anti copas cerdas adalah metode sederhana untuk membatasi tindakan penyalinan pada bagian tertentu dari halaman web. Sistem ini memanfaatkan CSS untuk mengatur seleksi teks dan JavaScript untuk menangani beberapa interaksi seperti klik kanan dan event copy.
Pada artikel Blogger, aturan CSS dapat diterapkan pada area .post-body. Dengan begitu, teks utama artikel dapat dibuat tidak dapat diseleksi menggunakan kursor, sementara elemen tertentu seperti blockquote, pre, dan code diberikan pengecualian.
JavaScript kemudian digunakan untuk mencegah event contextmenu dan copy pada area yang tidak diizinkan. Ketika pengunjung berada di dalam elemen yang diperbolehkan, fungsi tersebut tidak diblokir.
Apakah Script Anti Copas Bisa Melindungi Artikel Sepenuhnya?
Perlu dipahami bahwa script anti copas bukan sistem perlindungan hak cipta yang sempurna. Pembatasan yang dilakukan melalui CSS dan JavaScript hanya bekerja pada interaksi tertentu di browser.
Pengguna yang memiliki pengetahuan teknis masih dapat menggunakan metode lain untuk memperoleh informasi dari sebuah halaman, misalnya melalui source code, developer tools, cache, atau cara lainnya.
Karena itu, script ini lebih tepat digunakan sebagai penghalang terhadap penyalinan secara kasual, bukan sebagai perlindungan mutlak terhadap pencurian konten.
Manfaat Script Anti Copy Paste Selektif
Penerapan sistem selektif memiliki kelebihan dibandingkan memblokir fungsi copy pada seluruh halaman.
- Membatasi seleksi teks artikel pada bagian utama.
- Mencegah klik kanan pada area yang tidak diizinkan.
- Tetap mengizinkan copy kode yang berada dalam elemen tertentu.
- Cocok untuk blog tutorial HTML, CSS, JavaScript, dan pemrograman.
- Tidak membutuhkan library JavaScript eksternal.
- Dapat diterapkan pada artikel lama maupun artikel baru melalui gadget Blogger.
Contoh Penggunaan Anti Copas di Artikel Blogger
Misalnya Anda memiliki artikel tutorial website yang berisi penjelasan panjang dan beberapa contoh kode HTML. Bagian penjelasan dapat dibatasi agar tidak mudah disalin, sedangkan kode yang memang ditujukan untuk pembaca dapat tetap digunakan.
Sebagai contoh, teks biasa berada di dalam paragraf <p>, sedangkan kode tutorial ditempatkan pada <pre> atau <code>. CSS akan memberikan perlakuan berbeda pada kedua jenis elemen tersebut.
Dengan pendekatan ini, pembaca tetap mendapatkan pengalaman yang lebih nyaman ketika mengikuti tutorial karena bagian kode yang memang diperlukan masih dapat diseleksi dan disalin.
Kode CSS Anti Copas untuk Blogger
Langkah pertama adalah membuat aturan CSS untuk mengatur kemampuan seleksi teks. Kode berikut menonaktifkan seleksi pada area artikel, kemudian memberikan pengecualian pada blockquote, pre, dan code.
<style>
.post-body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post-body blockquote,
.post-body pre,
.post-body code {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
</style>Fungsi CSS tersebut
Properti user-select: none; digunakan untuk mencegah teks pada area yang ditargetkan agar tidak mudah diseleksi menggunakan mouse atau perangkat sentuh.
Sementara itu, aturan user-select: text; pada blockquote, pre, dan code memberikan pengecualian sehingga elemen tersebut tetap dapat dipilih.
JavaScript untuk Memblokir Klik Kanan dan Copy
Setelah CSS diterapkan, tambahkan JavaScript untuk menangani event klik kanan dan penyalinan teks. Script berikut memeriksa elemen yang menjadi target interaksi.
<script>
document.addEventListener('contextmenu', function(event) {
if (!event.target.closest('blockquote, pre, code')) {
event.preventDefault();
}
});
document.addEventListener('copy', function(event) {
if (!event.target.closest('blockquote, pre, code')) {
event.preventDefault();
}
});
</script>
Pada kode tersebut, fungsi closest() digunakan untuk mengetahui apakah elemen yang sedang berinteraksi berada di dalam blockquote, pre, atau code.
Jika target tidak berada pada salah satu elemen tersebut, event akan dibatalkan menggunakan preventDefault(). Sebaliknya, apabila pengguna berada di area kode yang diperbolehkan, event tidak diblokir.
Cara Memasang Script Anti Copas di Blogger
Agar script dapat diterapkan pada seluruh artikel, Anda dapat memasangnya melalui gadget HTML/JavaScript di bagian Tata Letak Blogger.
Langkah 1: Masuk ke Dashboard Blogger
Buka dashboard Blogger kemudian pilih blog yang ingin Anda pasang script anti copy paste.
Langkah 2: Buka Menu Tata Letak
Pada menu sebelah kiri, pilih Tata Letak. Anda akan melihat berbagai area widget yang tersedia pada template Blogger.
Langkah 3: Tambahkan Gadget HTML/JavaScript
Pilih area widget yang sesuai, misalnya bagian sidebar atau footer, kemudian klik Tambahkan Gadget. Setelah itu pilih gadget HTML/JavaScript.
Langkah 4: Masukkan Kode
Kolom judul dapat dikosongkan. Kemudian masukkan kode CSS dan JavaScript yang telah disediakan.
<style>
.post-body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post-body blockquote,
.post-body pre,
.post-body code {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
</style>
<script>
document.addEventListener('contextmenu', function(event) {
if (!event.target.closest('blockquote, pre, code')) {
event.preventDefault();
}
});
document.addEventListener('copy', function(event) {
if (!event.target.closest('blockquote, pre, code')) {
event.preventDefault();
}
});
</script>Langkah 5: Simpan Gadget
Setelah kode dimasukkan, klik Simpan. Kemudian buka salah satu artikel blog untuk melakukan pengujian.
Cara Membuat Teks Tetap Bisa Disalin
Setelah script aktif, pastikan kode atau teks yang ingin diberikan kepada pembaca ditempatkan pada elemen yang mendapatkan pengecualian.
Untuk kode HTML, CSS, JavaScript, atau teks yang memang perlu disalin, Anda dapat menggunakan elemen seperti berikut:
<blockquote>
Teks yang ingin tetap dapat disalin.
</blockquote>
<pre>
Kode yang ingin disalin pembaca.
</pre>
<code>
Contoh kode singkat.
</code>Jika template atau struktur artikel Anda menggunakan elemen lain untuk menampilkan kode, aturan CSS dan JavaScript perlu disesuaikan dengan class atau elemen yang digunakan.
Cara Menguji Script Anti Copas
Setelah script dipasang, lakukan pengujian menggunakan artikel yang memiliki teks biasa dan area kode.
Uji Seleksi Teks
Coba arahkan mouse ke paragraf biasa kemudian klik dan seret untuk menyeleksi teks. Pada area yang menggunakan user-select: none;, teks seharusnya tidak dapat diseleksi seperti biasa.
Uji Klik Kanan
Klik kanan pada paragraf biasa. Jika JavaScript berjalan dengan benar, menu konteks browser akan dicegah muncul pada area tersebut.
Uji Area Kode
Selanjutnya, arahkan kursor ke dalam blockquote, pre, atau code. Pastikan teks masih dapat diseleksi dan disalin.
Jika area kode masih tidak dapat disalin, periksa kembali struktur HTML dan pastikan elemen yang digunakan memang termasuk dalam selector yang diberikan pada script.
Kesalahan Umum Saat Memasang Script Anti Copas
1. Area Kode Tidak Bisa Disalin
Masalah ini biasanya terjadi karena kode atau teks yang ingin disalin tidak menggunakan elemen yang mendapatkan pengecualian. Pastikan elemen tersebut berada di dalam blockquote, pre, atau code.
2. Script Tidak Berfungsi
Periksa kembali apakah tag <script> dan <style> sudah lengkap. Kesalahan kecil dalam penulisan JavaScript dapat membuat fungsi tidak berjalan.
3. Beberapa Elemen Template Ikut Terkunci
Selector .post-body dapat mencakup banyak elemen di dalam konten posting. Jika terdapat bagian tertentu yang ingin tetap interaktif, Anda mungkin perlu menambahkan pengecualian selector sesuai struktur template.
4. Tidak Berfungsi pada Browser Tertentu
Perilaku event browser dapat berbeda tergantung perangkat dan browser yang digunakan. Karena itu, sebaiknya lakukan pengujian pada beberapa browser dan perangkat sebelum menerapkannya secara permanen.
Apakah Script Anti Copas Mempengaruhi SEO Blogger?
Penggunaan script anti copas tidak otomatis membuat artikel menjadi lebih SEO-friendly. Bahkan, pembatasan seleksi teks dapat memengaruhi kenyamanan sebagian pengunjung, terutama mereka yang terbiasa menyalin kutipan atau informasi tertentu untuk kebutuhan pribadi.
Karena itu, gunakan script ini secara selektif dan pertimbangkan pengalaman pengguna. Untuk blog tutorial yang banyak menyediakan kode, sebaiknya area kode tetap diberikan akses copy.
Perlu diingat bahwa mesin pencari tidak membutuhkan pengunjung untuk dapat menyalin teks agar dapat memahami isi halaman. Fokus utama SEO tetap pada konten yang bermanfaat, relevan, struktur halaman yang baik, pengalaman pengguna, dan kualitas website secara keseluruhan.
Tips Menggunakan Script Anti Copy Paste dengan Bijak
- Gunakan hanya jika memang memiliki alasan untuk membatasi penyalinan.
- Tetap izinkan pembaca menyalin kode tutorial yang memang disediakan untuk dipraktikkan.
- Jangan menganggap script ini sebagai perlindungan hak cipta secara mutlak.
- Periksa pengalaman pengguna pada perangkat desktop dan mobile.
- Pastikan script tidak mengganggu tombol, form, link, atau elemen interaktif lainnya.
- Gunakan struktur HTML yang konsisten untuk area kode.
- Jika blog Anda berfokus pada tutorial, prioritaskan kemudahan pembaca dalam menggunakan contoh kode.
Alternatif Perlindungan Konten Selain Script Anti Copas
Script anti copy paste bukan satu-satunya cara untuk menjaga konten. Untuk perlindungan yang lebih baik, pemilik blog sebaiknya menggunakan beberapa pendekatan sekaligus.
- Gunakan identitas penulis dan informasi penerbit yang jelas.
- Tambahkan halaman profil atau halaman tentang blog.
- Gunakan internal link pada artikel.
- Publikasikan konten secara konsisten dan berkualitas.
- Simpan arsip atau dokumentasi tanggal publikasi konten.
- Jika menemukan plagiarisme, gunakan prosedur pelaporan yang sesuai pada platform terkait.
Kesimpulan
Script anti copas Blogger dapat digunakan untuk membatasi seleksi teks, klik kanan, dan penyalinan pada bagian tertentu dari artikel. Dengan kombinasi CSS dan JavaScript, Anda dapat membuat sistem yang lebih selektif sehingga teks utama dibatasi, sementara area seperti blockquote, pre, dan code tetap dapat disalin.
Metode ini sangat cocok untuk blog yang menyediakan tutorial karena pembaca masih dapat menyalin kode HTML, CSS, JavaScript, maupun informasi tertentu yang memang sengaja disediakan untuk dipraktikkan.
Namun, perlu diingat bahwa tidak ada script anti copas berbasis browser yang mampu menjamin konten tidak dapat diambil sepenuhnya. Gunakan metode ini sebagai lapisan pembatas tambahan dan tetap prioritaskan kualitas konten serta pengalaman pengguna.
FAQ Script Anti Copas Blogger
Apakah script anti copas bisa dipasang di Blogger?
Ya. Script anti copas dapat dipasang di Blogger menggunakan CSS dan JavaScript, misalnya melalui gadget HTML/JavaScript pada menu Tata Letak.
Apakah kode HTML dan CSS tetap bisa disalin?
Bisa, selama kode tersebut ditempatkan pada elemen yang diberikan pengecualian seperti pre, code, atau blockquote.
Apakah script anti copas bisa mencegah pencurian konten sepenuhnya?
Tidak. Script anti copas hanya membatasi beberapa interaksi pada browser. Pengguna yang memiliki pengetahuan teknis masih dapat menggunakan metode lain untuk memperoleh informasi dari halaman.
Apakah script ini memengaruhi SEO?
Script ini bukan faktor yang secara otomatis meningkatkan SEO. Penggunaan yang berlebihan juga dapat mengurangi kenyamanan pengunjung. Karena itu, gunakan secara selektif dan tetap prioritaskan kualitas konten serta pengalaman pengguna.
Mengapa Blockquote masih bisa disalin?
Karena CSS memberikan pengecualian user-select: text pada elemen Blockquote. JavaScript juga tidak membatalkan event klik kanan dan copy ketika target berada di dalam elemen yang diperbolehkan.
Bagaimana jika saya ingin elemen lain tetap bisa disalin?
Anda dapat menambahkan selector elemen tersebut ke dalam pengecualian CSS dan JavaScript. Penyesuaian selector harus mengikuti struktur HTML yang digunakan oleh template Blogger Anda.