How to Add Bottom Sticky Ads in Blogger and WordPress (in 6 Steps)

Post a Comment

Bottom Sticky Ads Illustration 

If you have a blogger website or a WordPress blog, and you want to increase your AdSense earnings and want a good CTR, you must place your AdSense Ads in such a way that visitors' attention is drawn to them.

So this thing must have come into your mind about where to put ads. So that the visitor sees your ads more and clicks on them.

You can use Bottom Sticky and Floating Ads. To increase the impact of your ads. With the help of bottom sticky ads, you can increase your CTR (Click Through Rate) by 40% to 60%.

Today I will tell you how to add bottom sticky or floating ads to your Blogger Website and WordPress Blog.

Blogger 

1. Go to Blogger's Dashboard.

Blogger Dashboard
 
2. Select your Blogger website on which you want to put sticky ads.

Blogger Dashboard


3. Click on the theme from the sidebar option.

Blogger Dashboard


4. Click on Customize and then click on Add CSS from the advanced option and add this code.
 .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; }   

 5. Click on Edit Html from the Drop Menu and paste the following code above the </Body> tag.
 <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>   

6. Change the data-ad-client and data-ad-slot from the above code, and replace them with the data-ad-client and data-ad-slot of your adsense.

WordPress 

1. Go to the WordPress Dashboard.
2. Click on plugins from the sidebar and click on "Add New."
3. Search for the Floating Bottom Plugin.
4. Click on Install and activate the plugin.
5. Click on Settings and select the plugin.
6. Paste the Adsense code.

 
SAQUIB SHAIKH
SAQUIB SHAIKH
My name is Saquib Shaikh and I am a Technology enthusiast. I like to write about everything from smartphones to tech gadgets.

Related Posts

Post a Comment