Menambahkan Tombol Salin Kode pada Artikel Blogger

Artikel tutorial sering menyertakan potongan HTML, CSS, atau JavaScript. Tombol salin membuat contoh lebih praktis, terutama untuk pengguna perangkat sentuh.

Hal yang perlu diperhatikan

• Salin isi pre atau code
• Teks konfirmasi sesaat
• Memakai Clipboard API
• Penanganan jika izin ditolak

Cara menerapkannya

Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.

Contoh JavaScript

document.querySelector("#salin-kode")?.addEventListener("click", async () => {
  const kode = document.querySelector("#contoh-kode")?.textContent || "";
  try { await navigator.clipboard.writeText(kode); }
  catch (error) { console.warn("Gagal menyalin", error); }
});

Tips sebelum dipublikasikan

1. Gunakan konteks HTTPS untuk Clipboard API.
2. Berikan fallback bila fitur tidak tersedia.
3. Jangan menyalin label bahasa kode.

Catatan untuk pengguna FajriLab

Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.

Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.