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ước 1: Thêm CSS vào phần <style amp-custom='amp-custom'>
Tại phần Responsive bạn điều chỉnh trị số chiều cao của
Ví dụ thêm CSS
Bước 1: Thêm CSS vào phần <style amp-custom='amp-custom'>
Đ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 == "item"'>Bước 3: Thêm HTML vào vị trí bạn muốn hiện thị bài viết liên quan
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>Bước 4
<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='"https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/Related-AMP.html?label=" + data:label.name + "&url=" + 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>
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;}Bước 2: Thêm javascript vào trước thẻ </head>
@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:if cond='data:blog.pageType == "item"'>Bước 3: Thêm HTML vào vị trí bạn muốn hiện thị bài viết liên quan
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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='"https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/Related-blogspot-AMP.html?label=" + data:label.name + "&url=" + 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>