How to Add Floating Sidebar Ads in Blogger Website

Copy

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

So let me tell you that there are many types of these floating ads. Like some floating ads are at the bottom. But the ones that float on both sides of the floating ad are displayed. We also know it as a floating ad in the blogger sidebar. How to Add Floating Sidebar Ads in Blogger Website So friends now we will know how we can implement Floating Ads in the sidebar of our Blogger blog. So below I have explained all the steps in detail. Read carefully and apply.

Step 1: First of all you have to log in to the dashboard of Blogger.

Step 2: Now you will get the HTML code in the box below, copy it.

<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=&quot;none&quot;">
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=&quot;none&quot;">
CLOSE ADS
</div>
----Enter Ads Code----
</div>

Step 3 Now in the copied code you have to paste your Ad Code instead of Enter Ad Code

Step 5 Now you have to save your copied code by pasting it in HTML/JavaScript.

Now your Floating Ads have been successfully saved in the sidebar of your Blogger Blog.

Sticky ads are also called anchor ads because they are attached to the screen. These are available on both desktop and mobile devices. Implementing sticky ads on your website, however, may not always be the best option.

Footer floating Ads in Blogger Website

Sticky Ads can be great at increasing viewability and often result in high ad revenue, but they can also provide a poor user experience depending on whether or not they hinder users from viewing your content.

Although the lack of user experience is obvious, some publishers claim to earn the bulk of their revenue from footer floating ads. Again, this can vary between publishers, and many variables can affect ad revenue.

If you want to put sticky ads on your blog, then follow the code given below.

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.

Conclusion;

How did you like this article of Add Floating Sidebar Ads in Blogger? You must tell by commenting in the comment box below. Or if you want to give any kind of suggestion, then you can share your opinion with us in the comment box below.

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

How to Add Floating Sidebar Ads in Blogger Website

What is Floating Ads?

Add Floating Sidebar Ads in Blogger Website

Footer floating Ads in Blogger Website

Post a Comment