Cara Membuat Popup Banner di Blog Ucapan “Marhaban ya Ramadhan”

  • Whatsapp
Membuat Popup Banner
5/5 (2)

LAPAKLAMA.COM | Membuat Popup Banner di Blog | Hallo sobat blogger, sebelum saya memulai artikel ini saya dan segenap tim pengurus situs lapaklama.com mengucapkan selamat menunaikan ibadah puasa ramadhan bagi yang menjalankannya.

Nah mumpung kita sedang menjalankan ibadah puasa sebagai pemilik blog tidak ada salahnya membuat banner Popup untuk mengucapkan selamat menunaikan ibadah puasa kepada pengunjung blog. panduan membuat banner popup di blog ini, kita akan menggunakan kode CSS Dan Javascript untuk jeda kemunculan banner.

Popup banner yang akan kita buat ini secara otomatis akan muncul setelah pengunjung berada di blog kita untuk beberapa detik. jadi akan ada jeda antara pengunjung dan kemunculan banner tersebut.

Banner juga akan muncul setiap kali pengunjung tersebut melakukan merefresh halaman atau membuka halaman lainya yang ada di dalam blog kita.

Demi kenyamanan pengunjung, banner ini sudah dilengkapi dengan tombol close, dan juga sangat mudah untuk di tutup.

Selain dapat anda gunakan untuk memunculkan banner ucapan Marhaban ya Ramadhan, tutorial ini juga bisa anda gunakan untuk memunculkan banner Ads, namun tidak kami sarankan untuk digunakan di iklan google adsense.

Dari pada terlalu banyak berbasa basi, mari langsung saja kita mulai panduan lengkapnya.

Cara Membuat Popup Banner di Blog

Jika anda penasaran bagaimana sih hasil dari Banner Popup yang kita buat ini, silahkan lihat pada halaman demo berikut ini.

Live Demo

1. Silahkan masuk dihalaman dasboard blogger kalian.

2. Kemudian pilih menu Tema >> Edit HTML >> dan silahkan cari kode </body> (agar lebih mudah dalam mencari kode tersebut, silahkan gunakan kombinasi tombol CTRL+F)

3. Jika kode tadi sudah anda temukan, Tambahkan kode dibawah ini tepat diatas kode tersebut.

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:850px;height:450px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>
<div class="pop-content">
<a href="#" target="_blank" rel="noopener noreferrer" title="box">
<div class="popcontent">
<img src="https://2.bp.blogspot.com/-d6sRdYCCXIM/XM5PXEp9m-I/AAAAAAABKUM/q0BOQ0RUVeEmmDfO9SD6FqxXuMb-GTQ9QCLcBGAs/s850/ramadan.jpg" alt="banner" width="850" height="450"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>×</button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 5000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bflowbox\b/g,"")}
//]]>
 </script>

Setelah seleai jangan lupa klik tombol Simpan Perubahan

Baca Juga: Cara Membuat Menu Melayang Ketika Discroll di Blog

Catatan:

  • Kode width:850px;height:450px; Silahkan sesuaikan dengan lebar dan tinggi banner yang ingin anda pasanag.
  • Kode margin:-225px 0 0 -425px; Silahkan sesuaikan dengan nilai negative dari tinggi banner dibagi 2 dan nilai negative dari lebar banner dibagi 2.
  • Hapus Kode <a href="#" target="_blank" rel="noopener noreferrer" title="box"> dan </a> jika anda tidak ingin memasang link tujuan di banner tersebut.
  • Ganti kode &times; dengan kode &amp;times; jika anda ingin memasang di blogger.
  • Angka 5000 adalah waktu jeda kemunculan bannernya. silahkan ubah sesuai dengan keinginan anda.

Selesai. Selamat mencoba dan terimakasih telah berkunjung ke situs lapaklama.com

Nilai Kualitas Konten

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *