Cách sắp xếp comments Blogger trước sau như Youtube

Cách làm chi tết sắp xếp comments blogger.

1. Chèn code HTML

<div class="comments-content">
    <b:if cond="data:post.embedCommentForm">
        <b:include data="post" name="threadedCommentJs">
    </b:include></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="">
    </data:post></div>
</div>

2. Chèn CSS

<style type="text/css">/*<![CDATA[*/
.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>

3. Chèn Javasccript

Chèn Javascript thì trước thẻ đóng </body> nếu bạn đang dùng mẫu thiết kế theo phiên bản cũ nhé, còn nếu dùng phiên bản mới của veospot.net thì có phần javascript riêng nhé.

<script type="text/javascript">
//<![CDATA[
// by VeoSpot.net
HTMLElement.prototype.reverseChildren = function () {
  for (var c = this.children, d = 0; d < c.length; d++) {
    this.insertBefore(c[d], this.firstChild);
  }
};

window.addEventListener("DOMContentLoaded", function () {
  var _cmt = document.querySelector(".comments-content ol");
  if (_cmt) {
    _cmt.reverseChildren(); // Khi load

    var sortDropdown = document.querySelector(".sort-option");
    if (sortDropdown) {
      sortDropdown.addEventListener("change", function () {
        _cmt.reverseChildren(); // Khi thay đổi lựa chọn sắp xếp
      });
    }
  }
});
//]]>
</script>