Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog

Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog - Pop Up banner iklan ini sangat cocok jika sobat ingin mempromosikan produk sobat atau untuk yang ingin mengiklan di blog sobat, pop up disini terdapat 2 gambar yaitu double pop up ini bisa ditambahin tapi menurut saya jangan sob, pasti pengunjung blog sobat akan merasa terganggu dengan iklan banner yang begitu banyak munculnya.

Pop Up ini tentunya sangat responsive dengan begitu ditambahkan dengan kode css pas saat proses muncul agar tidak terlalu kaku hehehe... oke langsung saja sob....

Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;

.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)}}

Setelah sudah menambahkan kode css diatas selanjutnya yaitu menambahkan kode html dan js, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<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://2.bp.blogspot.com/-lkAaAmnc26E/XR4kUIk57gI/AAAAAAAADrg/ScWYwhaEym4okbTr71_x3DpQFBantndgQCLcBGAs/s1600/loadingdns.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://2.bp.blogspot.com/-xDv-vkbPgiQ/XNle4qLmpAI/AAAAAAAADhw/22zrFTnbkCsW4fgvfN8auxHQDxfWWKNlwCLcBGAs/s1600/schema%2BQAPage-min.png" 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>

Jika sudah klik save sob.. dan lihat hasilnya diblog sobat....

Sekian yang bisa saya sampaikan tentang Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.