Resolved: Blogger Labels Not Displayed on Mobile Devices

2 min read

If you are a regular Blogger user then you might have noticed that Blogger "Labels" are not displayed on Mobile devices by default. But why is it important? Labels or "tags" are a quick way to let users access related content on your website. It also reduces bounce-rate of the site if the user find the article interesting and want to continue reading related articles. Labels do appear on desktop browsers (unless disabled by the admin), but it does not appear on Blogger Mobile templates by default.

Labels on Blogger Blog

You can enable them though. Here is how.

How to enable or display Blogger Labels in Blogger Mobile Template?

Go to the Blogger > Template > EDIT HTML page
Click any where inside the code page and press "CTRL+F" to show the search bar.
Enter "post-footer-line post-footer-line-1" and hit enter to search.
Right after:

<div class='post-footer-line post-footer-line-1'>

Paste the following code:

            <span class='post-labels'>
              <b:if cond='data:post.labels'>
                <data:postLabelsLabel/>
                <b:loop values='data:post.labels' var='label'>
                  <a expr:href='data:label.url' rel='tag'>
                    <data:label.name/>
                  </a>
                  <b:if cond='not data:label.isLast'>
                    ,
                  </b:if>
                </b:loop>
              </b:if>
            </span>

Test by opening any blog post from your blog on a mobile device browser.

You should be able to see labels below the blog post.