6 Essential Blogger Enhancements for 2025

If you’re running a Blogger blog, you’ve probably noticed that customization options are limited compared to WordPress. But don’t worry! With the right tweaks, you can transform your Blogger site into a modern, fast, and engaging platform.

Here are 10 must-have enhancements, complete with ready-to-use codes that are fully responsive and stylish.

1. Expandable Table of Contents (TOC) 📑

A Table of Contents (TOC) improves readability, user experience, and SEO. This TOC is expandable/collapsible and automatically detects headings in your post.

📌 How to Add an Expandable TOC?

1️⃣ Go to Blogger Dashboard > Theme > Edit HTML
2️⃣ Find <head> and add this CSS before </head>:

<style>
.toc-container {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
}
.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    cursor: pointer;
}
.toc-content {
    display: none;
    padding-top: 10px;
}
.toc-content ul {
    list-style: none;
    padding-left: 10px;
}
.toc-content li {
    padding: 5px 0;
    font-size: 16px;
}
</style>

3️⃣ Add the following JavaScript before </body>:

<script>
document.addEventListener("DOMContentLoaded", function() {
    let tocContainer = document.createElement("div");
    tocContainer.classList.add("toc-container");
    tocContainer.innerHTML = `
        <div class="toc-header">
            <span>📖 Table of Contents</span>
            <i id="toggleToc" class="fa fa-chevron-down"></i>
        </div>
        <div class="toc-content">
            <ul id="tocList"></ul>
        </div>`;
    
    document.querySelector("body").insertAdjacentElement("afterbegin", tocContainer);
    
    let tocList = document.getElementById("tocList");
    document.querySelectorAll("h2, h3").forEach((header, index) => {
        let id = "toc-" + index;
        header.setAttribute("id", id);
        tocList.innerHTML += `<li><a href="#${id}">${header.textContent}</a></li>`;
    });

    document.querySelector(".toc-header").addEventListener("click", function() {
        document.querySelector(".toc-content").style.display = 
            document.querySelector(".toc-content").style.display === "none" ? "block" : "none";
    });
});
</script>

2. Floating Social Share Buttons 📢

This floating share bar remains visible while scrolling and supports Facebook, Twitter, and LinkedIn.

📌 How to Add Floating Share Buttons?

Add this before </body>:

<div class="floating-share">
    <a href="https://facebook.com/sharer.php?u=<data:post.url/>" target="_blank"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/share?url=<data:post.url/>" target="_blank"><i class="fa fa-twitter"></i></a>
    <a href="https://www.linkedin.com/sharing/share-offsite/?url=<data:post.url/>" target="_blank"><i class="fa fa-linkedin"></i></a>
</div>

<style>
.floating-share {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    padding: 10px;
    border-radius: 10px;
}
.floating-share a {
    display: block;
    color: #fff;
    margin: 5px 0;
    text-align: center;
    font-size: 20px;
}
</style>

3. Dark Mode Toggle 🌙

Give users the ability to switch to dark mode with a stylish toggle.

📌 How to Add Dark Mode?

Insert this in HTML widget:

<button id="dark-mode-toggle"><i class="fa fa-moon"></i> Toggle Dark Mode</button>

<style>
body.dark-mode {
    background: #121212;
    color: #fff;
}
#dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
</style>

<script>
document.querySelector("#dark-mode-toggle").addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
});
</script>

4. Back to Top Button ⬆️

Add a smooth Back to Top button for easier navigation.

📌 Code for Back to Top Button

<button id="back-to-top"><i class="fa fa-arrow-up"></i></button>

<style>
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: none;
}
</style>

<script>
document.addEventListener("scroll", function() {
    let btn = document.getElementById("back-to-top");
    if (window.scrollY > 300) {
        btn.style.display = "block";
    } else {
        btn.style.display = "none";
    }
});
document.getElementById("back-to-top").addEventListener("click", function() {
    window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>

5. Lazy Loading Images 🏞️

Improve page speed by lazy loading images.

Add this before </body>:

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("img").forEach(img => {
        img.setAttribute("loading", "lazy");
    });
});
</script>

6. Email Subscription Form 📩

Collect emails with a subscription widget.

<form action="https://feedburner.google.com/fb/a/mailverify" method="post">
    <input type="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Subscribe</button>
</form>

Final Thoughts 💡

With these 6 powerful Blogger enhancements, your site will be:
✅ More user-friendly
✅ More visually appealing
✅ More interactive
✅ SEO-optimized

Which feature do you like the most? Let me know! 🚀