Mastering the Blogspot Editor: How to Use H-Tags and 3 CSS Tricks to Keep Your Headings Evenly Spaced

Blogger (Blogspot) Editing Can Feel Like a Lot

💡

Blogger is flexible but not exactly hand-holding. With a few habits—solid heading structure, small CSS tweaks, and a repeatable setup—you can make it feel polished and predictable.

I’ve been writing on Google’s Blogger platform for quite a while, and I still hit moments that slow me down. Blogger gives you plenty of freedom, but the defaults aren’t always friendly. Little things—spacing, heading levels, where to put a style—can quickly eat up time.

It’s probably not just me. If the editor has felt a bit bare-bones to you, you’re not wrong. The good news: once you adopt a simple structure and a couple of reusable snippets, everything gets easier to control—and your posts read calm and consistent from top to bottom.

Blogger (Blogspot) Editing Can Feel Like a Lot

I remember my first day on Blogger. I had no idea what font size felt “right,” when to use a heading, or how the h tags affected the page. I ended up with a wall of text and a layout I didn’t love. That was a wake-up call: the editor won’t fix structure for you—you set the rules.

The editor is simple by design. If you want precise, stable results, you need a routine: proper headings + a little CSS + consistent placement.

How to Treat Headings and Sections

💡

Think of headings as a table of contents you build as you write. Use H2 for main sections, H3 for subsections, H4 for small sub-points. Keep H1 for the post title only.

If you’ve posted on Blogger before, you’ve seen the dropdown that controls text type. It’s not just visual styling—it’s structure. Those labels map directly to HTML heading levels, and they matter for both readers and search engines. For Google and Naver SEO—and even AdSense review—using proper headings is essential.

The Blogger heading menu maps to H2 / H3 / H4, etc.

Here’s the mapping you’ll use every day:

Main page title is H1
Section headings are H2
Subsections are H3
Minor sub-points are H4

That’s your core outline.

In HTML, h1 through h6 represent heading levels. One crucial note: don’t drop an extra H1 inside the post body.

Blogger automatically assigns the post title as the single H1 on the page. If you add another H1 in the content, you dilute that top-level signal. Duplicate H1s can be a minor negative SEO signal.

Start your in-post structure at H2. In the editor, choose “Heading” for each major section; Blogger will output an h2 behind the scenes.

Everything you’re reading here follows that pattern. It keeps the page scannable and predictable on mobile.

Use “Heading” for section titles, “Subheading” for the next layer, and “Minor heading” if you need one more step down. That’s H2 → H3 → H4 in code.

Here’s a quick mental model—treat it like a structured outline:

Blog Post Title (H1): A Beginner’s Guide to Cleaner Blogger Posts

Section (H2): Working in the HTML view

Subsection (H3): Where the HTML toggle lives
Subsection (H3): Tiny HTML you’ll use often

Minor (H4): Understanding <div>…</div>
Minor (H4): Line breaks and spacing (<br />)

Section (H2): Quoting cleanly

Subsection (H3): Styling callouts and blockquotes

Even with H-tags, Consistent Spacing Is Tricky

💡

Headings give structure, but spacing is on you. One small CSS rule—set once—keeps every section’s breathing room consistent.

Long posts reveal spacing drift. Some headings sit too close to the previous paragraph; others float too far away. It’s distracting. I prefer a steady vertical rhythm, but hand-tuning it paragraph by paragraph is a grind.

If you try to fix spacing by tapping Enter repeatedly, the editor may ignore it in the final HTML. You’ll scroll, nudge, and still not get the look you want.

There’s a cleaner solution: add a small CSS snippet that applies consistent top margins to your headings.

One style rule, placed correctly, fixes it everywhere.

Start with this:

<style>

/* Paragraph spacing between headings (h-tags) and body */

h2 { margin-top: 80px; }

h3, h4, h5, h6 { margin-top: 60px; }

</style>

You can paste this in a few places, depending on whether you want it to affect a single post or your whole site.

Before we add it, here’s what spacing looked like without the CSS. The box sits on top of the next H2, and everything feels cramped.

Before adding CSS

And after the CSS is applied, those sections finally breathe.

After adding CSS

So, where should you put that CSS? You’ve got three good options.

Ways to Apply the CSS

💡

Use per-post CSS for quick tests, the HTML/JavaScript gadget for site-wide coverage, or theme HTML for power users who want total control.

Option 1 — Add CSS to a Single Post

💡

Fastest route: switch to HTML view and paste the snippet at the very top. Perfect for one-off formatting or experiments.

This is the simplest.

Switch to HTML view. Click the pencil icon just below the title area as shown:

HTML view

Now you’ll see the raw HTML of your post. Paste the <style>…</style> snippet at the very top.

<style>

/* Paragraph spacing between headings (h-tags) and body */

h2 { margin-top: 80px; }

h3, h4, h5, h6 { margin-top: 60px; }

</style>

This screenshot shows how it looks in HTML view once applied:

Adding CSS per post (HTML view)

This per-post method is very reliable for a single article and requires no template changes.

The trade-off: you’ll need to add it to each new post, and if you later want to adjust spacing globally, you’ll have to revisit older posts manually.

Option 2 — Add a Site-Wide Gadget in Layout

💡

Use the “HTML/JavaScript” gadget in Layout to apply the CSS to your entire blog at once. It’s a set-and-forget approach.

Compared to the per-post method, this is slightly more advanced, but it updates every page.

Open Layout from your Blogger dashboard:

Layout menu location

In the Layout view, click Add a Gadget in any section.

Click “Add a gadget”

Choose HTML/JavaScript from the list:

Pick “HTML/JavaScript”

After selecting it, you’ll see a dialog like this:

Paste the CSS snippet (the same one) into the Content box and save.

Leave the Title empty—many themes render gadget titles, which you don’t want for a styling block.

Place the gadget in a section that loads with the page content. For reading-related styles, the Page Body section works best.

Place in “Page Body” for reliable effect

That’s it. Your spacing rules now apply across the whole site.

Option 3 — Add CSS Directly to the Theme HTML

💡

For advanced users only. Paste CSS right before </b:skin> to make it part of the template. Back up first.

This is the most powerful approach and updates every page instantly. It’s also the easiest to break if you’re not comfortable editing templates.

If you’re not confident editing theme code, skip this route. A stray character can cause template errors that are tedious to unwind.

Go to Theme → click the three dots (or arrow) next to Preview → Edit HTML.

Theme editor in Blogger

In the editor, search for ]]></b:skin> or just </b:skin>. Paste your CSS right above that closing tag.

The b:skin block is where the template’s main CSS lives. Adding your rules there makes them part of the theme and ensures they override earlier styles.

Back up the theme before changes, test after saving, and keep a note of what you added for next time.

Wrap-Up

💡

Use headings for structure, a small CSS snippet for predictable spacing, and pick the placement method that matches your comfort level.

We covered how Blogger maps editor options to real HTML headings, why H1 belongs to the title alone, and how to space sections cleanly with a few lines of CSS. You can drop the code into a single post for quick wins, use a gadget for site-wide results, or wire it directly into the theme if you know your way around templates.

Once you do it once or twice, the pattern clicks. Your pages feel calmer, easy to skim, and easier on the eyes—exactly what readers (and search engines) appreciate.

FAQ

💡

Quick answers to common Blogger layout and spacing questions.

Do I ever need more than one H1?

No. Keep a single H1—the post title. Everything else should cascade under it: H2 for sections, H3 for subsections, H4 for smaller notes. This helps accessibility, SEO, and consistency.

My spacing still looks off on mobile. Why?

Some themes add different margins on small screens. If headings feel tight on phones, add a mobile tweak: <style>@media (max-width: 480px){ h2{margin-top:64px} h3,h4,h5,h6{margin-top:48px} }</style> Place it alongside your main spacing rules.

Blockquotes look too close to the next heading. Any tips?

Add a little bottom margin to blockquotes: <style>blockquote{margin-bottom:16px}</style> You can include this in the same gadget/snippet.

Will a gadget with CSS slow my site?

Plain CSS in an HTML/JS gadget is tiny and loads fast. Just avoid adding multiple duplicate gadgets with the same styles.

What if another part of the theme overrides my margins?

Use slightly more specific selectors, e.g., .post h2 instead of just h2, or add !important sparingly: h2{margin-top:80px !important}. Prefer specificity first; !important is a last resort.

Where should I keep notes about my CSS changes?

At the top of your snippet, add a dated comment like: /* 2025-10-29: heading spacing rules */. Keep a small doc with what you changed and why.

Can I use different spacing per section?

Yes. Add a class to a wrapper and target inside it: .intro h2{margin-top:48px}. For example, give your opening section a class of intro in HTML view if you want a tighter hero area.

I prefer bigger space above H2 than H3. Is that okay?

Absolutely. The snippet already shows H2 at 80px and H3/H4 at 60px. Adjust until your theme feels balanced.

Does this help with AdSense approval?

Clean structure and consistent layout improve readability, which indirectly supports quality signals. It’s not a guarantee, but it’s definitely the right direction.

How do I revert if I don’t like the changes?

Remove the snippet from the post/theme/gadget and refresh. If you edited the theme, restore from the backup you made before changes.