Cara Bikin Artikel Kamu Anti Copy Paste Tapi Tetap Bisa Salin Kode

pengajarpedia

Diperbarui: 07 Apr, 2025 • 0 • menit membaca

Daftar Isi

Pernah ngerasa capek nulis artikel panjang-panjang, penuh riset, tapi tiba-tiba nemu tulisan kamu udah nongol di blog orang lain? Nggak cuma bikin dongkol, tapi kadang juga bikin males nulis lagi. Nah, kalau kamu pernah ngalamin hal ini, mungkin udah waktunya kamu pasang widget anti copy-paste di blog kamu.

Tapi gimana dong nasib bagian kode program, kutipan penting, atau teks <pre> yang emang harus bisa disalin sama pembaca? Tenang, aku kasih solusi cakepnya di sini.

cara mencegah copy paste artikel blog, artikel anti copas dan bisa salin kode, tips membuat artikel tidak bisa disalin kecuali kode

Cara Bikin Artikel Kamu Anti Copy Paste Tapi Tetap Bisa Salin Kode

Biasanya kalau kamu pasang script untuk nonaktifin klik kanan atau blok teks, semua bagian ikut kena termasuk bagian penting kayak kode program. Padahal, bagian ini sering banget dibutuhkan pembaca buat dipraktikkan atau diuji langsung.

Makanya, kita perlu bikin sistem yang pintar. Artikel tetap aman, tapi kode atau bagian tertentu masih bisa tetap disalin.

Berikut ini trik yang aku pakai di blog aku, kamu juga bisa coba langsung!

1. Buka blogger kamu, lalu masuk menu tata letak

2. Klik tambahkan Gadget, lalu pilih HTML/Javascript

3. Copy paste code dibawah ini ke bagian konten HTML/Javascript


<noscript>
  <div id="javascript-disabled">
    <div>Konten ini sudah dilindungi. Tapi kalau mau izin, silakan komen aja biar nggak kena azab internet! 😆</div>
  </div>
</noscript>

<!-- JAVASCRIPT -->
<script>
  // Disable right-click kecuali di elemen kode
  window.addEventListener('contextmenu', function (e) {
    if (!e.target.closest('pre, code, textarea, .copy-btn')) {
      e.preventDefault();
    }
  });

  // Disable ctrl key kecuali di elemen kode
  window.addEventListener("keydown", function (e) {
    const target = e.target;
    const isAllowed = target.closest('pre, code, textarea, .copy-btn');
    if (e.ctrlKey && !isAllowed) {
      e.preventDefault();
    }
  });
</script>

<!-- CSS -->
<style>
#javascript-disabled {
  background: hsl(0deg 0% 9% / 95%);
  color: #fff;
  padding: 8% 0 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1000;
  height: auto;
  transform: translateZ(0);
  overflow: hidden;
}

#javascript-disabled div {
  border-radius: 10px;
  background: #a53321;
  padding: 30px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  font-size: 22px;
}
</style>

4. Lalu klik simpan

Oke, sekarang artikel kamu sudah tidak bisa di klik kanan dan di salin.

Sekarang cara untuk membuat kode program yang bisa di salin

1. Buka blogger kamu, lalu masuk menu Tema

2. Klik Sesuaikan, lalu Edit HTML

3. Tambahkan kode CSS dibawah ini, taruh pada bagian bawah <b:skin><![CDATA[


/* --- CSS untuk Tombol Salin Kode Plaintext --- */

.code-box {
  position: relative;
  background: #f9fafb;
  padding: 1rem;
  border-radius: 8px;
  font-family: monospace;
  border: 1px solid #e2e8f0;
  margin: 1em 0;
  overflow: auto;
  transition: background 0.3s, border 0.3s;
}

.code-box code {
  white-space: pre-wrap;
  display: block;
  color: #1e293b; /* text-slate-800 */
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.2s ease, color 0.2s ease;
}

.copy-btn:hover {
  background: #e2e8f0;
}

/* DARK MODE AUTO SWITCH */
@media (prefers-color-scheme: dark) {
  .code-box {
    background: #1e293b; /* slate-800 */
    border-color: #334155; /* slate-700 */
  }

  .code-box code {
    color: #e2e8f0; /* slate-200 */
  }

  .copy-btn {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
  }

  .copy-btn:hover {
    background: #475569;
  }
}

/* --- CSS akhir untuk Tombol Salin Kode --- */

4. Tambahkan kode Javascript dibawah ini, taruh pada bagian atas </body>


<script>
  /*<![CDATA[*/
//4/7/2025 Copy code untuk coding 
function copyToClipboard(button) {
  const code = button.parentElement.querySelector("code");
  const text = code.innerText || code.textContent;

  // Buat textarea sementara untuk copy jika navigator.clipboard gagal
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(() => {
      button.innerText = "Copied!";
      setTimeout(() => button.innerText = "Copy", 2000);
    }, () => fallbackCopy(text, button));
  } else {
    fallbackCopy(text, button);
  }
}

function fallbackCopy(text, button) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "fixed";  // agar tidak scroll
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.select();
  try {
    document.execCommand("copy");
    button.innerText = "Copied!";
  } catch (err) {
    button.innerText = "Failed!";
  }
  document.body.removeChild(textarea);
  setTimeout(() => button.innerText = "Copy", 2000);
}
/*]]>*/
</script>

5. Lalu klik simpan, dan finally kamu memliki artikel yang tidak bisa di copas namun masih bisa berbagi kode program kepada pengunjung artikel kamu.

Intinya, kamu tetap bisa lindungi artikel dari copas liar, tapi tetap kasih akses ke pembaca buat bagian penting kayak kode. Caranya dengan memakai kombinasi JavaScript dan class CSS kayak contoh tadi.

Jadi sekarang, kamu bisa tidur nyenyak tanpa takut tulisan kamu tiba-tiba nongol di blog sebelah. Tapi pembaca kamu tetap happy karena bisa ambil bagian yang emang penting.

Kalau kamu punya trik lain yang lebih mantep, boleh dong sharing di kolom komentar. Siapa tahu jadi inspirasi buat temen-temen blogger lainnya!

BaliScript - Strategi Blog Pemula

Cara Bikin Artikel Kamu Anti Copy Paste Tapi Tetap Bisa Salin Kode

Posting Komentar