How to add Responsive Bottom Sticky Ads in Blogger

How to add Responsive Bottom Sticky Ads in Blogger

Want to add bottom sticky ads to your Blogger website and give a revenue boost in Adsense then this article will super helpful to you. 

But, before that, you need to understand the basics of what is sticky ads, different types of sticky ads, and what are the guidelines given by the Adsense team for proper implementation of these ads. 

What is a sticky Ad?

A sticky ad is a fixed ad that stays visible in the exact same position regardless of the user scrolling through the content. These are generally used in the header, footer, left/right bar, left & right sidebar.

 

Types of Sticky Ads

Sticky ads are broadly divided into two categories. Eg. Horizontal & vertical. 

Horizontal ads are generally placed at the header and footer of a website & these are generally spread from one end to other ends in a landscape manner. 

Anchor ads that we get in the “auto ads” section of Adsense is an example of a Horizontal sticky ad. 

Vertical sticky ads are generally placed in the sidebar of a website and in some cases outside of the sidebar. These are designed in such a way that they will stick in the sidebar even though the user scrolls down the page. 

Benefits of using sticky ads in Blogger

Sticky ads is a great way to boost your AdSense revenue as it increases the overall impression & click-through rate [CTR] of your website as well as improve your CPM value over time. 

Here are some statistical data that proves the above point. 

 

40-60 % Higher CTR: compared to normal display ads

Improve Viewability: Up to 200% more viewable than other formats on the same placements.

30-70% Higher CPM: Advertisers shell out more for these ads. 

We will also discuss the guidelines for placing sticky ads in Blogger but before that let’s understand how you can add sticky footer ads to your website.

Before proceeding with the below steps make sure to take a backup of your theme, so that if you do anything wrong, you can easily restore your website to its original position by uploading the backup file. 

How to create Responsive Floating Bottom Sticky Ad in Blogger 

To add a bottom sticky ad on Blogger follows the below steps.

Step-1: Copy the below CSS code and paste it just above this  ]]></b:skin>  code or paste it in the additional CSS section of your theme

Copy the Below CSS 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; }

For that go to the Theme section and click on customization. Now in the advanced tab search for Add CSS section. Now paste the CSS code and save your theme.

Step-2: Now Go to Adsense and create a responsive display Ad unit. 

Now copy the data-ad-client & data-ad-slot code from the display ad unit. 

Step-3: Copy the below HTML code and replace the two codes that you copied above. 

HTML code for Sticky footer ad

<div class='AT-ads jhfdiuh0' id='AT-ads'>
<div class='AT-ads-close' onclick='document.getElementById(&quot;AT-ads&quot;).style.display=&quot;none&quot;'><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>

Step-4: Now paste the code just above the </body> tag of your theme & save it. 

Now you have successfully added the Sticky Floating Bottom Ads To Blogger Site.