Ditulis oleh: Ditulis pada: 5/27/2019
Double Popup Banner Dengan CSS Dan Timeout Javascript - Popup banner ini cukup efektif untuk mendapatkan klik dari pengunjung, makanya sangat cocok untuk menampilkan banner iklan sebuah produk.
Sebelumnya saya sudah membagikan cara membuat popup banner dengan CSS Dan Timeout Javascript. Nah, kini saya membuat double popup banner yaitu popup ini berisi 2 buah banner dengan ditampilkan satu per satu.
Klik pada banner pertama akan memunculkan banner kedua. Saya rasa ini masih termasuk wajar, namun jika lebih dari dua banner mungkin dapat membuat kesal pengunjung.
Double popup banner ini saya buat setelah melihat ada yang menggunakan 2 buah popup banner yang saling menumpuk sehingga kurang nyaman dilihat.
Dan pada tutorial ini saya sudah memperbaiki masalah gambar yang terdeteksi pada lighthouse dan pagespeed insight untuk defer image. Gambar pertama akan dimuat begitu popup tampil dan gambar kedua akan dimuat pada klik banner pertama sehingga tidak menambah loading blog.
Selain itu, kini ditambah dengan CSS animation untuk kemunculan popup banner sehingga tidak tampak mengejutkan.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkah berikut ini.
1. Kode CSS
Silahkan simpan CSS berikut di style blog Anda.
.hide{display:none;}
.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);}
:focus,:active{outline:0}
.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;padding:0}
.popbox-close-button svg{vertical-align:middle}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:850px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}2. Kode HTML dan Javascript
Silahkan simpan kode berikut di atas kode </body>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()' role='button' tabindex='0'></div>
<div class="pop-content slideInUp">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'>
<div class="popcontent" id='imgcontent'>
<!-- <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRvYnwiHbqqir243w81GtmzDF3DQvfkdd3GcsgqlTKihZnRVuN0fIWNnGcCHZc1Nm_WDraI6mhDJxUHdVmyArvQ_18jSmWXi2j-s_f38cFhucHHYEpcLqolJp_BAO1zBJ0m40pS4mSUI/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";document.getElementById("popbox2").style.display="block";showImage()'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<div class="popbox hide" id="popbox2">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();' role='button' tabindex='0'></div>
<div class="pop-content slideInLeft">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'>
<div class="popcontent" id='imgcontent2'>
<!-- <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkre9yxFpwZcV_RbQY3NOG4xxncuFfb-cJhCgklQUk0l6qmRinPEngwMmoSxCR_sOdl6X5_gvwDScN8G2v1MXDUUVgFYlRZhwT1DK_949ucaO-xcaZ2NmLNHf98nlM5T0F4pp8-s6vns/s850/laptop.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
document.getElementById('popbox').classList.remove('hide');
document.documentElement.className+=" flowbox";
document.getElementById('imgcontent').innerHTML = document.getElementById('imgcontent').innerHTML.replace('<!--','').replace('-->','');
}, 5000);
function showImage(){document.getElementById('imgcontent2').innerHTML = document.getElementById('imgcontent2').innerHTML.replace('<!--','').replace('-->','')};
function removeClassonBody(){var element=document.documentElement;element.className=element.className.replace(" flowbox","")}
//]]>
</script>Anda tinggal mengganti URL image pertama dan kedua dan melengkapi URL link tujuan klik yang ditandai. Buat banner dengan ukuran 850x450.
Selamat mencoba dan semoga bermanfaat.