Creating Floating Ads On the Left and Right on AMP or Non AMP Blog

Creating Floating Ads On the Left and Right Blog - This post I made to meet the requests of friends of the Magic Company to create floating ads on the left and right of the blog that can be used on Blogger and Wordpress.

Ads that float on the left and right of this blog are only displayed on the desktop only up to 800px device size, because if displayed on all sizes of devices, this ad will cover content on small devices such as mobile devices.

I have prepared the code for AMP and NON AMP, so you just copy the code and paste it on your blog. 

1. For AMP

Please save the following CSS in your blog's custom amp style.

.fixed-lside,.fixed-rside{position:fixed;top:60px;width:160px;height:600px;z-index:9999;}
.fixed-lside{ left:0;}
.fixed-rside{right:0;}
.close-fixedside{position:absolute;width:160px;height:15px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer}
@media screen and (max-width:800px){
.fixed-lside,.fixed-rside{display:none;visibility:hidden;}
}

Then please save the HTML edited above the code </body> or can be saved in the layout in the HTML / JavaScript widget.

<div class="fixed-lside" id="fixed-lside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" on="tap:fixed-lside.hide">
CLOSE ADS
</div>
<!-- Save your Ads code below  -->
</div>
<div class="fixed-rside" id="fixed-rside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" on="tap:fixed-rside.hide">
CLOSE ADS
</div>
<!-- Save your Ads code below -->
</div>

Use unique dynamic ads with a size of 160px x 600px and use amp ad code like this

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='xxxxxxxxx' height='600' media='(min-width: 801px)' type='adsense' width='160'/>

2. For NON AMP

Please save the following code in the HTML widget of both Blogger and Wordpress

<style>
.fixed-lside,.fixed-rside {position:fixed;top:60px;width:160px;height:600px;z-index:9999;}
.fixed-lside {left:0;}
.fixed-rside {right:0;}
.close-fixedside{position:absolute;width:160px;height:15px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer}
@media screen and (max-width:800px){
.fixed-lside,.fixed-rside{display:none;visibility:hidden;}
}
</style>
<div class="fixed-lside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Save Your Ads Code Below -->
</div>
<div class="fixed-rside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Save Your Ads Code Below -->
</div>

Use unique dynamic ads with a size of 160px x 600px.

But you should save the CSS code in HTML edit, if for Wordpress save style.php , so the widget is only HTML code.

Here it doesn't have to be for Adsense ads only, but it can also be for independent banner ads or for affiliate banners. Maybe Usefull….