Display Blogger Category / Label Post in Article Body Valid AMP

Post Category is useful for labeling each article. This is very important for navigating a website, so that the themes in each article can be found easily. For that, displaying categories or labels in a blog's navigation is very important.

In addition, displaying the article label on the website can also reduce the bounce rate. And of course raise your website's pageview.

This time, I will explain how to display the Category or Label in the Body Article, of course Valid AMP HTML.

DEMO: In the bottom article.

Install HTML Code to Display Blogger Category or Label

Blogger has prepared a tag code to display the Post Label. Copy this HTML code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<span class='footer-label'> Category: <b:if cond='data:post.labels'>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'

 rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>&amp;nbsp;</b:if>




          </b:loop>



        </b:if>



</span>

Find for <data:post.body/> and paste after that code. if you find more than one <data:post.body/>,  look for the last one.

So the code will be like this:

<data:post.body/>



<b:if cond='data:blog.pageType == &quot;item&quot;'>



<span class='footer-label'> Category: <b:if cond='data:post.labels'>



          <b:loop values='data:post.labels' var='label'>



            <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'


 rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>&amp;nbsp;</b:if>



          </b:loop>



        </b:if>



</span>

In order to look more attractive, copy the following CSS. For Blogger AMP Templates, copy under <style amp-custom='amp-custom'> and Non-AMP Template, copy before ]]</b:skin> .
/* Footer LABEL */

  .footer-label {display:block;border-left: #2e77e4;border-left-style: solid;max-width:713px;background-color:rgb(215, 241, 255);padding: 15px;margin-left:-10px;margin-right:-10px}


.footer-label a{color: #3498db;font-weight: 700;border-left: #2e77e4;border-left-style: solid;padding: 5px 15px 5px 5px;background-color: #14242b;margin:5px}


  @media screen and (max-width:800px) {.footer-label {padding: 5px 5px 5px 10px;}.footer-label a {display:inline-block;margin:5px auto 0}}

Please SAVE the template when it's finished.

May be useful :)