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

Thêm tiện ích bài viết liên quan 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.

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

Bước 1: Thêm CSS
.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 đề



DEMO

Bước 1: Thêm CSS
.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://rawgit.com/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>
Thủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments