Make Ads Float on the Left and Right of the Blog

The ad that floats on the left and right of this blogs is only displayed on deskstops up to a device size of 800px, because if it is displayed on all devices sizes then this ad will cover the content on small devices such as mobiles devices.

Make Ads Float on the Left and Right of the Blog

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 Blog

Save the following CSS in your amp-custom blog 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 save it in the HTML edit above the code </body> or you can save it 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>
<!-- ads goes here -->
</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>
<!-- ads goes here -->
</div>

Use a unique dynamic ad with a size of 160px x 600px and use an 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 Blog

Save the following code in the HTML widget for the 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>
<!-- ads goes here -->
</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>
<!-- ads goes here -->
</div>

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

However, it's best to save the CSS code in HTML edit's. For Wordpress, save style.php, so that only the HTML code is in the widget.

Here it doesn't have to be just for Adsense Advertising banners or for affiliate banners.