How to Add Responsive Bottom Sticky Ads in Blogger

How to Add Responsive Bottom Sticky Ads in Blogger

Today in this post we will know How To Add Bottom Sticky Ads In Blogger Footer. You must install Responsive Sticky Bottom Floating Ads in Footer to increase the Earning of your Blog.

So today I will tell you in this post how you can put Bottom Floating Ads like WordPress in Blogger Blog and How To Add Bottom Floating Sticky Ads In Blogger Footer.

What are Sticky Ads?

There are ads to be shown in the Header and Footer of the Sticky Ads Post or in the Right and Left Sides. These ads are easily visible to the visitor and the chances of clicking on ads increase, so to increase Adsense Earning, first of all, you must add Sticky Ads to your blog.

Chances of getting clicked on Sticky Ads become even more when there is a high amount of traffic on your website.

How To Add Responsive Sticky Bottom Floating Ads In Blogger

To apply Bottom Floating Sticky Ads, you have to add some codes to your blog which is very simple so let’s see the steps

Step 1. First of all copy, the codes are given below.

<!-- Footer Sticky Ad by codebarta.com -->
<style>.AT-ads{position:fixed;bottom:0;left:0;width:100%;min-height:70px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.AT-ads-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.AT-ads .AT-ads-close svg{width:22px;height:22px;fill:#000}
.AT-ads .AT-ads-content{overflow:hidden;display:block;position:relative;height:70px;width:100%;margin-right:10px;margin-left:10px}
</style>

Step 2. Now go to your Blogger Dashboard and click on Theme>Edit HTML and search </head> by pressing Ctrl+F and paste the CSS Codes just copied above it.

how to add floating ads in footer in blogger

Step 3. Now again copy the below codes and go to Edit HTML and paste it just above </body>.

<!-- Footer Sticky Ads by codebarta.com -->
<div class='AT-ads jhfdiuh0' id='AT-ads'>
<div class='AT-ads-close' onclick='document.getElementById("AT-ads").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='AT-ads-content'>
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

Now in the above CSS Codes, instead of Ca Pub: xxxxx and xxxxx, paste the Display Ad number of your Adsense Account and save it.

I hope you have installed Sticky Ads in your blog. You will get this post from our How To Add Bottom Floating Ads In Blogger Footer. If you face any problem in adding Codes to Footer, then definitely tell by commenting below.

Leave a Comment