# Blog post

> The page of a single post, made for reading: a calm header, a table of contents, a reading progress bar, share buttons, the author box, the previous and next post and related posts.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/blog-post/

## At a glance

- **In the editor:** Blog post
- **Where it goes:** Its own template – open that kind of page in the editor
- **In the presets:** Tally: Blog post; Poster: Blog post; Petal: Blog post
- **Settings:** 39
- **App blocks:** Yes

## Header

- **Layout:** *Title above the image*, *Title and image side by side*, or *Title on the image* (with an **Overlay opacity** for contrast).
- Show the **first tag** above the title, the **excerpt**, the **author**, the **date** and the **reading time**.
- **Show breadcrumbs**, which replace the link back to the blog, or **Show link back to the blog**.

## Image

**Show featured image**, its **Image width** (*Like the text*, *Page width* or *Full width*) and **Image ratio**.

## Reading

- **Text width** and **Text position**, and **Text size** (*Normal* or *Large*).
- **Large first letter:** a drop cap that opens the post.
- **Show table of contents:** built from the post's headings, shown beside the text on wide screens. Write headings with the *Heading 2* and *Heading 3* styles in the post editor.
- **Show reading progress bar:** a thin bar at the top that fills as the reader scrolls.

## After the post

- **Share buttons:** *Under the title*, *Beside the text, while scrolling* or *Below the text*, as icons in circles, icons only or buttons with names.
- **Show tags** and **Show author box** – the name, photo and bio from the author's staff account in Shopify.
- **Show previous and next post.**
- **Related posts:** 2–4 posts from the same blog, those sharing a tag first, then the newest ones, under your own **Heading**.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Blog post** (39 settings, in editor order)

*Header*

| Setting | Options | Default |
| --- | --- | --- |
| **Layout** | Title above the image · Title and image side by side · Title on the image | Title above the image |
| **Text alignment** | Left · Center | Center |
| **Heading size** | Extra large · Large · Medium | Large |
| **Show breadcrumbs** – Shown instead of the link back to the blog | Checkbox | On |
| **Show link back to the blog** | Checkbox | On |
| **Show the first tag above the title** | Checkbox | On |
| **Show excerpt** | Checkbox | On |
| **Show author** | Checkbox | On |
| **Show date** | Checkbox | On |
| **Show reading time** | Checkbox | On |

*Image*

| Setting | Options | Default |
| --- | --- | --- |
| **Show featured image** | Checkbox | On |
| **Image width** | Like the text · Page width · Full width | Page width |
| **Image ratio** | Original · Landscape · Wide · Portrait | Wide |
| **Overlay opacity** | 0–90% (step 5) | 45% |

*Text*

| Setting | Options | Default |
| --- | --- | --- |
| **Text width** | Narrow · Medium · Wide · Page width | Medium |
| **Text position** | Left · Center · Right | Center |
| **Text size** | Normal · Large | Large |
| **Large first letter** | Checkbox | On |
| **Show table of contents** – Built from the headings in the post. Shown beside the text on wide screens. | Checkbox | On |
| **Show reading progress bar** | Checkbox | On |

*After the post*

| Setting | Options | Default |
| --- | --- | --- |
| **Show share button** | Checkbox | On |
| **Share buttons** | Under the title · Beside the text, while scrolling · Below the text | Under the title |
| **Share button style** | Icons in circles · Icons only · Buttons with names | Icons in circles |
| **Show the word "Share"** | Checkbox | On |
| **Show tags** | Checkbox | On |
| **Show author box** – Name, photo and bio come from the staff account of the author. | Checkbox | On |
| **Show previous and next post** | Checkbox | On |

*Related posts*

| Setting | Options | Default |
| --- | --- | --- |
| **Show related posts** – Posts from the same blog that share a tag, then the newest ones | Checkbox | On |
| **Heading** | Text | Sample text |
| **Number of posts** | 2 · 3 · 4 | 3 |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 48px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 32px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Blog](https://themelab.page/tally/docs/sections/blog.md): The blog page – a featured newest post, a tag filter and post cards with hover effects.
- [Blog posts](https://themelab.page/tally/docs/sections/blog-posts.md): The latest posts from a blog as cards, with placeholders until you have published your own.