Do you want to add Bottom Sticky Ads to your Blogger website and increase AdSense income? Then this post is going to be very helpful for you.
But, before that, you need to understand what are sticky ads, different types of sticky ads and the guidelines given by AdSense team for proper implementation of these ads.
What is a sticky Ad?
A sticky ad is a fixed ad that keeps the ad visible in the exact same position when a user reads an article. They are commonly used in header, footer, left/right bar, left and right sidebar.
Types of Sticky Ads
Sticky Ads are broadly divided into two categories. Such as horizontal & vertical.
Horizontal ads are usually placed in the header and footer of a website and are usually spread from one end to the other in a landscape manner.
An example of a Horizontal sticky ad is the anchor ads we find in the “Auto Ads” section of AdSense.
Vertical sticky ads are usually placed in the sidebar of a website and in some cases outside the sidebar. They are designed in such a way that even if the user scrolls the page, it will stick to the sidebar.
Benefits of using sticky ads in Blogger
sticky ad is a great way to increase your AdSense earnings as it increases your website's overall impression and click-through-rate [CTR] and also improves your CPM value over time.
Here are some statistical facts that prove the above point.
- 40-60% higher CTR: compared to normal display ads
- Improve Viewability: 200% more viewable than other formats at the same placement.
- 30-70% Higher CPM: Advertisers make more for these ads.
We will also discuss the guide to placing sticky ads in blogger but before that let's know how you can add sticky footer ads to your website.
Make sure to take a backup of your theme before proceeding with the steps below, so that if you make a mistake, you can easily restore your website to its original state by uploading the backup file.
How to create Responsive Floating Bottom Sticky Ad in Blogger
Follow the steps below to add Bottom Sticky Ad to Blogger.
Step-1: Copy the following 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
.sticky-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; } .sticky-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); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px;
margin-left: 10px; }
For this go to Theme Section and click on Customization. Now search for Add CSS section in Advanced tab. Now paste the CSS code and save your theme.
Step-2: Now go to AdSense and create a responsive display Ad unit.
Now copy data-ad-client & data-ad-slot code from display Ad unit.
Step-3: Copy the HTML code below and replace the two codes you copied above.
HTML code for Sticky footer ad
<div class=’sticky-ads’ id=’sticky-ads’> <div class=’sticky-ads-close’ onclick=’document.getElementById("sticky-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=’sticky-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 and save it.
Now you have successfully added sticky floating bottom ads to blogger site.
