How To Add Labels To The Blogger Mobile Template

Monday, February 29, 2016
How to Add Labels to Blogger Mobile

Once upon a time I decided I wanted labels to show up on my mobile site, so I spent a couple hours figuring out how to add them (even though it was really a simple thing and shouldn't have taken more than a minute or two *face palm*) Then after I accomplished this task I decided I no longer wanted them, so to make sure that those hours (okay not really hours more like ten minutes but still) of my very precious time don't go to waste I decided to write this post in case any of you guys want labels to appear in mobile.

Remember to always backup your template before making any changes to the code. If you're not sure how to do so just go to Blogger > Template > Backup/Restore (Button) > Download Full Template (Button)

First we most get to your template, if your not sure how to get there just go to Blogger > Template > Edit HTML (Button)

Next click inside the HTML edit box. Hit Ctrl+f  And search the code for the first instance of:

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

This should appear twice, and we only want the first instance as that one applies to mobile.


Now add this code under <div class='post-footer-line post-footer-line-1'>

<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>

And voila here you have it.
I hope this helped. If you have any questions or this isn't working for you leave a comment and I'll see if I can help you.