Sebelum Anda membaca Artikel blogspot tentang

Cara Membuat Script Otomatis Menyalin Teks dari Banyak Textarea Sekaligus

. Anda juga bisa melihat artikel artikel blog yang tak kalah menarik dibawah ini: 💲💲💲

dan Berikut ini Artikel lengkap tentang

Cara Membuat Script Otomatis Menyalin Teks dari Banyak Textarea Sekaligus

💾 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

1. Buat beberapa textarea dan beri class yang sama misalnya copyArea.
2. Gunakan JavaScript untuk menambahkan event klik pada semua textarea tersebut.
3. 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>

Tunggu sebentar...

Iklan sedang diputar untuk membuka script yang di salin

Scroll ke bawah bila iklan panjang

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.

👍.

Tweet