Tạo nút ẩn hiện nhận xét trên Blogger

Đối với các Blog trên Blogger có số lượng nhận xét rất nhiều thì nút ẩn/hiện nhận xét cũng thật hữu ích. Bởi vì nếu có quá nhiều nhận xét trong một bài viết thì cả bài viết cộng với phần nhận xét sẽ rất dài và gây bất tiện cho người đọc.

Nếu bạn muốn sử dụng thủ thuật này thì làm theo các bước sau đây:

1. Đăng nhập Blogger Dashboard vào Design >> Edit HTML. Kích chọn "Expand Widget Templates".

2. Dán đoạn code dưới đây vào trước thẻ </head>.

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Hiện nhận xét";
}
else {
ele.style.display = "block";
text.innerHTML = "Ẩn nhận xét";
}
}
</script>

3. Tìm đoạn code như bên dưới:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Thay toàn bộ đoạn code trên bằng đoạn code bên dưới:

<a href='javascript:toggle();' id='displayText'>Hiện/Ẩn nhận xét</a>
<div id='toggleText' style='display: none;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a>
<b:include data='comment' name='commentDeleteIcon'/> </span>
</dd>
</b:loop>
</dl>
</div>

Lưu Template.