How to Add Post Breaks (Dividers) in Blogger

A post break is a small divider between two parts of a post. It tells readers that one topic ends and another begins, and it gives long posts room to breathe. The theme gives you seven styles, and each one is a single tag.

Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

How it's built

A break is the standard <hr> tag. Put it on its own line between two paragraphs. To change the style, add a class.

<p>End of the first part.</p>
<hr>
<p>Start of the next part.</p>

The Insert horizontal line button in Blogger's Compose view adds the standard break too. You only need HTML view for the other styles.

The seven styles

1. Standard

A small tilde in the middle. This is what a plain <hr> shows.

---

<hr>

2. Dot

Three quiet dots.

---

<hr class="dot">

3. Line

A thin line across the full width.

---

<hr class="line">

4. Fade

A line that fades out at both ends.

---

<hr class="fade">

5. Star

A small colored star between two short lines.

---

<hr class="star">

6. Text

Your own word in the middle of the line. Use it to mark parts of a long guide, an update, or the end of a story.

---

<hr data-text="Part 2">

7. Wave

A short wavy line for a lighter feel.

---

<hr class="wave">

Use breaks between topics, not between every paragraph. Too many breaks make a post feel choppy. Where a new section has a title, a heading is usually the better choice.

Quick reference

You want	Write
Standard ~	<hr>
Dot	<hr class="dot">
Line	<hr class="line">
Fade	<hr class="fade">
Star	<hr class="star">
Text	<hr data-text="Your text">
Wave	<hr class="wave">