Cara Membuat Script Otomatis Menyalin Teks dari Banyak Textarea Sekaligus

November 04, 2025

💾 Cara Membuat Script Otomatis Menyalin Teks dari Banyak Textarea Sekaligus

Dalam beberapa kasus, kita ingin agar pengunjung blog dapat menyalin teks dengan cepat hanya dengan menekan area teks (textarea). Biasanya digunakan pada situs generator, kode HTML, atau link download. Nah, kali ini kita akan membuat versi yang lebih canggih — yaitu beberapa textarea sekaligus, semuanya bisa disalin otomatis hanya dengan satu klik, dan juga menampilkan iklan overlay dengan timer saat teks disalin.

✨ Langkah-langkah Pembuatan

Buat beberapa textarea dan beri class yang sama misalnya copyArea.
Gunakan JavaScript untuk menambahkan event klik pada semua textarea tersebut.
Saat diklik, teks otomatis disalin ke clipboard, kemudian muncul overlay iklan dengan progress bar dan timer.

📜 Contoh Script Lengkap

Berikut contoh script yang bisa langsung ditempel ke postingan Blogspot Anda:

 <style>
/* Overlay iklan fullscreen */
#overlayAd {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.95);
  display: none;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  color: white;
  text-align: center;
  overflow-y: auto;
  padding: 60px 0;
}
#adBox {
  background: #222;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 0 15px #000;
  max-width: 90%;
  width: 360px;
  margin: 80px auto;
}
#progressTop {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  width: 0%;
  background: linear-gradient(90deg, #00ff99, #00ccff);
  transition: width 0.3s linear;
  z-index: 10000;
  border-radius: 0 0 3px 3px;
}
#timerSmall {
  position: fixed;
  top: 10px;
  right: 15px;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #00ffcc;
  z-index: 10001;
  display: none;
}
</style>

<!-- Beberapa Textarea -->
<textarea class="copyArea" cols="50" rows="3" readonly style="background:#A9A9A9;border:1px dotted #800080;color:#FF0000;margin:10px;padding:5px;cursor:pointer;">
https://ayi-service.blogspot.com
</textarea>

<textarea class="copyArea" cols="50" rows="3" readonly style="background:#A9A9A9;border:1px dotted #800080;color:#FF0000;margin:10px;padding:5px;cursor:pointer;">
https://drop-co.blogspot.com
</textarea>

<textarea class="copyArea" cols="50" rows="3" readonly style="background:#A9A9A9;border:1px dotted #800080;color:#FF0000;margin:10px;padding:5px;cursor:pointer;">
https://berkahjayaabadi.blogspot.com
</textarea>

<!-- Overlay dan elemen pendukung -->
<div id="overlayAd">
  <div id="adBox">
    <h2>Tunggu sebentar...</h2>
    <p>Iklan sedang diputar untuk membuka link Anda</p>
    <div style="margin:15px 0;">
      <img src="https://via.placeholder.com/300x150?text=Iklan+Promo+Menarik"
           alt="Iklan" style="width:100%;border-radius:10px;">
    </div>
    <p>Scroll ke bawah bila iklan panjang</p>
  </div>
</div>

<div id="progressTop"></div>
<div id="timerSmall">00:00</div>

<script>
document.querySelectorAll('.copyArea').forEach(area => {
  area.addEventListener('click', function() {
    // Salin teks dari textarea yang diklik
    this.select();
    document.execCommand('copy');

    // Tampilkan overlay dan animasi
    const overlayAd = document.getElementById('overlayAd');
    const timerSmall = document.getElementById('timerSmall');
    const progressTop = document.getElementById('progressTop');

    overlayAd.style.display = "flex";
    timerSmall.style.display = "block";

    const totalTime = Math.floor(Math.random() * 6) + 10;
    let timeLeft = totalTime;

    const timer = setInterval(() => {
      timeLeft--;
      timerSmall.textContent = `00:${timeLeft.toString().padStart(2,'0')}`;
      progressTop.style.width = ((totalTime - timeLeft) / totalTime * 100) + "%";

      if (timeLeft <= 0) {
        clearInterval(timer);
        overlayAd.style.display = "none";
        progressTop.style.width = "0%";
        timerSmall.style.display = "none";
        alert("✅ Teks disalin dan iklan selesai ditampilkan!");
      }
    }, 1000);
  });
});
</script>

00:00

🧠 Cara Kerja Script

Semua textarea diberi class copyArea sehingga bisa diproses bersamaan.
Event click mendeteksi textarea yang diklik, lalu menyalin teks di dalamnya.
Setelah disalin, muncul overlay iklan dengan timer dan progress bar.
Timer acak antara 10–15 detik membuatnya tampak lebih natural.

💡 Tips Tambahan

Anda bisa mengganti gambar iklan sesuai kebutuhan.
Tambahkan link redirect otomatis setelah timer selesai jika ingin mengarahkan ke URL hasil salinan.
Gunakan desain overlay yang tidak terlalu mengganggu pengalaman pengguna agar tetap nyaman digunakan.

Selamat mencoba membuat fitur salin otomatis multi-textarea! 🚀 Cocok untuk tool generator, safelink, maupun script penampil kode di Blogspot Anda.

Search This Blog

Blog Responsive 2015