How to Add Floating Sidebar Ads in Blogger Website
Hello friends! Welcome to The Kathait blog. So in today's article, we are going to talk about "How to Add Floating Sidebar Ads in Blogger Website" And what is this & how can we use them. So we will know all these things in this article. So stay tuned to this article and know in full detail.
What is Floating Ads?
So friends, if you are a blogger then you must be well aware of Ads. Whether it is AdSense Ads or any other Platform Ads. So if you have made your own blog and have placed ads in your blog, then let me tell you that we go to the blogger's layout, but many times you must have seen in other sites that Ads are Float i.e. floating on the display.
While the whole page scrolls as well. You will get to see this mostly on news websites or the website that shells the product, we know these floating ads as Floating Ads and you will be happy to know that if you put Floating Ads on your website then you will earn more. Might be possible.
Add Floating Sidebar Ads in Blogger Website
<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:60px;width:160px;height:600px;z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:0}
.fixed-rightSd{right:0}
.close-fixedSd{position:absolute;width:160px;height:15px;line-height:15px;font-size:11px;font-weight:400;top:-15px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:800px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
</style>
<div class="fixed-leftSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display="none"">
CLOSE ADS
</div>
----Enter Ads Code----
</div>
<div class="fixed-rightSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display="none"">
CLOSE ADS
</div>
----Enter Ads Code----
</div>
Footer floating Ads in Blogger Website
Search for this code </body> tag on your template and paste the following code just above it.
<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div>
<a id='close-fixedban' onclick='document.getElementById("fixedban").style.display = "none";' style='cursor:pointer;'><img alt='close' src='https://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<!-- paste ads-->
</div>
</div>
If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.
If you found this article useful, do share it, and don't forget to give us your feedback in the comments section. Your one feedback inspires us to write more good tutorials
© Copyright The Kathait
