How to Make Floating Ads to the Left and Right of the Blog

How to Make Floating Ads to the Left and Right of the Blog- Ads that float on the left and right of the blog are only displayed on the desktop only up to 800px in size, because if displayed on all sizes of devices, these ads will cover content on small devices such as mobile devices.

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 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>
<!-- Silah simpan kode iklan di bawah ini -->

</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>
<!-- Please save the ad code below -->

</div>

Use dynamic ad units 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>
<!-- Please save the ad 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>
<!-- Please save the ad code below -->

</div>

Use dynamic ad units of 160px x 600px size.

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 only for Adsense ads, but it can also be for independent banner ads or for affiliate banners.