Show Labels

Today I'm going to share how you can add labels or tags to your Blogger blog using simple HTML code. You might have seen other blogs with labels at the bottom of each post, which helps readers navigate topics they're interested in easily.

On the blogger platform, displaying related labels for a post can enhance navigation and readability for readers. In this article, I will guide you through the steps to display labels using HTML code, whether it's displaying the first label, the last label, or all labels associated with a post.

Now, insert the following HTML code

<b:if cond='data:post.labels'>
    <b:loop index='num' values='data:post.labels' var='label'>
        <b:if cond='data:num == 0'>
            <span class='position-absolute top-0 start-50 translate-middle badge p-2 rounded-1 bg-secondary' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                <i class='fa-sharp fa-thin fa-hashtag'/>
                <a class='labelhome' expr:href='data:label.url + &quot;?&amp;max-results=6&quot;' expr:title='data:label.name' itemprop='item'><data:label.name/></a>
                <meta content='1' itemprop='position'/>
            </span>
        </b:if>
    </b:loop>
</b:if>

<b:if cond='data:post.labels'>
    <b:loop index='num' values='data:post.labels' var='label'>
        <b:if cond='data:num == (data:post.labels.size - 1)'>
            <span class='position-absolute top-0 start-50 translate-middle badge p-2 rounded-1 bg-secondary' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                <i class='fa-sharp fa-thin fa-hashtag'/>
                <a class='labelhome' expr:href='data:label.url + &quot;?&amp;max-results=6&quot;' expr:title='data:label.name' itemprop='item'><data:label.name/></a>
                <meta content='2' itemprop='position'/>
            </span>
        </b:if>
    </b:loop>
</b:if>

<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url'><data:label.name/></a>,
  </b:loop>
</b:if>

Explanation of Code: Displaying Labels on Blogspot

• <b:if cond='data:post.labels'> : This checks if the post has at least one label before starting the loop.
• <b:loop index='num' values='data:post.labels' var='label'> : This is a loop that iterates over each label in the current post's label list. The variable label recodesents each label in each loop iteration.
• <span class='position-absolute top-0 start-50 translate-middle badge p-2 rounded-1 bg-secondary' ...> : This is the HTML element to display each label.
• <i class='fa-sharp fa-thin fa-hashtag'/> : This is the icon or symbol recodesenting the label.
• <a class='labelhome' expr:href='data:label.url + "&max-results=6"' expr:title='data:label.name' itemprop='item'><data:label.name/></a> : This is the link to the label's page. data:label.url is the URL of the label's page, and data:label.name is the label's name.
• <meta expr:content='data:num + 1' itemprop='position'/> : This is metadata about the position of the label in the label list. data:num is the index of the current label in the loop. Adding + 1 adjusts the index to start from 1 instead of 0.

Usage Steps:

1. Copy and Paste the Code: Copy the above code into the relevant section of your Blogger template.
2. Save Changes: Save your Blogger template after inserting the HTML code to display the labels.
3. View Results: Open a post page on your blog to see the labels displayed according to your configured settings.

With the above codes, you can easily customize how labels are displayed on your Blogspot posts, whether it's the first label, the last label, or all labels together.