How to Add Step Lists in Blogger: Timeline, Cards and Horizontal Steps

Step lists turn instructions into a clear path. Every step gets its own number, so readers always know where they are and what comes next. The theme gives you four types: a timeline, cards, a compact list, and a horizontal row.

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.

The four types

All four use the same list. You pick the type by adding a second class after step.

1. Timeline

This is the default. Each number sits in a circle, and a line joins the steps. As the reader scrolls, the steps fade in one by one and the line fills up. Use it for how-to guides.

1. Back up your themeIn Blogger, go to Theme, open the menu next to Customize, and choose Backup.
2. Upload the new fileChoose Restore and select the theme.xml file from your computer.
3. Check the resultOpen your blog in light and dark mode and look at a few posts.

<ol class="step">
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

2. Cards

Add card to put each step in its own card with a large number. Use it when each step has a lot to say.

1. Back up your themeIn Blogger, go to Theme, open the menu next to Customize, and choose Backup.
2. Upload the new fileChoose Restore and select the theme.xml file from your computer.
3. Check the resultOpen your blog in light and dark mode and look at a few posts.

<ol class="step card">
  <li>First step</li>
  <li>Second step</li>
</ol>

3. Compact

Add compact for small number tags and no line. Use it for short, one-line steps.

1. Open Blogger and go to Theme.
2. Choose Edit HTML.
3. Paste the code and press Save.

<ol class="step compact">
  <li>First step</li>
  <li>Second step</li>
</ol>

4. Horizontal

Add row to lay the steps out side by side, joined by a line. It works best with three to five short steps. On phones it switches back to a vertical list by itself.

1. BackupSave the old theme.
2. UploadRestore the new file.
3. CheckLook at a few posts.

<ol class="step row">
  <li><b>Backup</b>Save the old theme.</li>
  <li><b>Upload</b>Restore the new file.</li>
  <li><b>Check</b>Look at a few posts.</li>
</ol>

Keep horizontal steps short. Long text in a narrow column is hard to read, so use the timeline or cards for longer steps.

Step titles

Every type supports a title. Start the step with a <b> tag, and the text in it shows on its own line above the rest of the step.

1. Open the editorGo to Theme and choose Edit HTML.

<li><b>Open the editor</b>Go to Theme and choose Edit HTML.</li>

The title only works when <b> is the first thing inside the <li>. Bold text in the middle of a step stays inline.

Which type should I use?

Type	Write	Best for
Timeline	class="step"	How-to guides
Cards	class="step card"	Long, detailed steps
Compact	class="step compact"	Short, one-line steps
Horizontal	class="step row"	3 to 5 short stages