Thêm tiện ích bài viết liên quan theo nhãn cho blogspot AMP

Bài viết liên quan trong template blogspot AMP chia sẻ trên internet thường là lấy các bài của toàn blog mà không phân biệt bài viết theo nhãn cụ thể.

Điều này phần nào làm ảnh hưởng tới trải nghiệm người dùng cũng như không làm vừa lòng chủ trang blogspot khi cài đặt tiện ích bài viết liên quan cho blogspot AMP.

Dưới đây là toàn bộ code và hướng dẫn cài đặt tiện ích bài liên quan theo nhãn cho blogspot AMP-Related posts by label for blogspot AMP.

Bài viết liên quan gồm ảnh thumbnail và tiêu đề

Bước 1: Thêm CSS vào phần <style amp-custom='amp-custom'>

.related-box {max-height:350px;}

Bước 2: Thêm javascript vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/> 
</b:if>

Bước 3: Thêm HTML vào vị trí bạn muốn hiện thị bài viết liên quan

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
    <div class='related-box'>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/Related-AMP.html?label=&quot; + data:label.name + &quot;&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='1100' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='650'>
    <div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
   </amp-iframe>
     </div>
   </b:if>
  </b:loop>
  </b:if>
<div class='clear'/> 
</b:if>

Bước 4
Tại phần Responsive bạn điều chỉnh trị số chiều cao của

.related-box {max-height:350px;}

sao cho phù hợp không để khoảng trống bottom quá lớn hoặc quá bé mà ẩn mất tiện ích.
Ví dụ thêm CSS

@media screen and (max-width: 800px){.related-box {max-height:0px}}
@media screen and (max-width: 480px){.related-box {max-height:50px}}
@media screen and (max-width: 360px){
.related-box {max-height:400px}
}

Bài viết liên quan chỉ có tiêu đề

Bước 1: Thêm CSS vào phần <style amp-custom='amp-custom'>

.related-box {max-height:200px;}
@media screen and (max-width: 640px){.related-box {max-height:260px }}
@media screen and (max-width: 568px){.related-box {max-height:240px }}
@media screen and (max-width: 480px){.related-box {max-height:250px }}
@media screen and (max-width: 360px){
.related-box {max-height:280px }
}
@media screen and (max-width: 240px){
.related-box {max-height:300px }
}

Bước 2: Thêm javascript vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/> 
</b:if>

Bước 3: Thêm HTML vào vị trí bạn muốn hiện thị bài viết liên quan

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
    <div class='related-box'>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/Related-blogspot-AMP.html?label=&quot; + data:label.name + &quot;&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='1100' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='650'>
    <div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
   </amp-iframe>
     </div>
   </b:if>
  </b:loop>
  </b:if>
<div class='clear'/> 
</b:if>