In this step-by-step guide, you’ll learn how to add responsive footer sticky ad to your Blogger or WordPress site without using any plugins. Footer sticky ads appear at the bottom of every page, making them visible throughout the user’s session, which can help boost your AdSense CTR and overall earnings.
These ads stay fixed at the bottom of the screen until manually closed by the visitor. However, it’s important to follow AdSense policies, sticky ad must not cover more than 30% of the screen. Exceeding this limit can risk account restrictions or suspension.
Note: I personally do not use or recommend sticky ads. AdSense itself serves similar ads from the top and bottom, but there’s still a chance of policy issues. The risk is minimal, so do at your own risk. I won’t be responsible for any potential violations or account actions.
- A close button
- Boost CTR and CPM
- Improve ad visibility
- Better user experience
- Lightweight and doesn’t require plugins
Important Guidelines for Floating Ads
- Use only one vertical sticky ad
- Avoid using them on websites with infinite scroll
- Maintain space between the ad and your content
- Ensure the ad does not cover more than 30% of the screen
- To avoid accidental clicks, use CSS to reposition clickable buttons away from the ad area
Step 1: Log in to your WordPress dashboard and take a full backup of your site.
Step 2: Go to Appearance > Customize > Additional CSS, paste the following CSS code, and click Publish.
.stky-ads {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
min-height: 70px;
max-height: 90px;
padding: 5px 5px;
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;
}
.stky-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);
cursor: pointer;
}
.stky-ads .stky-ads-close svg {
width: 22px;
height: 22px;
fill: #000;
}
.stky-ads .stky-ads-content {
overflow: hidden;
display: block;
position: relative;
height: 70px;
width: 100%;
margin-right: 10px;
margin-left: 10px;
}Step 3: In your AdSense account, create a fixed display ad unit with dimensions 728×90, then copy the ad code.
Step 4: Navigate to Appearance > Theme Editor > footer.php and paste the HTML code below, replacing it with your AdSense code, just before the </body> or </html> tag. Click Update File.
<div class="stky-ads jhfdiuh0" id="stky-ads">
<div
class="stky-ads-close"
onclick='document.getElementById("stky-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="stky-ads-content">
<center>
Paste Ad Code Here
</center>
</div>
</div>Step 5: Clear your site’s cache and preview the changes in a private/incognito window.
If you prefer not to work with code, you can use plugins like AdFoxly, Ad Inserter Premium, or AdAce by Bring The Pixel. These plugins make it easier to add sticky ads without manual coding, and AdAce comes free with the Bimber theme.
Step 1: Log in to your Blogger dashboard and take a full backup of your theme.
Step 2: Go to Theme > Customize > Advanced > Add CSS, paste the below CSS code, and save.
or, you can add the CSS directly by going to Edit HTML and pasting it just before ]]></b:skin>.
.stky-ads {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
min-height: 70px;
max-height: 90px;
padding: 5px 5px;
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;
}
.stky-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);
cursor: pointer;
}
.stky-ads .stky-ads-close svg {
width: 22px;
height: 22px;
fill: #000;
}
.stky-ads .stky-ads-content {
overflow: hidden;
display: block;
position: relative;
height: 70px;
width: 100%;
margin-right: 10px;
margin-left: 10px;
}Step 3: In your AdSense account, create a fixed display ad unit with dimensions 728×90 and copy the ad code.
Step 4: In Blogger, go to Theme > Edit HTML and paste the following code, replacing it with your AdSense code, just before the </body> tag. Then, save your theme.
<div class="stky-ads jhfdiuh0" id="stky-ads">
<div
class="stky-ads-close"
onclick='document.getElementById("stky-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="stky-ads-content">
<center>
Paste Ad Code Here
</center>
</div>
</div>Step 5: Open your website in a private/incognito window to test the sticky ad.
To adjust the size, modify the height values in .stky-ads and .stky-ads .stky-ads-content (height: 207px;). You can also update the ad unit dimensions (width: 768px; height: 200px). To make the background transparent, replace #fefefe with transparent in .stky-ads.
How to Add Vertical Left & Right Sticky Ads in Blogger?
Step 1: Log in to your AdSense account and create a fixed vertical display ad unit with dimensions 160×600. Copy the ad code.
Step 2: Log in to your Blogger dashboard.
Step 3: Go to Layout > Add a Gadget (in Sidebar) > choose HTML/JavaScript, paste the code below—replacing it with your AdSense code—and click Save.
<style type="text/css">
.left-fixed,
.right-fixed {
position: fixed;
top: 60px;
width: 160px;
height: 600px;
z-index: 9999;
transform: translateZ(0);
padding: 10px 10px;
}
.left-fixed {
left: 0;
}
.right-fixed {
right: 0;
}
.close-side-ad {
position: absolute;
width: 150px;
height: 15px;
line-height: 15px;
font-size: 11px;
font-weight: 400;
top: -15px;
text-align: center;
background: #e0e0e0;
color: #666;
padding: 4px;
cursor: pointer;
border-radius: 55px;
}
@media screen and (max-width: 800px) {
.left-fixed,
.right-fixed {
display: none;
visibility: hidden;
}
}
</style>
<div class="left-fixed">
<div aria-label="Close" class="close-side-ad" role="button" tabindex="0" onclick='this.parentElement.style.display="none"'>
<b>CLOSE</b>
</div>
Paste Ad Code Here
</div>
<div class="right-fixed">
<div aria-label="Close" class="close-side-ad" role="button" tabindex="0" onclick='this.parentElement.style.display="none"'>
<b>CLOSE</b>
</div>
Paste Ad Code Here
</div>Step 4: Clear your browser cache and preview your site in a private/incognito window.
Note: Vertical sticky ads only appear on desktop. It’s normal if they don’t show on mobile devices.
Wrap Up
That’s how you can add responsive footer and sidebar sticky ads in Blogger and WordPress, with or without plugins. If you found this tutorial helpful, feel free to share it with others and help them boost their AdSense CTR and earnings.
