Hai mẫu bài viết liên quan thường dùng cho blogspot

Bài viết liên quan hay còn gọi related posts là một trong những thành phần không thể thiếu trong bài viết mà đa số Blog/ website  nào cũng chèn sẵn trong bài viết, giúp cho độc giả có thêm nhiều thông tin liên quan cũng như tăng sự tương tác hay làm giảm độ thoát trang xuống thấp.  Mình giới thiệu hai dạng bài viết liên quan để bạn đọc tham khảo có thể thêm nếu bài viết chưa có hoặc thay thế nếu bài viết đã có sẵn mẫu mà các bạn không thích

1. Dạng bài viết liên quan có thumbnail

Mẫu bài viết liên quan với hình ảnh đẹp kèm tiêu đề rút gọn đẹp mắt giúp tăng sự chú ý cho người đọc

Cách làm



+ Đặt đoạn script gọi dữ liệu bài viết trên thẻ </head>

<b:if cond='data:view.isPost'>
<script src='https://cdn.rawgit.com/ns24h/js/master/relatedpoststhumb.js'/>
</b:if>

+ Đặt HTML trong <b:includable id='post' var='post'> ngay dưới post-footer ví dụ:

<b:if cond='data:view.isPost'>
  <div id='related-posts'>
    <h3><span>đọc thêm</span></h3>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == &quot;true&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&quot;'/>
      </b:if>
    </b:loop>
    <script>
      var currentposturl=&quot;<data:post.url/>&quot;;
      var maxresults=9;
  printRelatedLabels_thumbs();
    </script>
  </div>
</b:if>

Thay 9 bằng số bài viết muốn hiển thị

+ Viết css chèn trước </head>

<b:if cond='data:view.isPost'>
<style>
*{box-sizing: border-box;}
#related-posts{margin:20px 0 10px 0}
#related-posts h3{padding:20px 0;color:#333;font:bold 20px Roboto,sans-serif;text-transform:uppercase;border-top:3px solid #dfdfdf}
#related-posts h3 span{border-top:3px solid #005791;padding:20px 0 0 0}
.box_category{margin:0 -10px}
#related-posts .item{padding:0 10px 20px 10px;width:33.33%;display:inline-block;vertical-align:top;position:relative}
#related-posts .related_img{width:100%;float:left;overflow:hidden;margin-bottom:10px}
#related-posts img{width:100%;height:100%}
#related-posts .related_title{font:bold 15.5px Roboto,sans-serif;line-height:1.4}
#related-posts .related_title a{color:#333}
#related-posts .related_title a:hover{color:#005791}
@media (max-width:1600px){#related-posts .related_img{height:}}
@media (max-width:1440px){#related-posts .related_img{height:}}
@media (max-width:1360px){#related-posts .related_img{height:}}
@media (max-width:1024px){#related-posts .related_img{height:}}
@media (max-width:960px){#related-posts .related_img{height:}}
@media (max-width:860px){#related-posts .related_img{height:}}
@media (max-width:768px){#related-posts .related_img{height:}}
@media (max-width:640px){#related-posts .related_img{height:}}
@media (max-width:414px){
#related-posts{margin:20px 0 0 0}
#related-posts h3{font:bold 15px Roboto,sans-serif;border-left:0;padding:20px 0 10px 0;border-bottom:2px solid #dddfe2;margin:0 0 20px 0}
#related-posts h3 span{border-bottom:2px solid #005791;padding:10px 0;border-top:0}
.box_category{margin:0}
#related-posts .item{width:100%;padding:0 0 7.5px;margin:0 0 7.5px 0}
#related-posts .related_img{height:95px;width:45%;padding-right:15px;margin:0}
#related-posts .related_title{float:none;width:auto;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:-webkit-box}
@media (max-width:375px){#related-posts .related_img{height:}}
@media (max-width:360px){#related-posts .related_img{height:}}
@media (max-width:320px){#related-posts .related_img{height:}}
</style>
</b:if>

Bạn thêm thuộc tính height trong #related-posts .related_img{height:} bằng kích thước hiển thị độ cao của ảnh theo các kích thước màn hình hiển thị.

2. Dạng bài viết liên quan đơn giản

Cách làm

+ Đặt đoạn script gọi dữ liệu bài viết trên thẻ đóng </body>

<b:if cond='data:view.isPost'>
<script src='https://cdn.rawgit.com/ns24h/js/master/relatedposts.js'/>
</b:if>

+ Đặt HTML trong <b:includable id='post' var='post'> ngay dưới tiêu đề bài viết hoặc post-footer ví dụ:

<b:if cond='data:view.isPost'>
<div class='related-post' id='related-post'>
    <script>
      var labelArray = [<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'>&quot;<data:label.name/>&quot;</b:if></b:loop>];
      var relatedPostConfig = {
        homePage: &quot;/&quot;, 
        numPosts: 3,
        containerId: &quot;related-post&quot;,
        callBack: function() {}
      };
    </script>
  </div>
</b:if>

Thay 3 bằng số bài viết muốn hiển thị

+ Viết css chèn trước </head>

<b:if cond='data:view.isPost'>
<style>
.related-post{padding:margin:15px 0}
.related-post ul{border-bottom: 1px solid #efefef;padding-bottom:15px}
.related-post li{line-height:1.6em;margin:0 20px;list-style-type:disc}
.related-post a{font:14px Roboto,sans-serif;color:#333;line-height:1.4em;}
.related-post a:hover,#related-title a:hover{color:#333}
</style>
</b:if>

3. Trường hợp sử dụng kết hợp cả hai dạng trong bài viết

Cách này thường được các báo mạng sử dụng vì sử dụng nhiều chuyên mục trong bài viết, nếu bài viết sử dụng nhiều nhãn với nhãn phân cấp chúng ta có thể kết hợp cả hai dạng, với dạng 1 chèn dưới chân bài viết còn dạng hai chèn dưới tiêu đề.

Cách làm giống như trên nhưng bạn thay lại đoạn HTML của dạng 1 thành như sau:

<b:if cond='data:view.isPost'>
  <div id='related-posts'>
    <h3><span>đọc thêm</span></h3>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast != &quot;true&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&quot;'/>
      </b:if>
    </b:loop>
    <script>
      var currentposturl=&quot;<data:post.url/>&quot;;
      var maxresults=9;
  printRelatedLabels_thumbs();
    </script>
  </div>
</b:if>

Chúc các bạn làm thành công và tạo được kiểu bài viết liên quan đẹp cho trang blog của mình