Show labels on Blogger's Notable theme

Here's a way to show the post labels on your main blog page if you're using Blogger's new Notable theme.

There are several ways of doing this, but I like this method because it's simple and looks decent.

Labels on regular post snippet boxes

Open the blog template editor (Theme → Edit HTML), and find:

id='Blog1'

Then scroll down and find the following:

<div class='post-footer'>

If you don't see it, you might have to expand <b:includable id='postFooter' var='post'>

Then just after that line, paste in the following:

<div class='post-labels'><b:include data='post' name='postLabels'/></div>

That's basically it.

(Another faster way of getting here is just finding the 3rd instance of <div class='post-footer'>)

Labels on the Featured Post

That will show labels on the normal posts' snippet boxes, but not on the Featured Post. To show the Featured Post's labels, paste the same code we copied just below the 2nd instance of:

 <div class='post-footer'> 

or you can find it manually underneath



id='FeaturedPost1'

Style the labels

The labels might not look great, and may be lacking commas between terms, so you can set them to be styled by adding this CSS, either to your template directly or by going to (Theme → Customize → Advanced → Add CSS)

.post-footer .post-labels a:not(:last-child):after {content: ', ';}

Result

The end result will look something like this:

Blogger Notable theme with labels displayed for Featured Post and regular posts

Labels shown in mobile view

A post with multiple labels

Adding "Labels" label

If you want to include the word "Labels:" (or whatever you specified them to be called in your blog settings), you can add this line of code just before the code already pasted:

<data:messages.labels/>

Removing redundant labels

By adding the labels to the blog posts on the home page in this way, these labels will be shown on the individual post pages too. But the theme already shows labels on individual post pages. So you'll have two label lists right next to each other. You can remove them from the template manually if you want, but I think hiding them via CSS is easier. 

Add this CSS code to remove them (Theme → Customize → Advanced → Add CSS):

#Blog1 > div > article > div > div > div.post-bottom > div.post-footer > div.post-footer-line.post-footer-line-1 > span {display: none;}

Note that this is very messy and may break easily in the future, so replace it with your own better code if you'd like. For now this works for me.

Adding labels to other themes

To add the labels to the rest of Blogger's four new themes, check out these related posts:

• Labels on Blogger's "Notable" theme
• Labels on Blogger's "Emporio" theme
• Labels on Blogger's "Soho" theme
• Labels on Blogger's "Contempo" theme