1 Tạo nút ẩn hiện nhận xét trên Blogger 18/01/12, 09:52 pm
[KiNg]_[PiN]-BB
Đố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=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=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=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=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=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=comment.url' title='comment permalink'> <data:comment.timestamp/> </a>
<b:include data='comment' name='commentDeleteIcon'/> </span>
</dd>
</b:loop>
</dl>
</div>
Lưu Template.
ẩ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=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=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=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=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=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=comment.url' title='comment permalink'> <data:comment.timestamp/> </a>
<b:include data='comment' name='commentDeleteIcon'/> </span>
</dd>
</b:loop>
</dl>
</div>
Lưu Template.