Cara Membuat Box Copy Dengan Tampilan Popup Iklan di Blogger

Panduan ini menjelaskan cara membuat box untuk menyalin teks (copy text) yang ketika diklik akan menampilkan popup iklan beserta hitungan mundur otomatis.

---

1. Login ke Blogger

Masuk ke dashboard Blogger Anda seperti biasa.

2. Masuk ke Menu Tema

Klik Edit HTML untuk membuka kode template.

3. Tempelkan kode berikut sebelum tag </body>

Kode ini berguna sebagai popup iklan global dan fungsi copy.

<div id="popupAds" style="
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.8);
    z-index:99999;
    color:#fff;
    font-family:Arial;
    text-align:center;
    padding-top:100px;
">
    <div style="background:#222; padding:20px; border-radius:10px; width:80%; margin:auto;">
        <h2>Iklan tampil dalam <span id="countDown">10</span> detik</h2>
        <div style="margin-top:20px;">
            <div style="background:#555; height:200px; border-radius:10px;">
                <p style="padding-top:80px;">KODE_IKLAN_DISINI</p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const boxes = document.querySelectorAll(".safelinkBox");
    const popupAds = document.getElementById("popupAds");
    const countDown = document.getElementById("countDown");

    boxes.forEach(box => {
        box.addEventListener("click", function () {

            const text = box.textContent.trim();

            navigator.clipboard.writeText(text).then(() => {
                box.textContent = "Berhasil di salin " + text;
                setTimeout(() => { box.textContent = text; }, 1500);
            });

            popupAds.style.display = "block";
            let time = 10;
            countDown.textContent = time;

            let timer = setInterval(() => {
                time--;
                countDown.textContent = time;

                if (time <= 0) {
                    clearInterval(timer);
                    popupAds.style.display = "none";
                }
            }, 1000);

        });
    });
});
</script>

4. Ganti kode iklan

Pada bagian KODE_IKLAN_DISINI, ganti dengan script iklan Anda.

5. Simpan Template

Klik Simpan untuk menerapkan perubahan.

6. Buat Postingan Baru

Masuk ke menu Posting → Buat postingan.

7. Tambahkan Box Copy Berikut di Postingan

Letakkan kode berikut di dalam postingan (mode HTML):

<div class="safelinkBox"   
     style="  
        padding: 15px;   
        background: linear-gradient(90deg, #a8ff78, #78ffd6);   
        border: 2px solid #28a745;   
        border-radius: 10px;   
        word-break: break-all;   
        text-align: center;   
        font-family: Arial, sans-serif;   
        font-size: 16px;   
        cursor: pointer;  
        transition: 0.3s;  
     "   
     title="Klik untuk menyalin">  
    Isi_Konten  
</div>

8. Publikasikan Postingan

Sekarang box copy sudah aktif dan otomatis menampilkan popup iklan.

---

Dengan langkah-langkah ini, Anda dapat membuat box copy dengan popup iklan yang tampil otomatis selama hitungan mundur. Sangat ideal untuk blog safelink atau konten script.