Modernize a Blogger Theme in 2026: Dark Mode, No AMP

If you searched for a current guide on migrating your Blogger theme away from AMP, adding real dark mode, or fixing a broken responsive sidebar, you've probably noticed the problem: almost everything ranking is from 2016–2021, written for an AMP-first Blogger world that no longer matches how Google evaluates pages today. Blogger's own documentation hasn't kept pace either. This is the current, tested, no-plugin version of that guide — covering AMP-to-standard migration, a real dark mode toggle, modern scroll-to-top behavior, and a responsive sidebar that actually holds its proportions across page types.

Why AMP Is No Longer the Right Move for Blogger in 2026

Google dropped the AMP requirement for Search's mobile page experience signals years ago, and Core Web Vitals are now evaluated on your actual page, not a stripped-down AMP copy of it. Keeping AMP live on a Blogger site in 2026 mostly means maintaining two versions of every post, dealing with AMP validation errors that add nothing to your rankings, and losing design flexibility for no ranking benefit. If your Blogger site is still on `.html?m=1`-style AMP output, migrating to a standard responsive theme is the right call.

Step 1: Migrating From AMP to a Standard Responsive Theme

The migration itself isn't complicated, but three things commonly break during it, and most old tutorials don't mention any of them:

Reserve image height to prevent CLS. AMP handled image dimensions automatically. A standard theme won't, unless you set it explicitly. Add width and height attributes (or an aspect-ratio in CSS) to every image class in your theme so the browser reserves space before the image loads:

.post-body img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Check your structured data survived the switch. AMP templates often carried their own JSON-LD block separate from your canonical theme. After migrating, validate your post pages in Search Console's Rich Results Test to confirm Article schema is still present — it's easy to lose silently during a theme swap.

Watch your canonical tags. For a period after removing AMP, make sure `<link rel="canonical">` points to the standard URL, not a leftover AMP variant, or you risk temporary indexing confusion. This is the single most common cause of a short-term traffic dip after an AMP migration, and it self-resolves once canonicals are clean.

Step 2: Adding Dark Mode Without a Plugin

Blogger has no native dark mode toggle, and Blogger doesn't support server-side cookie logic, so the practical approach is a small localStorage-based script. This remembers the visitor's choice across page loads without needing any backend:

<style>
  body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }
  body.dark-mode a { color: #8ab4f8; }
</style>

<button id="dark-toggle">🌙</button>

<script>
  const toggleBtn = document.getElementById('dark-toggle');
  const body = document.body;

  if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
  }

  toggleBtn.addEventListener('click', function() {
    body.classList.toggle('dark-mode');
    localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
  });
</script>

Place the script just before the closing `</body>` tag in your theme's HTML editor. Because it reads from localStorage on load, returning visitors keep their preference without a flash of the wrong theme on most connections.

Step 3: Fixing Scroll-to-Top the Modern Way

Older Blogger tutorials rely on jQuery plugins that add unnecessary weight and often conflict with newer themes. A plain scroll event listener does the same job with no dependency:

<button id="scroll-top" style="display:none;">↑</button>

<script>
  const scrollBtn = document.getElementById('scroll-top');

  window.addEventListener('scroll', function() {
    scrollBtn.style.display = window.scrollY > 400 ? 'block' : 'none';
  });

  scrollBtn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

This alone typically removes one render-blocking script from your page. If page speed is already a concern on your theme, pair this with the render-blocking JS fixes in our guide on why your Blogger page speed is low — duplicate scripts and head-loaded JS are usually the bigger issue.

Step 4: A Responsive Sidebar That Actually Holds Its Proportions

The most common sidebar problem on custom Blogger themes is proportions that look right on the homepage but break on post pages, or vice versa, because Blogger doesn't apply a page-specific class to the body tag by default. You have to add one yourself, combining Blogger's `expr:class` conditional tag with a small JavaScript function.

First, in your theme's `<body>` tag:

<body expr:class='data:blog.pageType + " " + data:blog.url'>

Then apply different sidebar-to-content ratios per page type in your CSS:

.item .main-content { width: 66.67%; }
.item .sidebar { width: 33.33%; }

.index .main-content { width: 80%; }
.index .sidebar { width: 20%; }

If your theme's JavaScript needs to detect the page type dynamically (for widgets that behave differently by page), pair this with a small `applyPageClass()` function that reads `document.body.className` on load and toggles layout accordingly. This combination — Blogger's native conditional tags plus one small JS function — is what actually keeps sidebar proportions stable across the homepage, post pages, and label/archive pages, instead of the single fixed-width sidebar most free templates ship with.

Common Pitfalls to Avoid

• Don't skip testing on Blogger's mobile media query breakpoint. A sidebar fix that works on desktop can still overflow on mobile if you haven't set a `min-width` override inside your `@media` block for narrow screens.
• Don't forget Auto Ads can inject into unexpected containers. If you're running Google Auto Ads alongside a custom table or grid layout, test after any layout change — ad injection into `<td>` elements is a known cause of broken table layouts on custom Blogger themes.
• Don't leave old AMP-specific CSS in your theme after migrating. Leftover AMP boilerplate classes add dead weight and occasionally conflict with new dark mode or sidebar styles.

Bottom Line

None of these four fixes requires a plugin, a page builder, or moving off Blogger entirely — they're all native theme-editor changes. If you're doing this as part of a broader technical cleanup, it's worth pairing with an internal-linking pass once your new layout is stable; our Blogger internal linking strategy guide covers how to restructure sidebar and related-post links to match your new layout without starting from scratch.