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
Cách làm
+ Đặt đoạn script gọi dữ liệu bài viết trên thẻ </head>
+ Viết css chèn trước </head>
Cách làm
+ Đặt đoạn script gọi dữ liệu bài viết trên thẻ đóng </body>
+ Viết css chèn trước </head>
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:
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
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'>+ Đặt HTML trong <b:includable id='post' var='post'> ngay dưới post-footer ví dụ:
<script src='https://cdn.rawgit.com/ns24h/js/master/relatedpoststhumb.js'/>
</b:if>
<b:if cond='data:view.isPost'>Thay 9 bằng số bài viết muốn hiển thị
<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 == "true"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs"'/>
</b:if>
</b:loop>
<script>
var currentposturl="<data:post.url/>";
var maxresults=9;
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
+ Viết css chèn trước </head>
<b:if cond='data:view.isPost'>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ị.
<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>
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'>+ Đặt HTML trong <b:includable id='post' var='post'> ngay dưới tiêu đề bài viết hoặc post-footer ví dụ:
<script src='https://cdn.rawgit.com/ns24h/js/master/relatedposts.js'/>
</b:if>
<b:if cond='data:view.isPost'>Thay 3 bằng số bài viết muốn hiển thị
<div class='related-post' id='related-post'>
<script>
var labelArray = [<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'>"<data:label.name/>"</b:if></b:loop>];
var relatedPostConfig = {
homePage: "/",
numPosts: 3,
containerId: "related-post",
callBack: function() {}
};
</script>
</div>
</b:if>
+ 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 != "true"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs"'/>
</b:if>
</b:loop>
<script>
var currentposturl="<data:post.url/>";
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
1 Comments
👉 Mẹo chèn ảnh vào khung nhận xét với đoạn code đơn giản như sau: [img]Url-ảnh-cần-chèn[/img]
👉 Nếu có ý kiến thắc mắc hay cần chia sẽ để làm cho bài viết hoàn chỉnh hơn, các bạn đừng ngại để lại góp ý bên dưới nhé 💙🌟🤩👍