Show labels on Blogger's Soho theme

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

Currently no labels are displayed on those post card snippets on the main blog page. Post labels are only shown on individual post pages. I wanted to display those Here's one way to show those labels.

For regular posts

First we'll display labels on all the regular posts on your blog homepage.

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

id='Blog1'

Then scroll down to find:

<div class='post-footer'>

(You might need to expand the listing for <b:includable id='postFooter' var='post'>)

Then just below that line, paste this:

<b:include data='post' name='super.postLabels'/>

That's it!

Tip: 
You can also just immediately jump to the 4th instance of <div class='post-footer'> which might be faster. That 4th instance is for normal blog posts, and the 3rd instance is for the Featured Post, which we will deal with below.

Results

Labels displayed below each blog post's subject line, in desktop view

Labels appear in mobile view too

For the featured post

The part above will add labels to the normal posts on the blog homepage, but not the top Featured Post. We need to add the code in one more place for that.

Find:

id='FeaturedPost1'

Scroll down a few lines to find:

 <div class='post-footer'>

(Again, you might need to expand <b:includable id='snippetedPostContent'>)
(Or again, just go right to the 3rd instance of the post-footer code)

Just below it, paste in the same line from above:


<b:include data='post' name='super.postLabels'/>

That will display the labels on the Featured Post, like this:

Labels added just below the snippet text of the Featured Post

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 label-showing code:

<data:messages.labels/>

Removing redundant labels

By adding the labels to the blog posts on the home page, the labels will be shown there 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 completely, but I think hiding them via CSS is just as good. 
Add this CSS code to remove them (Theme → Customize → Advanced → Add CSS):

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

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