Home How to How to Make Double Pop Up Responsive Ad Banners on Blogs

How to

How to Make Double Pop Up Responsive Ad Banners on Blogs

0 Edit

How to Make Double Pop Up Responsive Ad Banners on Blogs - Pop Up Ad Banners is very suitable if you want to promote your products or for those who want to advertise on your blog, there are 2 pop up images here, this double pop up can be added but in my opinion don't Friend, surely your blog visitors will feel disturbed by the banner ads that appear so much.

Pop Up is certainly very responsive, so it is added with the appropriate CSS code when the process appears so that it's not too rigid hehe ... okay, just right, friend

Demo

How to Make Double Pop Up Responsive Ad Banners on Blogs

First, my friend enter first to Blogger > Themes > Edit HTML then copy the code below and paste it directly above the code ]]></b:skin>or ]]></b:skin>

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

After adding the above css code, i.e. add html and js code, copy the code below and paste it directly above the code </body>or </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/AVvXsEhNFEPDeKuWJ3YL0X0w3XTe00g52TkHFWQsQOMq4ER09BYBr1XbowjibWAql-0ZO33wxUJVXUN5RRt3_tRpM-BffTwEANDnsdSImYvOpjbePw6NnOOmceZzObeSF4bFCysS8zg_aSmVNpE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GvdH34DlleW9yeDyaPvUqSirw2NImzSLOOM_stg3E1yQ2Xo5sUPj5lyrDBHd1YptmTqnZe8CfDQcW5RUG7NIxR25xCyGTergKLN4ghrQTf5bnujbFvP3pugu1s7BIRSOQPk3vLiiOEc/s1600/schema+QAPage-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>

If you've clicked save, friend, and see the results in your blog, friend ...

That's all I can say about How to Make Double Pop Up Responsive Ad Banners on Blogs Thank you for visiting, hopefully, it will be useful for all of you.

Leave Comments

Post a Comment

Subscribe to: Post Comments (Atom)