Hướng dẫn anh em hiển thị bình luận mới nhất của Blogger lên đầu

Xem thêm

Mặc định blogger luôn ưu tiên hiển những thị bình luận cũ lên đầu phần Comment. Điều này gây ra rất nhiều phiền hà cho không ít anh em.

Bởi vì mỗi lần chúng ta muốn xem 1 bình luận mới thì lại phải kéo tút xuống phía dưới thì mới theo dõi được.

Nội dung bài viết

1. 1.Hướng dẫn đưa bình luận mới nhất lên đầu
2.    Cách 1.Sử dụng thuộc tính của Css
3.    Cách 2.Sử dụng Jquery/ Javascript để điều hướng bình luận
4.      Sử dụng Jquery
5.      Sử dụng Javascript
6. 2.Tổng kết

Với bài viết ít bình luận thì không nói, nhưng với những bài có số lượt bình luận cao thì việc kéo xuống thôi cũng đủ mệt rồi.

Mà blogger lại không cung cấp sẵn tính năng để ta có thể tùy ý sắp xếp bình luận theo ý muốn. Do đó, đây là một trong những thứ gây ức chế cho cả người viết bài và đọc giả xem bài viết. 

Nếu đây cũng là những gì anh em đang gặp phải thì đừng bỏ lỡ chủ đề này. Trong bài viết hôm nay, mình sẽ hướng dẫn cho anh em 2 cách để khắc phục vấn đề trên. Ok! Let's go.

Hướng dẫn đưa bình luận mới lên đầu trong Blogger

Để có thể sắp xếp lại bình luận cũng khá đơn giản ta chỉ việc lợi dụng cách thức đảo ngược là đươc thôi. Còn làm thế nào để đảo ngược được bình luận anh em cứ theo dõi tiếp bài viết để biết cách nhé!

Thực ra, ban đầu mình cũng khá đau não cho vấn đề này, nên phải liên tục bổ sung vitamin bồi bổ trí óc để lao vào mày mò tìm giải pháp từ việc mò code, cho đến tham khảo các chủ đề thảo luận của những người đi trước. 

Nhưng không may, cả mấy ngày trời mất ăn mất ngủ mình vẫn không tìm thấy giải pháp phù hợp :((

Lúc đó, mình nghĩ từ bỏ thôi làm gì có cách để đưa bình luận lên đầu mà kiếm. Và mình từ bỏ thật :)) mình tìm sang chủ đề khác là khắc phục tình trạng sử dụng hình ảnh theo định dạng mới mà công cụ Speed test của Google gợi ý (mình sẽ có bài viết riêng nói về chủ đề này).

Rất may sau đó, trong lúc tìm hiểu cách chuyển định dạng ảnh sang webp mình lại phát hiện ra có những website sử dụng mã nguồn của blogger nhưng vẫn có thể sắp xếp bình luận mới lên trên cùng. Như vậy là vẫn có cách...

Ngon, vậy là mình bắt đầu thử với các từ khóa tìm kiếm khác như: "How to get newest comment to the top for blogspot" thì may mắn cũng đã mỉm cười với mình. 

Cuối cùng cũng đã tìm ra được cách giải quyết. Và giờ mình sẽ chia sẻ nó cho anh em, mình sẽ đi lần lượt từng cách 1 từ dễ trước sau đó phức tạp sau nhá :))

Cách 1: Sử dụng thuộc tính CSS

Với những anh em thường xuyên chỉnh sửa giao diện web, nếu để ý 1 tý thì sẽ nhận ra các bình luận của blogger thường được đặt trong thẻ .comment-thread ol

Vì thế để có thể thay đổi vị trí của các bình luận, cụ thể là đảo chiều bình luận cũ xuống cuối còn bình luận mới lên đầu thì ta chỉ cần lợi dụng thuộc tính sắp xếp của display: flex là được.

Anh em làm theo mình nhé! Bây giờ, tại giao diện quản trị của blogger anh em đi đến phần "Chỉnh sửa HTML" và search đoạn code sau:

#comments .comment-thread ol

Bổ sung thêm thuộc tính CSS như sau cho nó:

#comments .comment-thread ol {
    display: flex;
    flex-direction: column-reverse;
}

Nếu không tìm thấy thì anh em có thể copy đoạn code trên và paste nó bên trên thẻ đóng ]]></b:skin> sau đó lưu nó lại và kiểm tra kết quả.

Với những anh em không thích cách trên của mình thì có thể chọn cách làm thứ 2, ưu điểm của cách làm này là chúng ta có thể tùy ý lựa chọn chế độ xem bình luận theo khung thời gian mình muốn, mới nhất hoặc cũ nhất.

Cách 2: Sử dụng thuộc tính JS hoặc Jquery

Ở phần này, chúng ta sẽ lật ngược lại các child của thẻ .comments-content ol. Ok! Giờ tới bước thực hiện.

Bước 1: Bạn tìm tới đoạn code sau

<div class='comments-content'>

Sau khi tìm thấy, anh em tiếp tục chèn thêm đoạn code markup theo mẫu dưới này:

<div class='comments-content'>
    <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threadedCommentJs' />
    </b:if>

    <!-- HTML Markup go here -->
    <div class='sort-comment'>
        <span class='sort-title'>Sort by</span>
        <div class='sort-sel'>
           <select class='sort-option'>
              <option selected='selected' value='newest'>Newest</option>
              <option value='oldest'>Oldest</option>
           </select>
        </div>
    </div>
    <!-- End HTML Markup -->

    <div id='comment-holder'>
        <data:post.commentHtml/>
    </div>
</div>

Lưu ý: Anh em chỉ cần chèn phần code được mình đánh dấu

Bước 2: Thêm tiếp đoạn code Css sau ngay dưới vị trí kết thúc thẻ <div class='comments-content'>

<style>
.sort-comment {
  text-align:right;
}
.sort-comment .sort-title {
  font-size:14px;
  display:inline-block;
  margin-right:3px;
}
.sort-comment .sort-sel {
  display:inline-block;
  position:relative;
}
.sort-comment .sort-sel::after,
.sort-comment .sort-sel::before {
  position:absolute;
  content:"";
  right:7px;
  border-style:solid;
  border-width:4px;
  width:0;
  height:0;
}
.sort-comment .sort-sel::after {
  top:2px;
  border-color:transparent transparent #333;
}
.sort-comment .sort-sel::before {
  bottom:2px;
  border-color:#333 transparent transparent;
}
.sort-comment .sort-sel .sort-option {
  cursor:pointer;
  background:#fff;
  border:1px solid #aaa;
  padding:2px 20px 2px 7px;
  color:#656565;
  font-size:14px;
  overflow:hidden;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -moz-appearance:window;
  -webkit-appearance:none;
  outline:0;
}
</style>

Bước 3: Giờ anh em chọn tiếp 1 trong 2 đoạn code sau và thêm nó bên dưới đoạn code Css bên trên.

Sử dụng Jquery: 

Nhớ thêm thư viện Jquery nếu bạn chưa có, giờ bạn copy và dán đoạn code bên dưới thẻ đóng /style bên trên.

<script>//<![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>

Sử dụng Javacript: 

Nếu anh em không thích dùng Jquery thì có thể sử dụng đoạn code sau:

<script>//<![CDATA[
HTMLElement.prototype.reverseChildren = function() {
    for (var c = this.children, d = 0; d < c.length; d++) this.insertBefore(c[d], this.firstChild)
}
var _cmt = document.querySelector(".comments-content ol");
_cmt.reverseChildren();
document.getElementsByClassName("sort-option")[0].addEventListener("change", function() {
    _cmt.reverseChildren();
})
//]]></script>

Bước 4: Cuối cùng chúng ta lưu mẫu lại và kiểm tra thành quả.

Tổng kết

Cách làm đơn giản chỉ vài bươc như vậy thôi, tuy nhiên nó thật sự tốt đối với trải nghiệm của khách hàng. Ai mà chẳng muốn đọc được bình luận mới nhất hay vì bình luận cũ từ vài năm trước :))

Hi vọng thủ thuật nhỏ này có thể giúp ích cho anh em. Còn giờ thì bái bai hẹn gặp lại anh em trong bài viết kế tiếp (｀ 3′)

Ngoài ra, anh em cũng nên đọc lại bài viết những tính năng cơ bản trong blogger để biết thêm về cách quản lý các bình luận trên blogspot.