Tutorial Membuat Kotak Salin: Cara Mudah Tambah Fitur Copy ke Blog Kamu!

Pernahkah kamu menjelajah blog keren dan melihat ada kotak kecil berisi kode, lalu tinggal klik tombol “Salin” dan kodenya otomatis tersalin?

Fitur simpel tapi sangat bermanfaat ini disebut Copy Box atau Kotak Salin. Nah, di tutorial kali ini, kita akan membongkar rahasia di balik fitur kece ini dan bagaimana kamu bisa menambahkannya ke blog kamu, khususnya untuk sobat ngulik yang suka membagikan kode, resep, tips, atau teks lainnya.

Siapkan secangkir kopi dan mari kita mulai ngulik bareng!

Apa Itu Kotak Salin (Copy Box)?

Kotak salin adalah elemen dalam halaman web, biasanya berupa kotak berisi teks atau kode, yang dilengkapi tombol "Copy" atau "Salin". Ketika tombol itu diklik, isi kotak akan otomatis disalin ke clipboard pengguna.

Fitur ini sangat populer di blog teknologi, tutorial coding, dan blog resep yang butuh format penyalinan cepat. Selain memudahkan pembaca, ini juga menambah nilai profesional dan modern pada tampilan blog kamu.

Kenapa Harus Pakai Kotak Salin?

Sobat ngulik, berikut beberapa alasan kenapa kamu wajib punya fitur ini di blogmu:

• 🔹 Memudahkan pembaca menyalin teks penting tanpa harus memblok manual.
• 🔹 Meningkatkan UX (User Experience) karena tampak profesional dan interaktif.
• 🔹 Mempercepat interaksi di halaman seperti copy-paste kode HTML, CSS, JavaScript, atau bahkan quotes menarik.

Langkah 1: Siapkan Struktur HTML

Pertama-tama, kita butuh wadah atau <div> untuk menampilkan teks atau kode yang akan disalin, dan sebuah tombol untuk menyalinnya.

<div class="copy-box">

  <pre id="textToCopy">

    console.log("Halo sobat ngulik!");

  </pre>

  <button onclick="copyText()">Salin</button>

</div>

  

Penjelasan:

• 👉 <pre> digunakan untuk menampilkan teks/kode dengan format asli.
• 👉 id="textToCopy" adalah target teks yang akan disalin.
• 👉 Tombol dengan fungsi copyText() akan memicu aksi penyalinan.

Langkah 2: Tambahkan CSS Agar Menarik

Supaya tampilannya menarik, kita bisa tambahkan sedikit CSS:

<style>
.copy-box {
  background: #f1f1f1;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
}

.copy-box pre {
  margin: 0;
  font-family: monospace;
  overflow-x: auto;
}

.copy-box button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: green;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 5px;
}
</style>
  

Dengan CSS ini, tampilan kotak salin akan lebih modern dan rapi. Tombol salin berada di kanan atas, mudah dijangkau mata pengguna.

Langkah 3: Tambahkan JavaScript untuk Fungsi Salin

Nah, sekarang kita buat fungsi JavaScript untuk melakukan aksi copy:

<script>

function copyText() {

  var text = document.getElementById("textToCopy").innerText;

  navigator.clipboard.writeText(text).then(function() {

    alert("Teks berhasil disalin!");

  }, function(err) {

    alert("Gagal menyalin teks: " + err);

  });

}

</script>

  

📌 Catatan: Fungsi navigator.clipboard.writeText() hanya berjalan di situs HTTPS dan browser modern.

Versi Lengkapnya (Gabungkan Semua)

Kalau kamu ingin langsung menyalin semua kode yang sudah kita bahas ke dalam artikel atau blog kamu, ini dia versi lengkapnya:

<div class="copy-box">
  <pre id="textToCopy">
    console.log("Halo sobat ngulik!");
  </pre>
  <button onclick="copyText()">Salin</button>
</div>

<style>
.copy-box {
  background: #f1f1f1;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
}
.copy-box pre {
  margin: 0;
  font-family: monospace;
  overflow-x: auto;
}
.copy-box button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: green;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 5px;
}
</style>

<script>
function copyText() {
  var text = document.getElementById("textToCopy").innerText;
  navigator.clipboard.writeText(text).then(function() {
    alert("Teks berhasil disalin!");
  }, function(err) {
    alert("Gagal menyalin teks: " + err);
  });
}
</script>
  

Tips Tambahan: Tambah Ikon Copy atau Tooltip

Agar lebih interaktif dan elegan, kamu bisa menambahkan ikon Font Awesome atau membuat tooltip kecil yang muncul saat berhasil disalin.

Cara Tambahkan ke Blogger

Buat kamu pengguna Blogger (Blogspot), kamu bisa ikuti langkah ini:

1. Masuk ke dashboard Blogger → Tema → Edit HTML.
2. Sisipkan kode <style> dan <script> di bagian sebelum </head>.
3. Gunakan <div class="copy-box"> di dalam post HTML kamu.

Jangan lupa untuk ganti id="textToCopy" jika kamu punya lebih dari satu kotak salin di satu halaman.

Bonus: Versi Multi Copy Box

Kalau kamu punya banyak box salin, gunakan atribut data dan this agar bisa digunakan dinamis.

console.log("Box 1");

console.log("Box 2");

Penutup: Tingkatkan Blog Kamu dengan Fitur Simpel nan Bermanfaat

Sobat ngulik, fitur kotak salin mungkin terdengar sepele, tapi dampaknya luar biasa! Tak hanya membuat blogmu lebih canggih, tapi juga membantu pembaca menyalin informasi penting dengan mudah.

Semoga tutorial ini bermanfaat. Jangan lupa bagikan artikel ini ke teman sesama blogger atau developer ya. Yuk, terus ngulik fitur-fitur web bareng di Ngulik.id!

#NgulikCoding #CopyBox #BloggerTips

--------&-------