How to Create Sticky Footer Ads for Blogger & WordPress 2025

Sticky footer ads are a powerful tool for website owners looking to increase ad visibility and engagement. These types of ads remain fixed at the bottom of the screen as users scroll through content, ensuring they stay visible and accessible. In this article, we’ll explore how to create sticky footer ads for both Blogger and WordPress websites to boost your ad revenue and enhance user experience.

What Are Sticky Footer Ads?

Sticky footer ads are ads that “stick” to the bottom of the page as the user scrolls, making them continuously visible without obstructing the main content. Unlike static banner ads that only appear at specific points, sticky footer ads maintain their presence throughout the user’s session, leading to higher ad impressions and click-through rates (CTR).

These ads can take various forms, such as image banners, text ads, or Google AdSense units, and can be placed at the bottom of the page for both desktop and mobile users.

Why Should You Use Sticky Footer Ads?

Using sticky footer ads can significantly enhance your website’s monetization strategy for several reasons:

1. Improved Visibility: Sticky footer ads remain visible at all times, increasing the chances of user interaction and engagement.
2. Higher Click-Through Rates (CTR): These ads are always present, meaning they’re more likely to be clicked compared to static ads.
3. Better User Experience: When done correctly, sticky footer ads don’t interrupt the user experience but enhance it by providing relevant ads that users are more likely to engage with.

Now, let’s break down the steps to create sticky footer ads for Blogger and WordPress.

How to Create Sticky Footer Ads for Blogger

Step 1: Add Custom CSS for Sticky Footer

To add a sticky footer ad in Blogger, you need to insert custom CSS to style the ad’s position. Follow these steps:

1. Go to your Blogger Dashboard.
2. Click on Theme > Customize.
3. Navigate to the Advanced section and select Add CSS.
4. Paste the following CSS code:

.NR-Ads {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 90px;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 -6px 18px rgba(9, 32, 76, 0.1);
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.NR-Ads-close {
    position: absolute;
    right: 0;
    top: -30px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 12px;
}

.NR-Ads .NR-Ads-content {
    display: block;
    height: 70px;
    width: 100%;
}

This CSS ensures that the ad will stay at the bottom of the screen and be visible at all times as users scroll.

Step 2: Insert the Ad Code

Once you’ve added the CSS, the next step is to insert the ad unit. Here’s how you can do it:

1. Create a responsive ad unit in Google AdSense or another ad network.
2. Copy the data-ad-client and data-ad-slot from your ad unit.
3. Insert the following HTML code into your Blogger template just above the </body> tag:

<div class="NR-Ads">
    <div class="NR-Ads-close" onclick="document.getElementById('NR-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="NR-Ads-content">
        <center>
            <ins class="adsbygoogle"
                style="display:inline-block;height:70px;width:100%;"
                data-ad-client="ca-pub-xxxxxxxxxxx"
                data-ad-slot="xxxxxxxxxxx"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </center>
    </div>
</div>

Replace the data-ad-client and data-ad-slot values with your own.

How to Create Sticky Footer Ads for WordPress

Creating sticky footer ads for WordPress is even easier, thanks to plugins. Let’s walk through the steps.

Step 1: Install a Plugin

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for the Ace Sticky Ads Plugin or WP Sticky Ads.
4. Install and activate the plugin.

Step 2: Create a New Ad Unit

1. After activation, go to Settings > Sticky Ads (or the plugin settings section).
2. Create a new ad unit and select Sticky Footer as the ad type.
3. Paste your Google AdSense code (or any other ad code) into the provided box.

Step 3: Configure the Display Settings

1. Adjust the settings to control when the ad will appear (e.g., after scrolling for a few seconds).
2. Save the changes.

The plugin will automatically create a sticky footer ad that will display at the bottom of your WordPress site.

FAQ:

Conclusion

Sticky footer ads are an excellent way to increase your site’s ad visibility and boost engagement. Whether you’re using Blogger or WordPress, the process of adding sticky ads is straightforward and can be accomplished with a few simple steps. Start implementing sticky footer ads today and watch your ad revenue grow!