Fixing Weird Blogger Archive Widget Behavior Without Losing It
Widget Types That Don’t Behave the Same
It took me a while to notice this but: not all Blogger Archive widget modes are built equal. There’s the classic dropdown, the flat list, and the grouped list (which looks like a nested tree). The problem? They don’t all use the same underlying markup or behavior. The dropdown is technically a select
element, pretty straightforward. Flat list? Essentially a bunch of <a>
tags within list items. But the tree mode—that one’s cursed. It uses a mix of JavaScript-injected spans and anchors, nested unordered lists, and occasionally fails to load if your blog has too many posts in one month.
I legit thought I had broken my template one night after switching the widget to tree mode. Turns out it just doesn’t initialize correctly unless the widget is placed after all post content — something I only figured out after stripping it down in DevTools for an hour.
Post Count Display Is Not Consistent
Another oddity I ran into: sometimes the Archive widget shows post counts next to each month, and sometimes it doesn’t. What controls that? Spoiler: not the widget settings. It’s based on your blog layout template version. If you’re still using an older Blogger template (pre-2017), the archive widget can’t expand and show post counts reliably unless you hard-code it.
In newer templates, the post count is wrapped like this:
<span class="post-count">(5)</span>
But in older templates, it might just render as text inside the link. Also, if you customize the CSS too much (especially hiding nested ULs), the counts might render but be invisible unless hovered. I’ve been burned by that once when a theme I imported from some random blogspot tutorial site nuked all default styles.
Yearly vs Monthly Views: Not Just Preference
You’d think choosing between “monthly,” “weekly,” or “daily” archive views would just be an aesthetic thing, right? Nope. Turns out, the deeper you go (especially daily), the bigger risk of Blogger’s internal URL generation breaking. Try this: switch to daily view on a blog with over a thousand posts since 2009. It’ll either hang indefinitely or create a massive DOM tree that tanks performance on mobile.
“This script took too long to run and was stopped.” — actual Chrome console log I got on an Android test
Switching to yearly view solved it instantly. There seems to be some undocumented logic inside Blogger’s widget rendering that limits how many posts it will load per widget before silently failing.
Customizing Archive Styles Without Breaking It
I’ve tried customizing the Archive widget look more than a dozen times now, and I finally have a stable approach. Here’s a little cheat sheet of custom CSS behaviors that DON’T break the widget:
- Use
display: none
onli
only after confirming the widget mode — flat mode usesli
for every link - Do NOT override
ul
margins globally — use a more specific class like.BlogArchive ul
- Make sure anchor tags retain
display: block
if you’re trying to pad them - Avoid
overflow: hidden
on containers — Blogger uses expandingul
blocks that break with overflow clipping - Check for stylized
span
elements inside links — post counts sometimes sneak in this way
One particular gotcha I hit: I tried making my archive widget accordion-style using display transitions, but forgot that Blogger dynamically injects CSS via JavaScript — so my animations got clobbered when the DOM wrote over my injected styles.
Removing the Archive Widget Cleanly Isn’t Simple
Okay, let’s talk about deleting the Archive widget. You’d think removing it from the layout editor would, you know, remove it. But if you’ve ever clicked “Revert Widget Templates to Default” and then refreshed your blog only to see the archive still mysteriously present in the sidebar, you’re not alone.
The widget can get stuck in the blog template XML itself. If you’ve imported old templates a few times (guilty), it might even appear multiple times under different widget id="BlogArchive1"...widget id="BlogArchive2"
labels.
Solution? You have to open the full template editor, Ctrl+F “BlogArchive”, and delete all code blocks that look like this:
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive' />
Only THEN will it fully disappear.
The URL Behavior Changes Based on Permalink Format
Here’s something that baffled me: clicking on an archive link generates a URL like /2021/03/
— but the actual post HTML might rely on full permalinks like /2021/03/my-post-title.html
.
This matters, because if you’re doing any kind of custom JavaScript to enhance the archive (e.g., lazy loading collapsed posts by month using Ajax), you need to account for archive pages not directly linking to post pages. They’re more like filters that load summaries.
Additionally: on some imported templates, Blogger weirdly converts “/YYYY/MM/” links into label searches instead. No idea why. I once saw an archive click trigger a URL like ?label=March2021
, which makes zero sense unless the template author manually re-routed archives through label links.
Archive Widget Loading Order Affects Functionality
This one was a total “one-line fix that took three hours to find” thing. The Archive widget has to load after the post content widget but before the footer — or else it may appear blank until a manual refresh. I initially thought my browser was just caching the style sheet weirdly. Nope.
Turns out Blogger widgets rely on internal b:include
loading logic that doesn’t always resolve in predictable order when custom templates chain them. If you move the Archive snippet above your Posts widget, Blogger sometimes caches it as stale content during post pagination jumps.
I kept seeing empty Archive blocks when navigating to older posts. Once I reordered it back under the Posts widget (but still within the main content container), it stabilized.
Bonus: You Can Fake Infinite Scroll Using Archive Data
This is a trick I’ve only used on one special project (an art blog for a friend that wanted a continuous feed). Blogger doesn’t support infinite scroll natively unless you fully Frankenstein it with jQuery and scraping. But — since the Archive widget outputs predictable URLs, you can use AJAX to fetch /YYYY/MM/
archives behind the scenes and append the data.
I used a mashup of this:
fetch('/2022/05').then(res => res.text()).then(html => {
const parsed = new DOMParser().parseFromString(html, 'text/html');
document.querySelector('.blog-posts').append(parsed.querySelector('.blog-posts').innerHTML);
});
You’ll lose label-based filtering, but it’s doable if you just want date-based, lazy loading madness. But watch out: Blogger injects scripts inside every post snippet. So every time you fetch another archive page, you’ll re-execute inline scripts unless you sanitize them out first.