Thursday, September 13, 2018

Display Blogger Category / Label Post in Article Body Valid AMP

    How to 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 :)