Cara Membuat Popup Ucapan Ramadhan Responsive di Blog. Update Terbaru 2021

cloteh.com – Membuat Pop-up Ucapan Selamat Ramadhan Responsive di Blog – Ahlan wa sahlan yaa Ramadhan. Bulan ramadhan sudah di depan mata. Dimana ia sangat kita nantikan kedatangannya. Semoga di bukan ramadhan ini, kita bisa lebih baik dari ramdhan sebelumnya. Dan juga kita bisa bertemu dengan ramadhan di tahun selanjutnya. Oh iya, sebelumnya saya ingin mengucapkan SELAMAT MENEMPUH BULAN RAMADHAN untuk yang menjalankannya. Dan untuk pemilik blog, sudahkan kalian memasang banner pop up ucapan selamat ramadhan? Jika belum, berikut ini saya berikan Cara Membuat Pop-Up Ucapan Selamat Ramadhan yang sederhana namun tetap responsive.

Ucapan selamat berjenis popup seperti ini memang tidak wajib untuk pemilik blog kok. Namun, ini bisa menambah kesan peduli kepada pembaca dan juga memperindah blog kita. Oh iya, yang paling penting adalah banner yang ditampilkan akan responsive.

Maksudnya, gambar banner yang nantinya muncul akan mengikuti lebar dari device atau layar yang dipakai. Jadi kalau bukanya di ponsel gak akan terpotong gambarnya ataupun tombol tutup nya.

Oleh : Cloteh.com

CARA MEMBUAT POP-UP UCAPAN RAMADHAN RESPONSIVE

Untuk caranya sebenarnya sangat mudah. Yakni menggunakan HTML sebagai kerangkanya (kalau ini wajib). Dan diatur dengan Css tampilannya, agar bisa melayang alias sticky. Juga menggunakan sedikit bumbu javascript sebagai triger atau pemicu munculnya pop up dengan hitung mundur.

Untuk scriptnya ini saya dapat dari Kompi Ajaib. Beberapa jam lalu setelah diupload di dalam blognya. Baiklah untuk yang sudah siap. Silahkan langsung dipraktekkan. Jangan cuma dibaca. Langsung praktek.

CARA MEMBUAT POP-UP SEDERHANA DAN RESPONSIVE

• Yang pertama tentunya kamu harus sudah masuk ke dashboard blog yang ingin di pasang pop-up
• Pergi ke tab Tata Letak
• Tambahkan Widget baru dan pilih yang HTML/JAVASCRIPT (terserah ditaruh dimana, gak akan pengaruh ke tampilan)
• Silahkan Paste Script dibawah ini
• Dan terakhir simpan.

Script by Kompi ajaib :
</p> <p> </p> <div> <div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'/> <div> <a href="http://www.cloteh.com/#" target="_blank" rel="noopener noreferrer" title="box"> </p> <div> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20850%20450'%3E%3C/svg%3E" alt="banner" width="850" height="450" title="Cara Membuat Popup Ucapan Ramadhan Responsive di Blog. Update Terbaru 2021" data-lazy-src="https://2.bp.blogspot.com/-7F4VzqkZlPs/XM5pUu8SZQI/AAAAAAAAALA/JXUpgu3KsVsF9a0qhxEcHcRVdsvzY6PogCLcBGAs/s1600/20190505_113756.jpg"><noscript><img decoding="async" src="https://2.bp.blogspot.com/-7F4VzqkZlPs/XM5pUu8SZQI/AAAAAAAAALA/JXUpgu3KsVsF9a0qhxEcHcRVdsvzY6PogCLcBGAs/s1600/20190505_113756.jpg" alt="banner" width="850" height="450" title="Cara Membuat Popup Ucapan Ramadhan Responsive di Blog. Update Terbaru 2021"></noscript> </div> <p> </a><br /> <button aria-label='Close'>×</button> </div> </p></div> <p>

Perhatikan!!!

》 Pada script di atas masih menggunakan banner buatan saya. Silahkan ganti url gambarnya dengan url gambar kamu sendiri.
》 Sebaiknya gunakan gambar dengan size yang kecil. Jika size gambar kamu masih besar 1MB-an. Maka silahkan perkecil lagi dengan cara di compress
》 Untuk memberikan link pada banner. Silahkan ganti tanda tagar pada <a href=”#”  dengan link tujuan.
》 untuk mengatur waktu munculnya pop-up, silahkan ubah angka 5000 sesuai keinginanmu (1000 = 1 detik, hitungan milisecond (ms))

Jangan lupa klik simpan dan coba buka halaman blog kamu. Saya kira cuma itu cara membuatnya. Bila ada salah kata saya mohon maaf. Dan jika ada yang perlu disampaikan silahkan menuju halaman KONTAK (karena kolom komentar dimatikan).