How to Add Breadcrumbs to Blogger (Code for Current Themes)

Updated November 2026 by Marius: rewritten after testing on a Blogger test blog with the Contempo, Soho, Notable, Essential and Emporio themes and the classic Simple theme. The code from 2014 doesn’t work on current themes. Originally published by Hardeep Asrani in 2014.

When I went to update this post, I first tried the original code on my Blogger test blog. On Contempo, Blogger’s default theme, I couldn’t get past the first step: the line it tells you to search for isn’t in the theme anymore. I checked Soho, Notable, Essential and Emporio too, and it’s not in any of them.

So I rewrote the code for the current themes. In this guide, I will show you step-by-step how to add a breadcrumb like this one above your post titles:

It also works on the older classic themes (I tested Simple), and it includes schema.org breadcrumb markup. Google’s Rich Results Test reads it as valid breadcrumbs.

What you get

• On posts: Home › label › post title. A post without labels gets Home › post title.
• On Pages: Home › page title.
• Nothing on the home page, label pages, archives and search results. On label pages, Contempo already shows “Showing posts with the label …” with a Show all button, so a breadcrumb would only repeat it.

Why the 2014 code doesn’t work anymore

Blogger’s current themes (Contempo, Soho, Notable, Essential and Emporio) use a newer version of the Blog widget, and the old code had two problems there:

• The two lines the old steps told you to search for, <b:include data='top' name='status-message'/> and <b:includable id='main' var='top'>, aren’t in any of these themes.
• Even pasted somewhere else, it would never show a label. It picked the label with data:label.isLast == "true", and isLast doesn’t exist in the new widget version. On my test blog it printed nothing, so that condition was never true.

On a classic theme like Simple, the old code still runs. I pasted it exactly as the old steps said, and found a few rough edges: a post with three labels showed the last one alphabetically, a post without labels got “Home »Unlabelled »” (with a missing space, and “Unlabelled” isn’t a link to anything), Pages got no breadcrumb at all, and search results said “Posts filed under Search results for bread”. There was no structured data either, so I’d replace it there too.

Before you start

Back up your theme first. In Blogger, go to Theme, click the arrow next to Customize and choose Backup. I had to put my test blog back after every test, and the easiest way was to open Edit HTML, replace everything in the editor with the content of the backup file and save. (Restore from the same menu also works, but it kept a few extra gadgets for me.)

You’ll also need to know which theme you use. It’s shown under My Theme on the same page, for example “Contempo Light”.

1. Paste the breadcrumbs code

From the same menu next to Customize, choose Edit HTML. In the toolbar, click the first icon (Jump to widget) and choose Blog1. The editor jumps to the line that starts with <b:widget id='Blog1'. Right after the widget settings, you’ll find <b:includable id='main'> (in Notable it’s <b:includable id='main' var='this'>, and in classic themes <b:includable id='main' var='top'>). It should look like this:

Copy & paste the following code right above that <b:includable id='main' line:

<b:includable id='breadcrumbs'>
  <b:if cond='data:view.isSingleItem'>
    <b:with value='data:posts.first' var='post'>
    <b:with value='data:post.labels filter (l =&gt; l.name not in [&quot;Featured&quot;])' var='crumbLabels'>
      <nav aria-label='Breadcrumb' class='breadcrumbs'>
        <ol itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
          <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl' itemprop='item'><span itemprop='name'>Home</span></a>
            <meta content='1' itemprop='position'/>
          </li>
          <b:if cond='data:crumbLabels.any'>
            <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <a expr:href='data:crumbLabels.first.url' itemprop='item'><span itemprop='name'><data:crumbLabels.first.name/></span></a>
              <meta content='2' itemprop='position'/>
            </li>
          </b:if>
          <li aria-current='page' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <span itemprop='name'><data:post.title/></span>
            <meta expr:content='data:crumbLabels.any ? 3 : 2' itemprop='position'/>
          </li>
        </ol>
      </nav>
    </b:with>
    </b:with>
  </b:if>
</b:includable>Code language: HTML, XML (xml)

This takes the post from the Blog widget itself, so it doesn’t matter how your theme builds the post. That was the part that took the most testing. Each of the five current themes builds its posts differently, and the main part of Blog1 was the only place that’s the same in all of them.

2. Choose where it shows up

The code above only defines the breadcrumb. To print it, we need this line:

<b:include name='breadcrumbs'/>Code language: HTML, XML (xml)

Where you put it depends on your theme:

• Contempo: press Ctrl+F (Cmd+F on a Mac), search for <b:include data='post' name='postTitle'/> and paste the line right above it. That puts the breadcrumb inside the post box, above the title. I first put it right below <b:includable id='main'> like on the other themes, but on Contempo that’s on top of the background photo, where it was hard to read.
• Soho, Notable, Emporio, Essential and classic themes like Simple: paste it right below the <b:includable id='main'> line from step 1 (the line you pasted the code above). The breadcrumb then shows up above the post.

Use one of the two places, not both. On Soho, it looks like this:

3. Style the breadcrumb

Without CSS, the breadcrumb is a numbered list (1. Home, 2. Bread, 3. the post title). To put it on one line, search for ]]></b:skin> and paste this right above it:

.breadcrumbs ol { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; line-height: 1.5; }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: '\203A'; margin: 0 8px; opacity: .6; }
.breadcrumbs a { text-decoration: none; }Code language: CSS (css)

It shows the items on one line with a › between them, in your theme’s link color. Feel free to change the font size or the separator. Last, but not least, click the save icon in the top right corner. Here’s the same code on the classic Simple theme:

Which label it shows

A post can have several labels, but a breadcrumb only needs one. Blogger always lists a post’s labels alphabetically, no matter in which order you type them. I typed “Sourdough, Recipes, Bread” on a test post, and Blogger listed them as Bread, Recipes, Sourdough. So the breadcrumb shows the first label alphabetically.

If you use some labels for something other than topics (for example a “Featured” label for a slider), you don’t want those in the breadcrumb. That’s what this line in the code is for:

<b:with value='data:post.labels filter (l =&gt; l.name not in [&quot;Featured&quot;])' var='crumbLabels'>Code language: HTML, XML (xml)

Put the labels to skip between the brackets, each one between " like in the code. For two labels, it looks like this:

<b:with value='data:post.labels filter (l =&gt; l.name not in [&quot;Featured&quot;, &quot;Slider&quot;])' var='crumbLabels'>Code language: HTML, XML (xml)

When I put Bread on that list, my test post showed Recipes instead. If all labels of a post are on the list, the breadcrumb is just Home › post title. You can leave “Featured” there even if you don’t have that label.

4. Test it

Open a post with a label, a post without labels and a Page, and check that each one shows the right trail. Then I’d check the structured data with Google’s Rich Results Test: paste the address of a post and run the test. Breadcrumbs should show up as a valid item.

My test blog is hidden from search engines, so the test said “URL is not available to Google” (it still found the breadcrumbs). If you get that too, open the post, view the page source (Ctrl+U, or Cmd+Option+U on a Mac), copy all of it and paste it in the Code tab instead. That gave me “Breadcrumbs: 1 valid item detected” on both a post with a label and one without.

That’s it! Your posts and Pages now have breadcrumbs that work on the current Blogger themes.

Closing remarks

• The breadcrumb shows one label. Blogger has no “main label” setting, so the skip list is the only way to influence which one.
• I tested the Light variant of each theme. The colors come from your theme, so the other variants should be fine, but have a look at yours.
• If you switch to another theme later, the code doesn’t come along. You’ll need to add it again.
• While you’re in Edit HTML anyway, you can also add the Open Graph tags Blogger leaves out, and on classic themes, hide the Blogger navbar with one CSS rule.
• If your theme isn’t on my list and the breadcrumb doesn’t show up, let me know in the comments with the theme name.