√ Cara Menciptakan Popup Banner Di Blog Ucapan “Marhaban Ya Ramadhan”

LAPAKLAMA.COM | Membuat Popup Banner di Blog | Hallo teman blogger, sebelum aku memulai artikel ini aku 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 menciptakan banner Popup untuk mengucapkan selamat menunaikan ibadah puasa kepada pengunjung blog. panduan menciptakan banner popup di blog ini, kita akan memakai instruksi CSS Dan Javascript untuk jeda kemunculan banner.

Popup banner yang akan kita buat ini secara otomatis akan muncul sehabis 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 melaksanakan 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 gampang untuk di tutup.

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

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

Cara Membuat Popup Banner di Blog

Jika anda ingin tau 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 hidangan Tema >> Edit HTML >> dan silahkan cari instruksi </body> (agar lebih gampang dalam mencari instruksi tersebut, silahkan gunakan kombinasi tombol CTRL+F)

3. Jika instruksi tadi sudah anda temukan, Tambahkan instruksi dibawah ini sempurna diatas instruksi 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyDI2HqfAkoBbfwet502baN36poYYYoNcDRiyVD6rBLzZ3x_-xuyBR3Ky3p5AlhczazgdPOP7ILdn3nas5zzsArelytA8Pg9eA9l914t-PIuqdIY0Nsea4b7cEHgl8jfksM7xrNiqeoE/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

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="√ Cara Membuat Popup Banner di Blog Ucapan “Marhaban ya Ramadhan”"> dan </a> kalau anda tidak ingin memasang link tujuan di banner tersebut.

Ganti instruksi × dengan instruksi &times; kalau anda ingin memasang di blogger.

Angka 5000 ialah waktu jeda kemunculan bannernya. silahkan ubah sesuai dengan cita-cita anda.

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

Sumber aciknadzirah.blogspot.com