Sunday, April 23, 2017

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.

3 comments :

  1. Hello,
    thank you for this useful tip.

    I want some help regarding this new blogger's Notable theme. In the list of posts in the homepage, the thumbnail img box background doesn't contain the image of the post, It shows the image inside the box zommed and not contained.
    I have played with css of this part, but I couldn't get it to work, I was hoping if you could help me with this since your blogging is the only talking about this new theme

    ReplyDelete
    Replies
    1. You're right, the image is displayed as a background within that element. But I'm not sure what you're trying to do. Do you mean you don't want it zoomed? It looks like the image source is a resized version of the original image (when the screen size is large). But the image source is different (the full image) when screen size is reduced and the theme becomes more "mobile friendly". In that case I can't think of any way of changing the apparent "zoom".

      Delete
  2. This comment has been removed by the author.

    ReplyDelete