MINESWEEPER

How to Embed Minesweeper in a Blogger Post

Blogger will run an embedded game without a plugin or a template change. Two things trip people up: the HTML view toggle is hidden behind a small dropdown arrow, and switching back to Compose view afterwards can destroy the code you just pasted. Both are easy to avoid once you know.

Time needed
About 2 minutes
Editor mode
HTML view
Toolbar control
Pencil dropdown
Sidebar option
HTML/JavaScript gadget
<div style="max-width:100%;overflow:auto;text-align:center">
  <iframe src="https://play-minesweeper.games/embed/?size=beginner"
    width="344" height="472" frameborder="0"
    title="Minesweeper Game" loading="lazy"></iframe>
  <p style="font:12px/1.5 sans-serif;margin:6px 0 0">
    <a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
  </p>
</div>

The wrapper is worth keeping on Blogger specifically, because the mobile template reuses your post markup at a much narrower width and an unwrapped fixed-size iframe will push the page sideways.

Both parts go in together. The paragraph under the frame is the credit link that keeps the embed free; here the inline colour has been dropped so your Blogger theme styles the link like any other link in the post, which is exactly the sort of adjustment we would rather you made than skipped.

Adding the game to a Blogger post

  1. Copy the embed code

    Choose a board size and theme on the embed generator and copy the whole snippet. Blogger accepts full HTML, so keep the iframe and the credit paragraph beneath it together and paste both.

  2. Open a new Blogger post

    Go to blogger.com, select the blog, and click New post. Write the post normally first — it is easier to add the game once the surrounding text exists.

  3. Switch the editor to HTML view

    At the far left of the post editor toolbar is a pencil icon with a small dropdown arrow next to it. Click the arrow and choose HTML view. The icon changes to the angle-bracket code icon and the body becomes raw markup.

  4. Paste the iframe at the right point in the markup

    Find the paragraph you want the board to follow and paste both parts there, credit line directly under the iframe. If the paste breaks across lines awkwardly, collapse the iframe onto a single line — Blogger is happier with that.

  5. Preview and publish from HTML view

    Use Preview to open the post in a new tab and play a round. Publish without going back to Compose view; Blogger rewrites markup on that round trip and is well known for escaping or dropping tags it does not expect.

Finding HTML view, and why it matters

Blogger's current post editor does not use the old Compose / HTML tabs. Instead, the first control on the toolbar doubles as the mode switcher: a pencil icon when you are in Compose view, a <> icon when you are in HTML view, with a small dropdown arrow beside it. Click the arrow, choose the mode you want, and the toolbar returns. Selecting the mode you are already in simply closes the menu.

That toggle is the whole game on Blogger. Compose view is a rich text surface, and Blogger's conversion between the two representations is lossy in a well-documented way: it escapes angle brackets, drops attributes it does not recognise, and reflows whitespace. An iframe pasted in HTML view and then viewed in Compose can come back as visible text reading <iframe src=... on your live blog.

The safe sequence is: write in Compose, switch to HTML once, paste, preview, publish. If you need to edit the post later, open it and switch to HTML view before you touch anything.

Fitting the board to a Blogger theme

Blogger's stock themes give the post column somewhere between 550 and 700 pixels, with a sidebar taking the rest. That means:

  • Beginner 9×9 (344 × 472) — fits every theme, every column, and phones. The default recommendation.
  • Intermediate 16×16 (536 × 664) — fits most post columns on desktop. Preview it on a phone before publishing.
  • Expert 30×16 (956 × 664) — wider than a Blogger post column. Use it only on a standalone Page with a wide or no-sidebar layout, and keep the scrolling wrapper.

Blogger's mobile template is a genuinely separate render of your post, which you can inspect by appending ?m=1 to any post URL. Check the board there as well as in desktop preview — it is the version most of your readers will actually see.

The sidebar gadget route

If you want the game on every page of the blog rather than in one post, skip the post editor entirely. From the Blogger dashboard choose Layout, click Add a Gadget in the sidebar column, and pick HTML/JavaScript. Paste the snippet into the content field, give it a title such as "Take a break", and save the arrangement.

Gadget content is stored as you typed it, so none of the Compose view hazards apply — paste the credit line into the gadget along with the frame. The constraint is width: Blogger sidebars are typically 250 to 350 pixels, so use the Beginner board or generate something smaller such as ?size=6x6&mines=5, which reads clearly even in a narrow column.

Whichever route you take, the board needs no maintenance afterwards. It is a link to a page, so improvements to the game show up on your blog without you editing anything. If you want to change the size or theme later, regenerate the code on the embed page and swap the URL.

Blogger embed questions

Where is HTML view in the new Blogger editor?

It is the leftmost control on the post editor toolbar, not a separate tab. In Compose view it shows as a pencil icon; click the small arrow beside it and a menu offers Compose view and HTML view. Once you are in HTML view the icon becomes the angle-bracket code icon, and the same dropdown takes you back.

My embed code vanished or turned into visible text. What happened?

You almost certainly switched from HTML view back to Compose view before publishing. Blogger re-parses the body on that switch and routinely escapes angle brackets or strips attributes, so the iframe either disappears or shows up as literal text on the published page. Paste the code last and publish straight from HTML view.

Can I put Minesweeper in my Blogger sidebar?

Yes, and it is more robust than putting it in a post. Go to Layout, click Add a Gadget in the sidebar column, choose the HTML/JavaScript gadget, paste the snippet into the content box and save. The gadget stores the markup verbatim, so there is no Compose view to mangle it. Use the Beginner 9x9 board — sidebars are rarely wider than 350 pixels.

Does the embed work on the Blogger mobile version?

Yes. Blogger serves a separate mobile template, reachable by adding ?m=1 to a post URL, and iframes render there. Fixed widths do not shrink, though, so a board wider than the phone screen forces sideways scrolling. Wrapping the iframe in a div with max-width:100% and overflow:auto keeps the rest of the layout intact.

Do I need to change my Blogger template?

No. The embed is ordinary post content and needs nothing from the theme. The only template-related consideration is the width of your post column, which decides which board size fits.

Will an embedded game cause problems with AdSense?

The embed is a plain iframe pointing at a game page that carries no third-party ad code and no tracking script of its own, so it does not inject ads into your blog or compete with your own ad units. As always, keep your own AdSense placements compliant with Google’s policies around interactive content.

Everything on this page starts with a snippet from the generator: a game frame plus a one-line credit link that goes under it. Pick a board size and theme, decide whether to show the optional "Powered by" line inside the game, then copy the code.

Open the Minesweeper embed generator

Also useful: the Minesweeper widget generator and iframe options, how to play Minesweeper, and custom board sizes.