Tạo Nút Thu Gọn Trả Lời Khi Đã Xoá Widgets.js Blogspot

Oleh Phạm Hoàng Nam

Pada tháng 1 02, 2019 tháng 1 16, 2019

Short Comment hay còn gọi là Nhận xét thu gọn, nhằm để rút gọn những dòng nhận xét có nhiều người trả lời. Giúp cho blogspot không bị rườm rà và khó chịu bởi những nhận xét có nhiều người trả lời.
Thì hôm nay mình sẽ chia sẻ cho các bạn cách để tạo nút thu gọn trả lời cho blogspot của các bạn nhé.

Trước tiên thì nói sơ về việc Widgets.js đã xoá, vì js này là js mặc định của blogspot, khi xoá nó, thì những tính năng thu gọn trả lời nhận xét sẽ không còn tác dụng nữa. Vì thế hôm nay mình sẽ hướng dẫn cách khắc phục điều đó.
Để làm được như thế thì hãy theo dõi và đọc thật kỹ bài này.

Các bước thực hiện

Truy cập vào Blogger chọn Chủ đề sau đó chọn vào Chỉnh sửa HTML.
Bước tiếp theo là dán đoạn css dưới đây lên trên thẻ đóng ]]></b:skin>

#comments .thread-toggle {
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}
#comments .thread-expanded .thread-arrow {
    background: url(//i.imgur.com/4UPeQRN.png) no-repeat scroll 0 0 transparent;
}
#comments .thread-collapsed .thread-arrow {
    background: url(//i.imgur.com/FT9ZlYz.png) no-repeat scroll 0 0 transparent;
}





#comments .thread-toggle .thread-arrow {
    margin: .2em 0.3em;
    display: inline-block;
    height: 6px;
    width: 7px;
    overflow: visible;
    padding-right: 4px;
}
#comments .thread-chrome.thread-collapsed{
display: none;
}

Rồi sau đó dán đoạn js dưới đây xuống dưới thẻ đóng </body>

<script type='text/javascript'>
// code by Sĩ Ben IT - Blogger www.sibenit.net
//<![CDATA[
$(document).ready(function() {
$(".thread-count a").attr('href','javascript:void(0);');
$(".thread-count a").html('XEM TRẢ LỜI');
$(".thread-toggle").addClass('thread-collapsed');
$(".thread-toggle").removeClass('thread-expanded');
$(".thread-chrome").toggleClass('thread-collapsed');
})
$('span.thread-toggle').click(function(e){
$(this).toggleClass('thread-expanded');
$(this).toggleClass('thread-collapsed');
$(this).parent().find('.thread-chrome').toggleClass('thread-expanded');
$(this).parent().find('.thread-chrome').toggleClass('thread-collapsed');
})
//]]>
</script>