How to Add Responsive Footer Sticky Ads in blogger?

Download Filmora

 Add Responsive Footer Sticky Ads in Blogger. Sticky Floating Bottom Ads in Blogger.

Hello professional blogger👋. I am Themidom, back with another informative blog post. During this blog post you are going to know that how can you add a responsive footer Sticky Ads in your blogger or any other site? So without wasting any time lets get started today's blog post titled How to Add Responsive Footer Sticky Ads in blogger?


First of all let me explain what is Sticky Ads? So basically footer Sticky are the place where you can show your Ads but it is different from normal Ads placement as normal Display Ads or In post Ads are flexible and goes down/ups with scrolling but Sticky code are non moveable but can close if user clicks on the ❌close button. We as a AdSense publisher knows that we must show ads maximum time as requirement and for that Sticky Ads is the best.

Features of using Sticky Ads in blogger or any site:

1: Higher CTR (Click-Through Rate).

2: Higher CPM (Cost Per 1000 Impression)

3: Increase Viewable Time of Ads.

(Overall It will be for our benefit if we place Sticky Ads Code)

How to Add/Place Sticky Footer Ads in blogger?

Step{1}:  For Adding Sticky Ads you have to paste some Ads code (HTML & CSS) in your Theme section. So just go to Theme>Click on edit html, after that find ]]></b:skin> and place the following code above it. If you are facing any difficulty just just click search button (Ctrl+F) and search ]]></b:skin> and then paste the code above it.

 /*--Sticky Ads CSS by*/  
 .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; }  

Step{2}:  After that search for </body>. You will find it at the last portion in your theme. After finding body closer tag Paste the following HTML code above </body>

 /*--Sticky Ads HTML code by*/  
 <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=''><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"  
    (adsbygoogle = window.adsbygoogle || []).push({});  

After Entering the HTML code go to your AdSense Account and create a Display Ads Unit names Sticky Ads or something and then add your data-ad-client and data-ad-slot after doing that just click on the save button and your Sticky Ads is ready.

data-ad-client="ca-pub-0000000000000000"      data-ad-slot="0000000000"

Sticky Ads will Shown Like Above Picture 🖼 ☝


Here's the end 🔚 of this Blog post. We will see you soon and if you faces any kind of problem regarding Sticky Ads then comment down bellow we will help you out.

                                                                        Themidom Team Thanking You


If you have have any doubt please let me know

Previous Post Next Post