Sắp xếp bình luận mới nhất, cũ nhất cho blogspot giống facebook

Hello các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục bài viết thủ thuật blogsppot. Như các bạn đã biết tính năng bình luận trong blogspot là : những bình luận mới nhất trong một chủ đề bài viết mặc định nó sẽ nằm phía dưới những bình luận trước đó điều này làm cho việc các bình luận mới bị trôi xuống phía sau làm cho chúng ta rất khó theo dõi.

Sắp xếp bình luận mới nhất, cũ nhất cho blogspot dạng facebook

Trong bài viết ngày hôm nay longanit sẽ hướng dẫn cho các bạn cách chèn thêm tính năng sắp xếp bình luận từ mới nhất → cũ nhất để bạn có thể dễ dàng theo dõi những bình luận mới nhất là khi nào!
Tính năng này tương tự như Comment của Facebook thì nay đã có thể sử dụng trên Blogspot 1 cách dễ dàng. Hãy làm theo các bước bên dưới nhé

Bước 1: Xác định nơi muốn hiển thị sắp xếp comment

Thông thường ta sẽ chèn phía trên những bình luận hoặc trên Khung Comment của Blogger.
Code phần bình luận có cấu trúc như sau.

Chèn code vào đây nếu bạn muốn hiển thị trên khung bình luận
<p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
Chèn code vào đây nếu bạn muốn hiển thị trên nội dung bình luận
    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
Bước 2: Sau khi xác định vị trí chèn code bạn copy toàn bộ đoạn code bên dưới và dán vào nơi bạn muốn chèn nhé

<b:if cond='data:post.numComments &gt; 2'>
<style>
.coud-com{float:left;font-weight:700;margin-top:4px;font-size:14px}
.sort-comment{margin-top:13px;text-align:left}
.sort-comment .sort-sel{display:block;position:relative}
.sort-comment .sort-sel span{font-size:14px;font-weight:400;color:#888}
.sort-comment .sort-sel .sort-option{font-weight:500;cursor:pointer;padding:0;color:#4b4f56;border:0;font:500 14px Roboto,sans-serif;outline:0;margin:0 0 0 -2px}
.post-author.bottom {font-size: 18px;float: left;line-height: 0px;margin: 14px 0 0 7px;color: #5273b8}
</style>
<span class='post-author bottom'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><i class='fas fa-pen-square'/> Viết bình luận (<data:post.numComments/>)</a></span>
<div class='sort-comment' style='float:right'>
<div class='sort-sel'>
<span style='font-size:14px'>Xếp theo</span>
<select class='sort-option'>
<option selected='selected' value='newest'>Cũ nhất</option>
<option value='oldest'>Mới nhất</option>
</select>
</div>
</div><script type='text/javascript'>
//<![CDATA[
$.fn.reverseChildren = function() {
return this.each(function() {
var $this = $(this);
$this.children().each(function() {
$this.prepend(this);
});
});
};
$(".comments-content ol").reverseChildren();
$(".sort-option").on("change", function() {
$(".comments-content ol").reverseChildren();
})
//]]>
</script>
</b:if>

Bước 3: Lưu lại và kiểm tra

Bài viết có tham khảo từ bạn Huỳnh Phụng Blogger. Chúc các bạn thành công nhé.

Lưu ý: Tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot mình đã viết lại điều kiện. ↠ chỉ hoạt động khi bài viết của bạn có từ 3 bình luận trở lên. Vì khi chỉ có 1 hoặc 2 bình luận ta cũng không có gì để cần phải sắp xếp để để tránh ảnh hưởng tốc độ Website.