Blogger Popular Post Add Label Not Working

Question

here I want to add a label on the popular blogger popular posts widget, but it doesn't appear there and that's the code. Is there something wrong?

Here I have done the right thing like adding labels and so on, in normal posts it works fine, but popular post widgets don't work using this code

Code:

<b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/> </a>
   <b:if cond='data:label.isLast != &quot;true&quot;'> &#160;&#160; </b:if>
</b:loop>

Answer 1

Try my custom Popular Post. Its has label on it.

.grid-col {grid-template-columns: repeat(3,1fr);display: grid;}
.grid-col .post:nth-child(n+2) {margin: 10px;}
.grid-col section:nth-child(1) img {height: 205px;object-fit: cover;object-position: top;}
.grid-col img {width: 100%}
.grid-col section:nth-child(1) {grid-column: 1 / -1;}
.grid-col section:nth-child(n+2) img, .ofc {height: 105px;object-fit: cover;}
.grid-col section:nth-child(n+2) .post-title,.grid-col section:nth-child(n+2) .byline, .grid-col section:nth-child(n+2) .date {display: none;}
.ov-img, .ov-title {grid-row: 1 / -1;}
.ov-img {grid-column: 1 / -1;}
.ov-title {grid-column: 1 / -1;align-self: self-end;padding: 10px 15px;overflow: hidden;}
.grid-col section:nth-child(1) .ov-title {background: linear-gradient(to bottom,#0000,#000);}
.item-thumbnail {position: relative;display: grid;}
.item-thumbnail:hover img {filter: brightness(50%);transition: .2s}
.PopularPosts{counter-reset: section;}
.grid-col section .counter::before {counter-increment: section;content: counter(section);position: absolute;top: 6px;left: 4px;background: #FF6347;color: white;padding: 3px 7px;font-size: 13px;border-radius: 3px;}
.PopularPosts .post-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.PopularPosts a,.genre-date{color: white;text-decoration: none;font-weight: 500}
.genre-date {font-size: 14px;}
.widget-title {display: flex;justify-content: space-between;align-items: center}
.view-all {background: #FF6347;text-transform: uppercase;font-size: 9px;padding: 3px 6px;border-radius: 2px;}

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
  <div class='widget-title'>
  <b:include name='widget-title'/>
          <a class='view-all' href=''>View All</a>
        </div>
  <div class='widget-content'>
    <b:include name='snippetedPosts'/>
  </div>
</b:includable>
      <b:includable id='postLabels'>
  <span class='byline post-labels'>
    <span class='byline-label'>Genre: </span>
    <b:loop index='i' values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
      </a>,
    </b:loop>
  </span>
</b:includable>
      <b:includable id='snippetedPostContent'>
  <div class='post-content'>
    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  </div>
</b:includable>
      <b:includable id='snippetedPostThumbnail'>
  <div class='item-thumbnail relative overlay'>
    <a class='block ov-img b-img' expr:href='data:post.url'>
      <b:include data='{                         image: data:post.featuredImage,                         imageSizes: [172, 244],                         imageRatio: &quot;1:2&quot;,                         sourceSizes: &quot;272px&quot;                        }' name='responsiveImage'/>
      <span class='counter'/>
    </a>
    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  </div>
</b:includable>
      <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != &quot;&quot;'>
    <div class='ov-title'>
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
    <div class='genre-date'>
      <b:include name='postLabels'/>
      <div class='date mt-5'><data:post.date/></div>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='snippetedPosts'>
  <div class='grid-col' role='feed'>
    <!-- Don't render the post that we're currently already looking at. -->
    <b:loop values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>
      <section class='post' role='article'>
        <b:include name='snippetedPostContent'/>
      </section>
    </b:loop>
  </div>
</b:includable>
    </b:widget>