Adding Spoiler Tags to a Blogger Template for Game Posts

A reader of a small retro game blog I help with once left a single comment under a walkthrough: "Thanks for ruining the ending in your homepage snippet." The post itself hid the twist carefully. The homepage did not, because Blogger had pulled the first few lines of the post, twist included, into the summary card. The writer had done the polite thing in one place and the theme had undone it in another.

Spoiler handling on Blogger is less about one clever tag and more about every place the theme copies your words: the homepage summary, the feed, the related posts widget, the thumbnail, and the search result. You can hide a paragraph in the post body and still leak it in four other spots. Here is how I set up spoiler blocks in a template so they behave, plus the leaks that a CSS trick alone will not plug.

Why the usual blur trick is the weaker option

The most shared approach is a CSS class that blurs or blacks out text until you hover over it. It looks neat, and I used it for a year. It has two problems that only show up later.

First, hover does not exist on a phone. Most themes fall back to tapping, which works on some browsers and selects text on others. Second, a screen reader reads blurred text straight out loud, because the text is still there and visible to assistive tools. A visitor using one gets the spoiler without any warning at all.

There is a better building block already in every modern browser: the details element. A details block shows a short summary line, and the content stays collapsed until someone clicks or taps it. Keyboards can open it, screen readers announce it as collapsed, and it needs no JavaScript. That makes it the right default for a game blog, with the blur kept only for a word or two inside a sentence.

Adding a spoiler block to your posts

In the post editor, switch from Compose view to HTML view for the spot where the spoiler goes. Type a details element with a summary inside it, for example <details class="spoiler"><summary>Spoiler: the final boss</summary> followed by your paragraphs and a closing </details>. Switch back to Compose view and you will see the text as normal, since the editor does not render the collapse. Preview the post to see the real behaviour.

Write the summary line as a label, not a teaser. "Spoiler: chapter 7 ending" tells the reader what they are about to open. "You won't believe this" makes them open it by accident.

One quirk I have seen: Compose view sometimes adds a stray line break right after the opening tag if you press Enter in the wrong place. If the collapsed box shows an empty gap, return to HTML view and delete the extra <br>.

Styling the block in the template

Unstyled, a details block is a plain triangle and a line of text, which readers can miss. Before touching the theme, download a backup. I keep repeating this because I have broken enough templates to mean it, and our guide on what to back up before changing a theme lists the parts people forget.

The safest place for the CSS is Theme, Customize, Advanced, Add CSS, which survives most template updates. If your theme lacks that panel, add the rules inside the b:skin section of the template code, just above the closing ]]> marker. My working set of rules does four things:

• Gives details.spoiler a 1 px border, 6 px rounded corners and 12 px of padding, so it reads as a box.
• Sets the summary to a bold weight, a pointer cursor, and a colour that matches the theme's link colour.
• Adds a margin of 1.2em above and below, so the box does not glue itself to neighbouring paragraphs.
• Styles details[open] with a light background tint, so readers can see which boxes they have already opened while scrolling back.

Keep the rules to the spoiler class. Styling every details element on the site will also restyle FAQ blocks or widgets that use the same tag. That kind of side effect is the main reason I tell people in customizing a template without breaking the layout to scope every new rule.

The four places spoilers leak anyway

This is the part most tutorials skip, and it is where that reader's complaint came from.

Homepage and label page summaries

Many Blogger themes build the homepage card from the first 150 to 300 characters of the post text, or from everything above a jump break. Some themes strip the HTML when they do this, which means the details tag disappears and the hidden text shows as plain words. Insert a jump break, the Insert jump break button in the toolbar, above the first spoiler, and keep at least one full paragraph of safe text before it. Check the homepage after publishing, not only the post.

Thumbnails and related posts

Blogger uses the first image in a post as its thumbnail for the homepage, the feed, the related posts widget and often social shares. If the first image is a screenshot of the final boss, every one of those places shows it. Put a neutral image first, such as the game's title screen or box art you are allowed to use, and keep spoiler screenshots inside the details block further down.

The feed

Readers using a feed reader receive your post as HTML, and some readers ignore details and show everything. If your audience reads by feed, set Settings, Site feed, Allow blog feed to "Until jump break". That way the feed carries only the safe opening.

Titles and search descriptions

No tag can hide a spoiler in the title. "How to beat the final boss after the betrayal" spoils the betrayal on every search result page. The same goes for the custom search description, which Blogger lets you set per post. Write it from the safe opening, using the habits in writing a meta description that earns the click.

Does hidden text hurt search?

People worry that collapsed content will not count. Google has said for some years now that content hidden in tabs or expandable sections on mobile pages is indexed and weighted normally, since collapsing is a usability choice on small screens. I have not seen a walkthrough lose ranking after we moved its spoilers into details blocks. My sample is about a dozen posts on two blogs, so treat that as an observation, not a promise.

What can hurt is a walkthrough where the useful answer is entirely hidden and the visible part is thin. Keep the non-spoiler steps open and hide only the reveal itself.

If you are still choosing a theme for this kind of site, the notes in what an indie and retro game review blog needs cover layouts that handle long walkthroughs well.

A ten minute test for this week

Pick your most popular game post and look at it the way a stranger would: the homepage card, the label page, the feed, and a share preview. Note every place the twist appears. Then add one styled spoiler block and a jump break to that single post, republish, and check those same places again. One post fixed properly will show you exactly which leaks your particular theme has.