Tutorial Membuat Kotak Kode Keren dengan Tombol Salin di Blog Ngulik.id

Pernah nggak sih bro, saat membaca blog teknologi atau tutorial coding, kamu pengen banget bisa langsung salin kode yang ada, tanpa harus ribet blok satu-satu? Nah, di artikel kali ini, kita bakal ngulik bareng gimana caranya membuat kotak kode yang rapi, berwarna hijau, responsif, dan punya tombol salin otomatis. Cocok banget buat blog tutorial, dokumentasi, atau catatan pribadi kamu di Ngulik.id.

BACA JUGA

🔧 Kenapa Perlu Kotak Kode dengan Tombol Salin?

Kodingan tanpa kotak kode itu ibarat nasi goreng tanpa telur, bro! Selain lebih enak dipandang, kotak kode juga bikin pembaca lebih mudah menyalin contoh-contoh kode yang kamu tulis. Apalagi kalau blog kamu banyak membahas HTML, CSS, JavaScript, atau bahasa pemrograman lain.

📦 Struktur HTML Kotak Kode

Kita mulai dari struktur HTML-nya. Di sini kita pakai <pre> dan <code> untuk membungkus kode, serta sebuah tombol “Salin” yang akan memicu fungsi JavaScript.


<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>

🖌️ Tambahkan Gaya dengan CSS

Di dalam tag <style>, kamu bisa menyesuaikan warna, font, border, dan padding agar sesuai dengan tema blog kamu. Gaya di atas menggunakan warna hijau lembut dari #e8f5e9 dan border #4caf50 agar selaras dengan nuansa “Ngulik” yang ramah mata.

⚙️ Script Tombol Salin Otomatis

Berikut script tambahan yang kita taruh di akhir halaman. Fungsinya adalah menyalin seluruh isi elemen <pre> ke clipboard saat tombol diklik, lalu mengganti teks tombol menjadi “Disalin!” selama 2 detik sebelum kembali ke teks awal:


<script>
function copyCode(button) {
  var code = button.parentElement.querySelector('pre').innerText;
  navigator.clipboard.writeText(code).then(function () {
    button.innerText = "Disalin!";
    setTimeout(function () {
      button.innerText = "Salin";
    }, 2000);
  });
}
</script>

🧪 Hasil Akhir dan Cara Uji

Setelah semua komponen HTML, CSS, dan JavaScript kamu gabungkan, simpan file sebagai `.html` lalu buka di browser. Kamu akan melihat kotak kode dengan tampilan rapi, bisa discroll kalau tinggi, dan tombol “Salin” akan bekerja seperti sulap.

💡 Tips Tambahan untuk Developer

Gunakan <pre> + <code> untuk format kode standar
Tambahkan fitur copy-to-clipboard di beberapa tempat di halaman jika dibutuhkan
Gunakan background ringan agar tidak mengganggu teks kode
Bisa dikembangkan agar menyisipkan alert dengan SweetAlert2 atau Toastify.js

🧠 Manfaat SEO dari Kotak Kode Interaktif

Kotak kode bukan hanya mempercantik tampilan, bro. Google juga bisa lebih mudah membaca struktur kode dalam tag <pre> dan <code>, apalagi kalau ditulis semantik dan bersih. Ini bisa bantu ranking artikel tutorial kamu di pencarian Google untuk kata kunci seperti “copy code button HTML” atau “cara membuat kotak salin di blog”.

🔚 Penutup: Saatnya Ngulik Sendiri!

Sekarang giliran kamu bro! Coba implementasikan kotak salin ini ke blog kamu sendiri. Nggak perlu tunggu besok — mulai dari sekarang, dan lihat bagaimana pembaca makin betah ngoding bareng kamu di Ngulik.id!

Kalau butuh versi light/dark mode otomatis, atau versi Tailwind, tinggal bisik aja ya bro 😎

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