How to Add a Sticky Footer in Blogger (Step-by-Step with Code)

Introduction: Why Add a Sticky Footer?

If you’re running a Blogger site, you’ve probably noticed that most modern websites include a sticky footer—a bar that always stays at the bottom of the screen, even when the user scrolls. A sticky footer is a simple design tweak that can improve user experience and even increase conversions.

For example, you can use a sticky footer in Blogger to:

Display a subscribe button
Show a contact link
Add social media icons
Place a call-to-action (CTA) like “Download Now” or “Read More”
Promote an ad banner without disrupting your content flow

In this guide, I’ll show you step by step how to create a sticky footer in Blogger. You don’t need advanced coding knowledge—just copy and paste the code I provide into your theme. Let’s dive in!

Step 1: What Is a Sticky Footer?

Before we add the code, it’s important to understand what a sticky footer really is.

A sticky footer is different from a “fixed footer.”

A fixed footer is always visible at the bottom of the screen, even if it covers part of the content.
A sticky footer stays at the bottom of the viewport and adjusts so it never hides your content.

In Blogger, we can create a sticky footer using HTML + CSS. You can even add a bit of JavaScript if you want to make it interactive.

Step 2: Backup Your Blogger Theme

Whenever you modify your Blogger template, always make a backup first.

Go to your Blogger Dashboard.
Click Theme.
In the top-right corner, click the arrow dropdown next to “Customize.”
Choose Backup.

Now you’re safe. If anything breaks, you can restore your theme.

Step 3: Add the Sticky Footer Code

Here’s the complete HTML + CSS code for a sticky footer. You can customize it with your own text, links, or buttons.


<!-- Sticky Footer Start -->
<div id="sticky-footer">
  <div class="footer-content">
    <a href="https://your-link.com" class="footer-btn">📩 Subscribe</a>
    <a href="https://wa.me/your-number" class="footer-btn">💬 WhatsApp</a>
    <a href="https://your-link.com/download" class="footer-btn">⬇ Download</a>
  </div>
</div>

<style>
#sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  z-index: 9999;
  font-family: Arial, sans-serif;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

#sticky-footer .footer-content {
  display: flex;
  justify-content: center;
  gap: 15px;
}

#sticky-footer .footer-btn {
  background: #ff5722;
  color: #fff;
  padding: 8px 15px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

#sticky-footer .footer-btn:hover {
  background: #e64a19;
}
</style>
<!-- Sticky Footer End -->

👉 Where to place this code?

Go to Blogger Dashboard → Theme → Edit HTML.
Scroll down until you find </body>.
Paste the code just above </body> and save.

Now your sticky footer will appear at the bottom of every page.

Step 4: Customize Your Sticky Footer

The code above is just a starting point. You can customize it based on your needs.

✅ Change Colors:
Modify the background: #222; to another hex color. Example: #0d6efd for a blue footer.

✅ Change Buttons:
Replace the <a href="..."> links with your own links. You can add buttons for:

About Us
Contact Page
Shop Now
Join Telegram Group

✅ Add Icons:
You can use emoji (like I did) or add Font Awesome icons for a professional look.

Step 5: Why Sticky Footers Are Good for SEO & Ezoic Ads

You might be wondering—does adding a sticky footer affect your site’s SEO or ad revenue?

Here’s the truth:

✅ SEO Impact: Sticky footers don’t directly improve ranking. But they enhance user experience, which is a positive ranking signal. If users spend more time on your site, bounce rate goes down, and Google sees your site as valuable.
✅ Ad Placement: Ezoic and AdSense allow sticky elements, but you should avoid placing ads in a way that blocks content. Instead, use the footer to promote links or guide readers to high-value pages.

Step 6: Testing Your Sticky Footer

After adding the code, test your site on:

Desktop browsers (Chrome, Firefox, Edge)
Mobile devices (Android + iPhone)

Make sure:

The footer doesn’t overlap with important content.
Buttons are big enough to click on mobile.
The design matches your theme.

If you need to hide the sticky footer on mobile (optional), just add this CSS inside the <style> tag:


@media (max-width: 600px) {
  #sticky-footer {
    display: none;
  }
}

Step 7: Advanced Customization (Optional)

If you want to take things further, here are a few ideas:

Sticky Footer with Close Button
Allow users to close the footer if they don’t want it.


<div id="sticky-footer">
  <button onclick="document.getElementById('sticky-footer').style.display='none'" style="background:none;border:none;color:#fff;font-size:18px;float:right;margin-right:10px;">✖</button>
  <div class="footer-content">
    <a href="#">🔥 Get Updates</a>
  </div>
</div>

Sticky Footer with Newsletter Signup
Add an email form directly in the footer to collect subscribers.

Common Mistakes to Avoid

❌ Don’t make the footer too big—it will annoy readers.
❌ Don’t place too many buttons; keep it simple and clean.
❌ Don’t hide important content behind the footer.

Conclusion: A Small Change, Big Impact

Adding a sticky footer in Blogger is one of those small design tweaks that can make your blog look more professional and keep visitors engaged. With just a few lines of HTML and CSS, you can add a footer that stays visible across your site.

Use it to promote your most important links, highlight your offers, or guide visitors to take action. Combined with great content, a sticky footer can help you increase engagement, improve SEO signals, and get your site ready for Ezoic or AdSense approval.

👉 Now it’s your turn: Try adding the sticky footer code today and watch how it transforms your Blogger site!

wakawaka

Search This Blog