If you run a Blogger site and want to maximize ad visibility without cluttering your content, sticky side ads are one of the smartest moves you can make. Unlike static ads that scroll out of view, these stay fixed on screen the entire time a visitor is on your page — giving you more impressions and better click-through rates with zero extra effort.
This guide walks you through the complete setup using plain HTML and CSS. No theme overhauls, no plugins — just clean, copy-paste code.
Why Sticky Side Ads Work
Most ad placements live inside the content area, where they get scrolled past and forgotten. Sticky side ads sit outside the content column entirely, anchored to the left and right edges of the browser. That means they stay visible throughout the entire reading session.
The practical benefits are straightforward: higher visibility leads to more impressions, eye-level placement tends to improve click-through rates, and because the ads sit outside your main content, they don’t interrupt the reading experience. They’re best suited for desktop visitors on widescreen monitors — screens narrower than 1300px will hide them automatically via a media query.
One important note before you start: if you’re using Google AdSense, make sure your ad placement complies with their policies. Ads should never overlap navigation elements or block essential content.
Setting Up the Ads
Step 1 — Add the HTML
Open your Blogger post or page in HTML mode and paste the following code. This creates both the left and right ad containers, each with a close button so visitors can dismiss them if they wish.
<!-- Sticky Left Ad -->
<div class="fixed-left-ad">
<span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
<a href="YOUR-LINK-HERE" target="_blank" rel="noopener">
<img src="YOUR-IMAGE-URL-HERE" alt="Advertisement">
</a>
</div>
<!-- Sticky Right Ad -->
<div class="fixed-right-ad">
<span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
<a href="YOUR-LINK-HERE" target="_blank" rel="noopener">
<img src="YOUR-IMAGE-URL-HERE" alt="Advertisement">
</a>
</div>
Replace YOUR-LINK-HERE with your destination URL and YOUR-IMAGE-URL-HERE with your banner image.
Step 2 — Add the CSS
Paste this into your theme’s custom CSS section or wrap it in <style> tags alongside your HTML. It handles positioning, animations, the close button styling, and the responsive hide rule for smaller screens.
<style>
.fixed-left-ad, .fixed-right-ad {
position: fixed;
top: 80px;
width: 320px;
z-index: 9999;
opacity: 0;
}
.fixed-left-ad {
left: 0;
animation: slideInLeft 0.8s 1s ease-out forwards;
}
.fixed-right-ad {
right: 0;
animation: slideInRight 0.8s 1s ease-out forwards;
}
.fixed-left-ad img, .fixed-right-ad img {
width: 100%;
height: auto;
display: block;
padding: 20px;
}
.close-ad {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #eee;
color: #333;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
transition: background 0.3s, color 0.3s;
z-index: 10001;
}
.close-ad:hover {
background-color: #333;
color: #fff;
}
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 1300px) {
.fixed-left-ad, .fixed-right-ad { display: none; }
}
</style>
Step 3 — Show Ads Only on Post Pages (Optional but Recommended)
If you only want the ads to appear on individual blog posts rather than your homepage or archive pages, wrap the HTML from Step 1 in Blogger’s conditional tag:
<b:if cond='data:blog.pageType == "item"'>
<!-- Your ad HTML goes here -->
</b:if>
This keeps things tidy and avoids showing ads in places where they might not make sense.
Using Google AdSense Instead of Image Banners
If you’re monetizing with AdSense, swap out the image links for AdSense <ins> tags. Replace ca-pub-XXXXXXXXXXXXXXXX with your publisher ID and update the slot numbers accordingly.
<!-- Sticky Left Ad -->
<div class="fixed-left-ad">
<span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1111111111"></ins>
</div>
<!-- Sticky Right Ad -->
<div class="fixed-right-ad">
<span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="2222222222"></ins>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The CSS is slightly adjusted for AdSense to give the containers a fixed height, subtle shadow, and rounded corners — making them look polished rather than bare.
<style>
.fixed-left-ad, .fixed-right-ad {
position: fixed;
top: 80px;
width: 300px;
height: 600px;
z-index: 9999;
opacity: 0;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 8px;
overflow: hidden;
}
.fixed-left-ad { left: 0; animation: slideInLeft 0.8s ease-out forwards; }
.fixed-right-ad { right: 0; animation: slideInRight 0.8s ease-out forwards; }
.close-ad {
position: absolute;
top: 10px; right: 10px;
width: 28px; height: 28px;
line-height: 28px;
text-align: center;
background-color: #eee;
color: #333;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
transition: background 0.3s, color 0.3s;
z-index: 10001;
}
.close-ad:hover { background-color: #333; color: #fff; }
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 1300px) {
.fixed-left-ad, .fixed-right-ad { display: none; }
}
</style>
Wrapping Up
Sticky side ads are a low-effort, high-impact addition for any Blogger site with solid desktop traffic. The setup takes only a few minutes, the animations give it a professional feel, and the close button ensures you’re not frustrating visitors who’d rather not see them.
Drop a comment below if you run into any issues or have ideas for improving the code — always happy to help.