How to edit HTML and add CSS in Blogger safely

Blogger lets you edit the theme code. Do it in small steps, with a backup, and look at the result each time.

Where the code is

Edit the HTML of the whole theme. In the left menu click Theme. Under "My theme" click More, then Edit HTML. Make your change and click Save.

Add CSS only. In Theme, click Customize, then Advanced in the left menu, then the down arrow beside Add CSS. Type your code and click Save at the bottom right.

Adding CSS is the safer of the two: you do not touch the structure of the theme, and removing your code undoes the change. Use it for colours, spacing, fonts and hiding things.

A safe routine

1. Download a backup of the theme (see the backup page).
2. Make one change.
3. Save and open the blog in a second tab (not the preview only). Look at the home page, a post and a page.
4. If the page broke, undo the change at once, or restore the backup.
5. Only then make the next change.

Blogger's own warning applies: Google claims no ownership or control over content or code that authors add, and authors who add code or third-party widgets do so at their own risk. Never paste code that you do not understand, especially scripts from unknown sites.

Examples of CSS you can add

.post-title { font-size: 1.6rem; line-height: 1.3; }
.post-body img { max-width: 100%; height: auto; }
.post-body { line-height: 1.7; }

The class names depend on the theme. Right-click the part of the page in your browser and choose Inspect to see its real class name, then write the rule for that name.

When the code breaks the blog

Blogger's troubleshooting page lists these checks:

• If you get an error when you save the theme or a gadget, check your code for problems.
• If the blog is blank or shows code instead of the page, open Edit HTML, check the code and fix it, or choose a new theme, then click Save.
• If the code looks right, the problem may be an encoding issue in the browser.
• A broken gadget can be removed in Layout by clicking its Edit and then Remove.
• Reload the page, update the browser, clear cache and cookies, try a private window and, if that works, remove browser extensions.

Good habits

• Keep a text file with every change you made and why, so you can undo one without losing the others.
• Prefer CSS to editing the structure.
• Test a change on a draft post, not on your most important page.
• Do not remove the lines that Blogger needs (the b:skin section and the Blog widget); the theme guide explains them.

This is an independent guide. It is not connected with Google or Blogger. Blogger, AdSense and Google are names of Google LLC. The steps follow Blogger Help and AdSense Help as read on 13 November 2026; the Blogger screens change from time to time, so a menu may be named a little differently on your screen.