How to Add Responsive Footer Sticky Ads on WordPress and Blogger (HTML Code 2024)

Assalamu Alaikum Dear Reader, Hope you are well. Many of you would like to know how to add a Responsive Footer Sticky Ad to Blogger or WordPress website. In today's article, we will discuss it in detail. We will tell you how to add a Responsive Footer Sticky Ad to blogger or website very easily by HTML code. And along with that, we must provide the HTML code of a footer sticky ad. So, hope you read the whole article carefully. So let's get started without further ado.

What is Footer Sticky Ad?

Footer sticky ad is a very popular widget on blogger or WordPress websites. Many of you must know what footer sticky ad is or what it does. Still, we will tell you again. Footer sticky ad is a type of ad or advertisement that shows at the very bottom of the screen, i.e. in the footer. It shows at the bottom of the screen on both mobile and desktop devices. Everyone uses footer sticky ads to increase income from other advertising platforms, including AdSense.

What is Responsive Footer Sticky Ad?

Responsiveness must be taken into consideration while adding any widget. Similarly, while adding footer sticky ad, we need to take care about responsiveness. Responsive Footer Sticky Ad means that this ad is friendly for any device. That is, if you want to show an ad very nicely at the bottom of the screen on mobile or desktop or tablet devices, then you must make the footer sticky Ad responsive. This can usually be done by modifying the code. In today's article, we will provide you with HTML code for a Responsive Footer Sticky Ad, so don't worry.

Why Responsive Footer Sticky Ad is Necessary

This is definitely an important point because if your footer sticky ad is not device friendly, it will have a negative impact on the user experience. Even your ad may not get proper engagement. It will be completely visual, which will destroy your quality. So we must use a Responsive Footer Sticky Ad.

Learn how to add Responsive Footer Sticky Ad

If you want to add a Responsive Footer Sticky Ad to your Blogger or WordPress website, then follow the below guidelines.

First, login to your blogger dashboard
Now click on layout option from your dashboard
Then add a new HTML code to the sidebar menu from the layout section
Place the code of Responsive Footer Sticky Ad provided by us in the HTML code
Modify the code with your Ad codes and your details
Now save the HTML code
Now visit your blog, hope you can see a nice responsive footer sticky ad

Similarly, you save the code of Responsive Footer Sticky Ad provided by us before the </body> tag on your WordPress website. Find the closing </body> tag in your template. You can use the browser's search function (Ctrl + F or Command + F) to locate it quickly. Hopefully by using Responsive Footer Sticky Ads your ad engagement will increase, and you will get good benefits from it.

Responsive Footer Sticky Ad HTML Code

<style>
/* Add some styling to the sticky ad container */
#sticky-footer-ad {
position: fixed;
bottom: 0;
left: 0;
width: 95%;
max-width: 600px; /* Adjust the maximum width as needed */
text-align: center;
justify-content:center;
background-color: #fff; /* You can customize the background color */
padding: 10px; /* Adjust padding as needed */
border-top: 1px solid #ddd; /* Optional: Add a border at the top */
z-index: 9999; /* Make sure it's on top of other elements */
display: none; /* Initially hide the ad */
margin: 0 auto; /* Center the ad on the screen */
}

/* Style the close button */
#close-ad-btn {
cursor: pointer;
position: absolute;
top: 5px;
right: 10px;
font-size: 33px;
color: #000;
}

/* Make the ad responsive */
.adsbygoogle {
max-width: 95%;
}
</style>

<div id="sticky-footer-ad">
<span id="close-ad-btn" onclick="closeStickyAd()">×</span>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

<script>
// Function to close the sticky ad
function closeStickyAd() {
document.getElementById('sticky-footer-ad').style.display = 'none';
}

// Show the ad after a delay (adjust as needed)
setTimeout(function() {
document.getElementById('sticky-footer-ad').style.display = 'block';
}, 3000); // Show the ad after 3 seconds (adjust as needed)
</script>

Our last words

Dear readers, in today's article we have discussed how to add Responsive Footer Sticky Ad only through HTML code. If you have any query about this post then definitely comment us, and we will solve it. No more today, see you with a new post, till then stay tuned.