How to Add Responsive Sticky Footer Ads on WordPress

Responsive Sticky Footer Ads: AdSense is a major part of Blogging and CPC & CTR are also, two more important things to boost our daily revenue, and Sticky Footer Ads help to Increase our CPC & CTR.

Now just follow the steps to add Responsive Sticky Footer Ads on WordPress & Blogger. Also, I am using these codes on my websites and I am getting good results after placing Responsive Sticky Footer Ads.

Sticky Footer Ads

What is a Sticky Ad?

As the name suggests Sticky ads are ads that stick to a certain position on the website despite users scrolling through the page. In this way, the sticky Ads get better exposure and draw the attention of the visitors.

You can also get the most Ad impression in this sticky ad. There is already a sticky ad functionality in the auto ads settings of Adsense called “anchor Ads“.

But we can’t customize it and display the ads according to our own choice. That’s why in this article I will show you the easiest way to add the sticky footer ads in WordPress.

Some people also called it bottom sticky ads or floating ads.

Users can easily dismiss the ad shown by clicking the cross button above the ad. In this way, you will get more earnings without hampering the user experience that much.

Here, One thing to note is that don’t use any clickable items above these ads and it must be separate from the rest of the content. You can check the Adsense Guidelines on sticky ads.

How to Add Responsive Sticky Footer Ads on WordPress

Just you have to use some codes with your Ads unit to place Sticky Footer Ads on WordPress. There are two major steps you have to follow.

Step-1: Login to your Adsense dashboard and create a responsive Display ad unit.

Step-2: Now copy publisher id and data ad slot code and replace it in the below code.

<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-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
<style>
.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;</style>

Step 3: Now Go to Appearance > theme editor > Footer.php file and search for tag.

Step-4: Paste the code just above it and update the file.

Now the sticky footer Ads will be shown on your WordPress website. You can try opening the webpage in incognito mode if it is working or not.

Using Plugin

If you don’t want to edit the theme code then you can use a code management plugin that lets you add codes in the header and footer section.

For this, I prefer to use the “Insert Headers and Footers” plugin by “WPBeginner”. It is a free code management plugin in WordPress.

you can also set display rules to this code, like show only in desktop or mobile, load only in homepage or post page, etc.

Conclusion

Follow these steps carefully to show Responsive Sticky Footer Ads on Blogger, I think these methods work for you.

If you have any problems then comment below, also you can ask your doubts, if you like the post then share it with your friends.

Also, tell me if the sticky ad improves your click-through rate(CTR) or not.

Don’t forget to Subscribe to our YouTube channel for more Tutorials like this.

Leave a Comment