How To Make A Floating Footer Ad Position On Your Website

Play Video

PHP CODE:

Add this script to your FOOTER.PHP file on your website before the closing “/body” tag.

Delete & Replace: “//your bunker media group code HERE//” with your ad script in your email.

				
					<?php wp_footer(); ?>
<div class='NR-Ads jhfdiuh0' id='NR-Ads'>
<div class='NR-Ads-close' onclick='document.getElementById(&quot;NR-Ads&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='NR-Ads-content'>
<center>
//your bunker media group code HERE//

</center>
</div>
</div>

CSS:

Add this CSS script to your “STYLE.CSS” file.

				
					.NR-Ads { position: fixed; bottom: -17px; left: 0; width: 100%; min-height: 70px; max-height: 120px; padding: 1px 1px; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; z-index: 20; } 

.NR-Ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } 
 
.NR-Ads .NR-Ads-close svg { width: 22px; height: 22px; fill: #000; } 
 
.NR-Ads .NR-Ads-content {width: 728px; }

@media only screen 
and (max-device-width: 600px)
 { .NR-Ads { 
    width: 100%;
    position: -20px;
    margin: 0px 0px -25px;
} }		

@media only screen 
and (max-device-width: 600px)
 { .NR-Ads .NR-Ads-content {width: 360px;
} }

Ad Adjustments:

As each website will be display the ad code differently. Many will show it correctly but in the off chance yours doesn’t you can adjust the height:90px;”

Exp: If the ad isn’t showing the bottom half of the ad. Try changing the height from 90px to 110px

Save/Update

				
					<iframe style="border:0;width:100%;height:90px;" width="100%" scrolling="no" id="bsaIframe44" src="https://bunkermediagroup.com/api/?id=44&i=1&secure=d162326a29b06af039b3fb763be44d5b5ffb1985"> </iframe>

So it now looks like this:

				
					<iframe style="border:0;width:100%;height:110px;" width="100%" scrolling="no" id="bsaIframe44" src="https://bunkermediagroup.com/api/?id=44&i=1&secure=d162326a29b06af039b3fb763be44d5b5ffb1985"> </iframe>