How to add responsive bottom sticky ad in Blogger ?

Do you Want to add bottom sticky ads in your Blogger website and get a revenue boost in AdSense then this article is for you and it will be super helpful to you. But, before doing that, you need to understand the basics of sticky ads, different types of sticky ads, and the guidelines given by the AdSense team for proper implementation of sticky ads. And also I hope you aleady seen a bottom sticky ad in my website.

how to add floating ads in blogger,how to add sticky floating bottom ads in blogger,how to add floating sticky ads,how to add sticky ads,how to add sticky ads in blogger,how to add popup ads in blogger,how to add floating ad box in blogger,how to add popup & sticky floating bottom ads in blog website,how to add floating bottom ads in blogger,how to add bottom sticky ads in blogger,sticky floating bottom ads in blogger,add responsive footer sticky ads

A sticky ad is a fixed positioned ad that stays visible in the exact same position regardless of the user scrolling through the content or not. These are generally used in the header, footer, left and right sidebar. Sticky ads are generally divided into two categories. Eg. Horizontal and 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 into 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 times outside of the sidebar. These are designed in such a way that they will stick in the sidebar even if the user scrolls down the page.

Sticky ads are 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. Here are some statistical data that proves the above point :

  • 40-60% Higher CTR compared to other normal display ads.
  • Improves viewability up to 200% more viewable than other ad format on the same placement.
  • 30-70% Higher CPM Advertisers numbers will increase more for these ads.

We will also discuss about the guidelines for placing sticky ads in Blogger but before that let’s understand how to add sticky footer ads in your website. Before proceeding with the below steps make sure you downloaded  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.

To add a bottom sticky ad in Blogger follow the 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. 

To paste the code in the additional css section go to the Theme section and click on customization. Now in the select advanced tab there you will get Add CSS option. Click on it. Now paste the CSS code on the code box and save your theme. 

Copy the CSS code below

Note: if you are not able to find the ]]></b:skin> code then search for </style> tag or paste in between your theme CSS codes.

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 script. Later on we will need it.

Step-3: Copy the HTML code given below and replace data-ad-client & data-ad-slot number you copied above.

Step-4: Now paste the html code just above the </body> tag of your theme or you can create a new html/javascript widget and save it.  

Copy the HTML code

Now your Sticky Floating Bottom Ad successfully added To your website.  

Sticky ads are a great way to improve AdSense revenue. but, It hurts desktop device users experience.  

That's why you can set a condition in the above code, so that it only shows on mobile devices and skip this on desktop devices.  So, all you need to do is add a If condition, just above and below the given HTML code.


 If you want to display the ads only on desktop devices then you have to modify the If condtion a little bit. Just change the value "true" to "false".  If you want to display sticky ads on both left and right sides of your website then you can read my another post I published.

According to Google sticky ads shouldn’t be implemented on Gaming sites and pages with infinite scroll to provide a better user experience.  Horizontal top & bottom sticky ads work well in mobile devices and vertical sticky ads work well with the desktop.  

But don’t use anchor ads and bottom sticky ads at the same time in your website because it may create a bad user experience in your website.

I hope this guide will help you add a responsive floating bottom Sticky Ad to the Blogger website. If you like this guide then don’t forget to share this with your friends and join our Telegram channel for more updates.

Post a Comment