Make Pop Up Banner Ads on Blogs that Attract Attention

Make Pop Up Banner Ads on Blogs that Attract Attention

- This time will share a tutorial on how to make a pop up banner on a blog which of course will attract the attention of blog visitors by using CSS and Javascript. This pop up banner can function as an advertising banner on your blog if there are advertisers who want to promote their services or products on your blog. It can also be filled with other banners such as greetings of welcome or holiday celebrations such as pop up greetings for fasting or Eid al-Fitr. 

Floating Ads Tutorial or Pop Up Banners on Blogs

READ MORE

This tutorial is inspired by the magical company that also put a pop up banner on their blog. This tutorial has also been published on the Kompiajaib blog before this article was published. This pop up banner ad is accompanied by a close button in the upper right corner outside of the banner and will appear a few seconds after the visitor opens the blog page. As a note, this pop up banner will appear every time you open a new page, not only on the Homepage. 

Even though this pop up banner is used for ad slots, it is not recommended to place google adsense ads here because you could get banned because it violates Google's provisions, namely covering website content. 

With this tutorial, it is hoped that it can be used for those of you who want to increase your income by opening advertisements on your blog. 

How to Make Pop Up Banner Ads on the Website

#1 Go to the blogger dashboard

#2 Select "Themes" then click "Edit HTML

#3 Copy and paste the code below above the code </body>

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:800px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;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:20px;height:20px;line-height:20px;text-align:center;top:-10px;right:-10px;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/AVvXsEj8b5aPzVWG6jaVyXTlRzHJXAPf-RSpnCDOX2K7eMxKUmmyJCWwa-7yBQ48yixindIc7WAIygCDg7FoSezFt8waQtiAcwOlsfLz91UluA7PdojbOt1fghN61IO9GTWMZJY00XZfWOxA1gM/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();'>&times;</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(/bflowboxb/g,"")}
//]]>
 </script>

NOTE: the code in yellow can be customized. 

Code width:800px;height:400px; adjusts to the size of the banner that will be installed, while for margin code: -200px 0 0 -400px; adjusted to the height and width of the banner divided by two. 

The code <a href="#" target="_blank" rel="noopener noreferrer" title="box"> and <a can be removed if you place the banner without directing it to the destination link. You can replace the box code with text according to your wishes. Code # replace with the url you want to go to. 

Code amp;times; change to &times; if you install it on blogger. 

5000 is the time lag for the banner to appear on the blog. Increase or decrease to change the delay time. 

This is a tutorial on how to make pop up banner ads on the web. Or if you are looking for a way to make ads float on a blog, you can also use this method. For a demo, you can see this Holiday News, because it's already installed.