[Blogspot] Ẩn, hiện bình luận bằng button trong bài viết

Chắc hẳn đã có lúc bạn gặp tình trạng ngồi ngắm 1 mớ bình luận dài lê thê ở 1 bài viết bất kì nào trong blog của mình rồi đúng không? Nó khiến cho tốc độ tải trang cũng chậm đi đáng kể vì phải load quá nhiều bình luận kèm hình ảnh 1 lúc mà.
Để giải quyết vấn đề đó thì hôm nay mình sẽ hướng dẫn đến các bạn cách tạo button ẩn, hiện bình luận trong bài viết của blogspot nhé.

Ẩn, hiện bình luận bằng button trong bài viết trong blogspot

LIVE DEMO

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Ấn Ctrl+F và tìm <div class='comments' id='comments'>. Sau đó thay dòng đó bằng đoạn code mới sau:

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Hiện bình luận</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Ẩn bình luận</a>
<div class='clear'/>

--- Sẽ có thể có 2 dòng code kia nên bạn thay lần lượt từng dòng một được thì mới dừng nha.
Bước 3: Thêm đoạn CSS sau trước thẻ ]]></b:skin>

.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

Bước 4: Dán đoạn code sau trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

Bước 5: Lưu template lại và ra kiểm tra kết quả nhé.
Kết luận: Vậy là từ giờ vấn đề số lượng bình luận quá nhiều trong 1 bài viết đã được giải quyết. Tuy nhiên, theo mình thấy thì thủ thuật này có 1 nhược điểm là khi click chọn xem 1 bình luận nào đó ở widget bình luận mới nhất thì nó sẽ không dẫn thẳng đến bình luận đó đâu nên bạn phải cân nhắc. Được nọ sẽ mất kia, nếu bạn thông thạo code hãy thử sửa lỗi đó xem sao.
Chúc các bạn thành công :)
Source code: sisourav.com

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!