Why the Blogger Footer Fights You More Than It Should
The Blogger template footer is one of those things that’s technically customizable, but in practice behaves like it’s possessed. If you’ve ever tried dropping in a nav widget down there — maybe something simple like category links or an archive jump menu — and had the layout implode, welcome. You’re not alone.
Back in 2022 I was helping someone convert an old-school niche recipe blog from a classic Blogger template to something that didn’t look like 2010. Footer links for tags were a must. I added a Gadget, dragged a Link List down… and poof: the whole footer floated halfway up the screen. Turned out the template’s CSS had a clear: both override that was swallowing any floated elements.
Most Blogger themes also assume a minimal gadget area in footers — two to three horizontal sections if you’re lucky — and they collapse unpredictably if you exceed that. Especially if you’re mixing gadgets like HTML/JavaScript and Profile or Attribution. The order matters more than you’d think.
One weird thing: in the Contempo theme, you can’t use HTML gadgets in the footer without weird z-index issues overlapping your navbar. I had to replace it with a hacked-up Link List and style it afterwards with embedded CSS to get sane spacing.
Widget Order and Column Wrapping Logic
If your footer ends up stacking everything vertically instead of honoring columns, it’s often the widget order inside the page structure. Blogger doesn’t document this well, but it determines layout by assigning each widget slot a float or flex based on its gadget position.
The problem is: changing the visual arrangement in the layout editor doesn’t always change the underlying order. Especially if you’ve messed with the XML directly before. I once spent half a weekend trying to get three widgets to appear side-by-side, only to realize they were rendering inside a single container div with hardcoded widths.
If the maxwidgets tag is set to 1 — which many themes default to — you’re done. You won’t get multiple items side-by-side even if it looks like multiple columns. You can try setting it to 3 or more, but some themes straight-up ignore it unless you also edit the wrapping schema.
Using Label-Based Navigation at the Footer
This is a bit of a pro move: hardcode some category links down in your footer for navigation. Not dropdowns, just plain button or link-style nav. Blogger doesn’t have a built-in category page, but every label has its own URL pattern like:
Warning: If your template uses lazy loading or JavaScript-enhanced nav, these hardcoded links might not highlight the current navigation state. No breadcrumbs, no tracking. But they always work, and that alone makes them gold.
The Attribution Widget Acts Like a Landmine
Unless you like your layout breaking for fun, do not disable or remove the Attribution widget from anything other than the Classic themes. Most modern Blogger templates expect it to exist even if it’s hidden. If it’s missing entirely and the template tries to call it — boom — null error in Blogger’s render logic.
There’s a trick where you make it invisible using inline CSS, which preserves the structure:
#Attribution1 { display: none; }
But on the newer templates (Contempo, Soho), hiding the Attribution can actually nuke mobile responsiveness. I had a footer width go to 2000px allegedly because the widget container wasn’t closed properly once removed. Inspecting it in Chrome DevTools showed:
div class="footer-container">
The official advice from AdSense support is “don’t modify core widgets,” but that’s not enforceable — just incredibly risky without testing on a staging copy first.
Embedding Sitemap or Archive Links? Watch for Overflow Bugs
Blogger’s Archive and Sitemap widgets both do this slightly annoying thing where they render their lists inline or in nested uls — depending entirely on the theme. And the default styles rarely cap height or constrain overflow at the footer.
I learned this the embarrassing way when I added an Archive gadget to the footer and it dumped forty month-links in a single vertical column. This was on the Soho template. The footer basically doubled the page length. It killed scroll performance on mobile because the sticky elements weren’t expecting that much height from the container.
There’s also a nuance where the Archives widget fails if you’ve disabled “post summaries” and your blog only has full posts. In that case, the URLs generated don’t properly resolve because Blogger tries to truncate based on expected jump links.
Footer HTML/CSS Tips That Actually Work
I cobbled together this cluster of band-aid fixes over four different blog migrations. Don’t expect elegance — just practical sanity.
Use display: inline-block on footer links to avoid stacking in narrow screen modes.
Always check box-sizing — some templates override it with content-box for footers and break padding.
Don’t trust the layout preview. Sometimes padding/margin appears right there but renders wrong live, especially on mobile.
If you’re using custom fonts in the footer, test on slow connections. Fallback often isn’t declared and can break rendering order.
Set min-height for the footer container or it may vanish on short content pages.
Create a separate theme CSS block just for footer overrides — isolate your fixes.
If using Flexbox, force-wrap with flex-wrap: wrap; or it’ll smush all gadgets in one line with no break.
The Second CSS Load Timing Quirk
Blogger themes often pull in a second stylesheet or apply inline styles late into the render cycle — especially if you have conditional gadgets in the footer.
Say you’ve added a footer subscription form using Feedburner. You style it with inline CSS. But on publish, it’s ugly. Open dev tools, and you’ll often notice this lag-behavior:
Header loads styles → layout splashes live → inline gadget styles applied ~150ms later → flicker
The fix isn’t elegant. Your best bet is to use <style> tags inside the gadget block, and make sure they’re scoped or ID-referenced like #FeedForm1 input so they win the specificity race during the cascade.
In one case I had a gadget that refused to style the submit button unless I used both attribute selectors and ID selectors in tandem. No clue why. Just Blogger things.
“Why are my footer links randomly vanishing?”
This is an actual bug I had with the Emporio theme. I had a three-column footer: recent posts (HTML widget), category nav (HTML widget), popular posts (native gadget). Every few days the category nav would straight up disappear for certain users — no 404, just gone.
After digging way too long, I realized it was due to the unsafe usage of relative paths combined with certain security extensions. The links like /search/label/whatever were being semi-blocked in some mobile Chrome instances with strict adblockers enabled. They were interpreted as unsafe internal redirects in some configurations — particularly if they were styled to look like buttons.
Changing them to absolute URLs (e.g., https://myblog.blogspot.com/search/label/whatever) fixed the issue. I still don’t buy the rationale, but it worked — and it was happening only in certain combinations of mobile Safari, Firefox Focus and Brave. Wild stuff.
The Gadget Order XML Actually Does Matter
If you’re comfortable editing Blogger’s theme XML, scroll until you find the <b:section id='footer'> or variant and look for the embedded gadget position markers. Most people don’t realize that Blogger uses these to render visible order — even if layout editor lets you drag and drop stuff visually.
You can end up in impossible-to-debug states like: layout editor says Gadget A is above Gadget B, widgets render in reverse. Editing the XML to rearrange the <b:widget id='GadgetB' /> tag actually works. This saved me from giving up entirely on a three-column grid where content was always backwards.
And there’s no warning when this goes out of sync. You can export a theme, import it elsewhere, and suddenly the footer flips because import reordered the internal schema. Love that for us.
