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:



Comments

I have been unsuccessful in finding information on how to change the size of the image below the header of my blog. I am using the Soho theme. The space for the image is too large and creates too much space between the header and the blog post. I am NOT a coder nor do I know anything about blog design. I just need to know exactly where the line is that I need to change and what I should change it to. Can you advise? Thanks in advance for your help. myinspiredtable.blogspot.com
Sam Nordberg said…
Including the link helped, thanks.
Try adding the following CSS code (in Blogger theme editor, find the "Add CSS" section and just paste this in):

.hero-image.has-image {height: 100px !important; width: 350px !important; margin: auto;}

Go ahead and adjust either of those size numbers to get the fit you want.
GO HEALTH said…
i use soho template how i can create navigation menu horizontal
Cristina said…
Hi! Thanks for the easy to understand posts!!
Regarding Soho theme, I want to get rid of the thumbnail picture that shows on the home page and just keep the default brown box around the post title. I used this css: .snippet-thumbnail {
display: none;
}
but it get's rid of the brown box entirely. Any suggestions on how to just delete the picture without deleting the box? Thanks in advance!
Sam Nordberg said…
Sounds like you want to use this:

.snippet-thumbnail img {display:none;}