Tạo phần Comments Block riêng cho một trang riêng biệt

Trong phần nhận xét trên blogspot, khu vực comments-block chứa các thành phần chính của các nhận xét như avatar, comment-author, comment-body, comment-timestamp. Đoạn code hiển thị các thành phần này nằm giữa 2 thẻ b:loop như sau:

1. <div id='comments-block'>
2. <b:loop values='data:post.comments' var='comment'>
3. ......
4. ......
5. ......
6. ......
7. </b:loop>
8. </div>

Dựa vào cấu trúc này, chúng ta có thể tạo kiểu comments-block riêng cho một bài viết nào đó.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm dòng code <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code như sau:

1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
2. <b:loop values='data:post.comments' var='comment'>
3. … Đoạn code xác định các thành phần nhận xét riêng biệt ở đây …
4. </b:loop>
5. <b:else/>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> nói trên rồi đặt sau nó bằng thẻ đóng </b:if>.

Trong đoạn code thêm vào, bạn cần thiết kế kiểu comments-block riêng để tạo sự khác biệt với phần comments-block ở các trang khác (nhớ thay URL cho trang riêng biệt để áp dụng thủ thuật).

Tựu trung lại, toàn bộ đoạn code sau khi thêm sẽ như thế này:

1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
2. <b:loop values='data:post.comments' var='comment'>
3. … Đoạn code xác định các thành phần nhận xét riêng biệt ở đây …
4. </b:loop>
5. <b:else/>
6. <b:loop values='data:post.comments' var='comment'>
7. … Đoạn code xác định các thành phần nhận xét chung cho các trang khác ở đây …
8. </b:loop>
9. </b:if>

Bước 2. Đặt CSS theo định dạng như sau vào trước thẻ </head>.

1. <b:if cond='data:blog.pageType == "item"'>
2. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
3. <style>
4. … đặt code CSS của phần Comments cho trang riêng biệt tại đây …
5. </style>
6. <b:else/>
7. <style>
8. … đặt code CSS chung của phần Comments cho tất cả các trang còn lại tại đây …
9. </style>
10. </b:if>
11. </b:if>

Lưu Template. Thủ thuật cho bạn thêm một tình huống sử dụng lệnh điều kiện để tạo nét độc đáo cho blogspot. DEMO cho thủ thuật này chính là phần nhận xét dưới đây. Nếu chú ý kỹ bạn sẽ thấy sự khác biệt so với các bài viết khác.

Tạo màu nền xen kẽ cho nhận xét

Chúng ta vừa mới biết cách tạo màu nền xen kẽ cho bài viết ở kiểu trang index (trang chủ, trang nhãn), từ đó chúng ta có thể vận dụng để tạo màu nền xen kẽ cho nhận xét theo như trang demo dưới đây.

DEMO

Việc áp dụng thủ thuật này có liên quan đến thủ thuật tạo số đếm nhận xét vì thế kết hợp hai thủ thuật lại với nhau để đơn giản hóa code, theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates. Đặt kịch bản gán lớp nhận xét chẳn và lẻ vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterComments(strx) {
var therest;
therest = CommentsCounter % 2;
if (therest == 0) {
document.getElementById(strx).className='evenComments';
} else {
document.getElementById(strx).className='oddComments';
}
}
//]]>
</script>

Bước 2. Tìm dòng <b:loop values='data:post.comments' var='comment'>

Và thay nó bằng đoạn code bên dưới:

<!-- đếm nhận xét từ Zero -->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- gắn ID cho từng nhận xét -->
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/> (dòng này hiển thị chữ says/said/nói, tùy theo Template bạn có thể đặt đoạn code bên dưới theo ý muốn) rồi chèn bên dưới nó bằng đoạn code sau:

<span class='comment-counter'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code bên dưới:

<!-- thiết lập lớp cho nhận xét -->
<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>

</div>

Bước 3. Đặt code CSS vào trước dòng ]]></b:skin>.

1. /* số đếm nhận xét */
2. .comment-counter {
3. float: right;
4. display: block;
5. width: 40px;
6. margin-top: -30px;
7. text-align: right;
8. font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
9. font-size: 28px;
10. font-weight: normal;
11. }
12. .comment-counter a:link, .comment-counter a:visited {color: #445566 !important;}
13. .comment-counter a:hover, .comment-counter a:active {color: #FF9933 !important;}
14. /* thuộc tính phân biệt nhận xét chẳn và lẻ */
15. .evenComments { /* nhận xét chẳn */
16. margin: 10px 0px;
17. padding: 5px 20px 0px;
18. background-color: #F0F0F9;
19. border:1px solid #DDD;
20. }
21. .oddComments { /* nhận xét lẻ  */
22. margin: 10px 0px;
23. padding: 5px 20px 0px;
24. background-color: #F0F8FF;
25. border:1px solid #DDD;
26. }

Về style cho CSS bạn có thể tự tùy biến và vận dụng linh hoạt cho blogspot của mình. Lưu Template là hoàn thành.

Thủ thuật yêu cầu: Ẩn nhận xét của Nặc danh

Hẳn bạn cũng biết người nhận xét với tư cách ẩn danh hoặc có tên là Nặc danh/Anonymous ít nhiều có tác hại đối với blogspot của bạn. Người nhận xét dạng này thường dễ dàng dùng ngôn từ xấu gây phản cảm cho mọi người hoặc cố tình phá hoại đến blogspot của bạn trong khi bạn không phải lúc nào cũng online để ngăn chặn những điều ngoài ý muốn xảy đến với ngôi nhà online của bạn.

Thế thì việc không cho hiện nhận xét của Nặc danh trên blogspot của bạn một cách tự động sẽ giúp bạn giải quyết vấn đề nói trên. Mình viết thủ thuật này theo yêu cầu của bạn Yolks tại trang Vngreenzone.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đến dòng <b:loop values='data:post.comments' var='comment'>

và đặt sau nó bằng đoạn code bên dưới.

<!-- Anti-Anonymous START -->
<b:if cond='data:comment.author != &quot;Nặc danh&quot;'>
<!-- Anti-Anonymous START -->

Tiếp tục kéo xuống dưới một đoạn để tìm đến thẻ đóng </b:loop> cho thẻ <b:loop> ở trên và đặt trước nó bằng đoạn code bên dưới.

<!-- Anti-Anonymous CLOSE -->
</b:if>
<!-- Anti-Anonymous CLOSE -->

Lưu Template là OK. Lưu ý nếu blogspot của bạn có ngôn ngữ tiếng Anh thì thay từ Nặc danh bằng từ Anonymous. Ý nghĩa của đoạn code này là nếu người nhận xét với tư cách Nặc danh hoặc có tên Nặc danh (nếu đăng nhập tài khoản Google có tên Nặc danh) thì sẽ không có chức năng hiển thị các thành phần của nhận xét như Avatar, tên, URL, nội dung nhận xét …

Ngoài ra nếu bạn muốn thay thế phần nhận xét của Nặc danh bằng một đoạn text thông báo riêng của Quản trị viên thì bạn hãy thay đoạn code:

<!-- Anti-Anonymous START -->
<b:if cond='data:comment.author != &quot;Nặc danh&quot;'>
<!-- Anti-Anonymous START -->

bằng đoạn code bên dưới:

<!-- Anti-Anonymous START -->
<b:if cond='data:comment.author == &quot;Nặc danh&quot;'>
<div class='anoncm-wrapper' expr:id='data:comment.id'><p style='float:left;padding:10px;margin:0;width:400px;color:green;text-align:justify'>Ban Quản trị thông báo: Người bình luận có tên <strong>Nặc danh/Anonymous</strong> không được phép chém gió tại đây.</p>
</div>
<div style='clear:both'/>
<b:else/>
<!-- Anti-Anonymous START -->

Tuy thủ thuật thật đơn giản song kết quả nó mang lại không hề nhỏ.

Gắn tem admin và visitor cho người nhận xét

Gắn tem ADMIN cho người nhận xét là một đề tài không mới song cũng chưa cũ, không mới bởi vì nó đã từng được giới thiệu nhưng chưa cũ bởi vì nó còn cái mới. Qua bài viết này mình sẽ hướng dẫn chi tiết các trường hợp gắn tem cho người nhận xét, gồm AMIN, AUTHOR và VISITOR.

Trong Template ở chế độ mở rộng mẫu tiện ích, có một đoạn code liên quan đến tên người nhận xét như sau:

<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>

Tem cho từng trường hợp người nhận xét sẽ được gắn vào trước hoặc sau dòng <data:comment.author/>. Để gắn tem thì phải dùng lệnh điều kiện và gắn class cho từng trường hợp AMIN, AUTHOR, VISITOR. Ở đây chia làm 2 trường hợp chung là blog không có cộng tác viên (AUTHOR) và blog có cộng tác viên.



Trường hợp 1. Đối với blogspot không có cộng tác viên, thay đoạn code ở trên bằng đoạn code sau đây:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.adminClass == data:post.adminClass'>

<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Hoặc có thể sử dụng code như thế này:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.adminClass != data:post.adminClass'>

<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Trường hợp 2. Đối với blogspot có cộng tác viên, thay đoạn code ở trên bằng đoạn code sau:

<b:if cond='data:comment.authorUrl'>

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

<b:if cond='data:comment.authorUrl == &quot;URL_ProfileID_Amin&quot;'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a> <span class='adminstamp'>ADMIN</span>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='author'><data:comment.author/></span></a> <span class='authorstamp'>AUTHOR</span>
</b:if>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='visitor'><data:comment.author/></span></a>
</b:if>
<b:else/>
<data:comment.author/>
</b:if>

Ở đoạn code trên bạn cần thay URL_ProfileID_Admin là đường dẫn đến trang hồ sơ của bạn. Ví dụ ProfileID của mình là: http://www.blogger.com/profile/00819429141342166010.

Đến đây, cần thiết lập CSS cho các tem như sau:

span.admin {
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.author{
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.visitor{
color:#XXXXXX;
background-color:#YYYYYY;
border:1px solid #ZZZZZZ
}
span.admin, span.author, span.visitor{
text-align:center;
text-transform:uppercase;
font-size:11px;
padding:2px 5px 2px 5px;
text-decoration:none;
font-family: Arial,Tahoma,sans-serif;
font-weight:bold;
}
.adminstamp {
font-size:10px;font-family:Georgia;padding:0 2px 0 2px;color:#fff;margin-right:2px
}
.authorstamp {
font-size:10px;font-family:Georgia;padding:0 2px 0 2px;color:#fff;margin-right:2px
}

Bạn hãy sử dụng công cụ mã màu để tùy biến màu sắc cho từng trường hợp cụ thể, như bạn có thể thấy tem đã được gắn ở hệ thống Comment của Thủ thuật Blogger vậy.

Tạo số đếm khi trang bài viết có hơn 200 nhận xét

Tạo số đếm nhận xét từ lâu đã trở thành một thủ thuật khá phổ biến đối với blogspot. Thủ thuật đơn giản này chỉ có tác dụng đối với bài viết có số nhận xét không quá 200. Tức là do mặc định của Blogspot, khi số nhận xét quá 200 thì sẽ tự động phân trang (mỗi trang gồm 200 nhận xét), script đếm nhận xét cơ bản chỉ dành cho trang đầu tiên, sang trang thứ 2 (nhận xét số 201 đến số 400) sẽ bắt đầu đếm lại từ số 1, tương tự đến trang thứ 3, 4, 5… cũng lặp lại như vậy.

Thật may là có nhiều cách khắc phục vấn đề này. Mình sẽ giới thiệu một vài cách để bạn có thể tham khảo:

Trước tiên mình giới thiệu lại 2 script cũ đã áp dụng cho thủ thuật tạo số đếm nhận xét:

(1)

<script type='text/javascript'>var CommentsCounter=0;</script>

Script này đặt trước dòng <b:loop values='data:post.comments' var='comment'> trong Template ở chế độ chỉnh sửa mở rộng mẫu tiện ích.

(2)

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Đoạn code trên đặt tại vị trí cần hiển thị số đếm, có thể đặt sau dòng <data:commentPostedByMsg/>.

Sau đây là một số phương pháp tính số đếm nhận xét cho bài viết có số nhận xét trên 200.

1. Phương pháp từ trang Blogtruyen.com:

Thay script (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var cmPage = (location.href.match("commentPage=")) ? location.href.split("commentPage=")[1].split("#")[0] : 1;
var cm_show_num = (cmPage - 1)*200;
function showcomnumber(){ cm_show_num++; document.write(cm_show_num); }
//]]>
</script>

Thay đoạn code (2) bằng đoạn code bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>showcomnumber()</script>
</a>
</span>

2. Phương pháp của Fandung.com:

Đặt đoạn code sau vào trước thẻ </head>:

<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
//]]>
</script>

Thay script (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var urlcm = location.href;
var pagecm = urlcm.GetValue("commentPage");
if (pagecm==undefined) { pagecm = 1; }
var CommentsCounter =(pagecm - 1)*200; ;
//]]>
</script>

3. Phương pháp của các blogspot tiếng Anh trên thế giới:

Thay script (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var regexpatt = new RegExp('commentPage=([0-9]*)');
var results = regexpatt.exec( window.location.href );
if(results == null)
{
var CommentsCounter = 0;
}
else
{
var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>

4. Phương pháp của Thủ thuật Blogger:

Phương pháp 1: Thay script (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
urlPagi = unescape(location.href);
isPage = urlPagi.indexOf('?commentPage');
if(isPage > -1) {
searchP = isPage + 13;
numPag = urlPagi.substr(searchP);
} else {
CommentsCounter = 0;
}
//]]>
</script>

Phương pháp 2: Thay script (1) bằng đoạn code bên dưới:

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>
<script type='text/javascript'>var CommentsCounter=200;</script>
<b:else/>

<script type='text/javascript'>var CommentsCounter=0;</script>

</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=2&quot;'>
<script type='text/javascript'>var CommentsCounter=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=3&quot;'>
<script type='text/javascript'>var CommentsCounter=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=4&quot;'>
<script type='text/javascript'>var CommentsCounter=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=5&quot;'>
<script type='text/javascript'>var CommentsCounter=1000;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=6&quot;'>
<script type='text/javascript'>var CommentsCounter=1200;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=7&quot;'>
<script type='text/javascript'>var CommentsCounter=1400;</script>
</b:if>

Ở phương pháp 2 trên đây, mình dùng lệnh điều kiện trong cấu trúc XML của Template với ý nghĩa là: nếu trang nhận xét vượt 200 bắt đầu phân trang (commentPage=1) thì sẽ đếm số nhận xét từ số 200, không thì sẽ đếm số nhận xét từ số 0 (khi số nhận xét dưới 200), nếu trang nhận xét phân trang thứ 2 (commentPage=2) tức khi số nhận xét vượt 400 thì bắt đầu đếm số nhận xét từ số 400… cứ như thế có thể gán cho các trường hợp tiếp theo khi số nhận xét vượt các ngưỡng 600 – 800 – 1000 – 1200 – 1400…

Bạn có thể tùy ý áp dụng cách nào nêu trên cũng được vì đều cho kết quả như nhau. Riêng mình thì thích áp dụng cách cuối cùng vì nó liên quan đến cấu trúc XML, cho mình thêm một vấn đề để nghiên cứu và chia sẻ về XML trong Template của Blogspot.

Tạo khung nội quy nhận xét đóng tự động

Như các bạn có thể thấy ở phần nhận xét theo các bài viết trên Thủ thuật Blogger có khung nội quy nhận xét khá lạ so với các blogspot khác, nếu để ý, sau 2 phút bạn sẽ thấy khung nội quy nhận xét này tự động đóng và biến mất. Với tính năng này, blogspot của bạn sẽ trở nên lạ hơn, gây trí tò mò hơn đối với người đọc. Lấy giả thuyết tính trung bình để đọc một bài viết trên blogspot của bạn phải mất 1,5 phút thì bạn có thể cài đặt sau 2 phút thì khung nội quy nhận xét sẽ biến mất, tức là người đọc có 30 giây để lướt qua nội quy nhận xét nếu có ý định để lại nhận xét. Và điều thật bất ngờ là sau khi nhận xét được xuất bản thì khung nội quy nhận xét bổng dưng biến mất mà không có sự tác động nào.

Xin bật mí một chút, ý tưởng tạo khung nội quy nhận xét này có định dạng CSS từ trang đăng nhập Blogger, mình chỉ linh hoạt áp dụng và tạo thêm hiệu ứng đóng tự động cho nó.

Để cài đặt khung nội quy nhận xét như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS để lưu cài đặt.

Bước 2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTLM), chọn Expand Widget Templates (Mở rộng mẫu tiện ích).

Tìm đến đoạn code:

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Rồi đặt trước nó bằng đoạn code bên dưới.

<style>
#comrule {padding:5px 0;width:550px}
.comrule-container{padding:5px;background:#fff;border:1px solid darkgray}
.comrule-header{padding:5px 10px;background:#a2bf89;white-space:nowrap;color:#fff}
.comrule-body{width:580px;padding:5px 10px;background:#cddebe}
.comrule-body a{color:#036300}
.comrule-close{float:right;margin-right:-5px}
.comrule-text{text-align:justify;font-size:14px;line-height:19px;font-weight:normal;text-case:sentence;color:#069}
</style>
<script type='text/javascript'>
function closediv() {
document.getElementById(&quot;comrule&quot;).style.display=&quot;none&quot;;
}
setTimeout(closediv, 120000);
</script>

<div id='comrule'>
<div class='comrule-container'>
<table cellpadding='0' cellspacing='0'><tr><td class='comrule-header'><b>Nội quy!</b></td>
<td class='comrule-body'><a class='comrule-close' href='#' onclick='closediv()'><img alt='Đóng lại' src='http://www.blogger.com/img/close.png'/></a>
<span class='comrule-text'><data:blogCommentMessage/></span></td></tr></table>
</div>
</div>

Trong đoạn code trên bạn có thể thấy dòng <data:blogCommentMessage/> chính là phần nội quy nhận xét. Số 120000 tượng trưng cho 2 phút (1 phút = 60000 mili giây) đóng tự động khung nội quy nhận xét, bạn có thể đổi con số theo ý thích. Ngoài ra có thể tùy biến CSS cho phù hợp với tông màu trên blogspot của bạn.

Xong rồi bạn hãy lưu Template là được.

Ẩn nhận xét cho một trang nhất định

Đôi khi việc ẩn nhận xét cho một hoặc một số trang nhất định cũng là cần thiết cho blogspot, ví dụ khi bạn muốn tạo một trang chuyên biệt (không cần đến phần nhận xét, trong trường hợp dùng hết 10 trang tĩnh) hoặc việc ẩn nhận xét trên tất cả các trang tĩnh cũng là một nhu cầu cho blogspot.

Thông thường để thực hiện điều này, trước đây có blogger thường thực hiện như sau. Để ẩn nhận xét cho một bài viết nào đó, thì đặt code như sau vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == "URL_bài viết"'>
<style type="text/css">
#comments {display:none}
</style>
</b:if>

Nếu muốn ẩn phần nhận xét cho nhiều bài khác nhau thì dùng code như bên dưới :

<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:if cond='data:blog.url == "URL_bài viết 3"'>
<style type='text/css'>
#comments {display:none}
</style>
</b:if>
</b:if>
</b:if>

Tuy nhiên điểm yếu của cách trên là dùng CSS để ẩn comments song các cấu trúc liên quan đến comments vẫn được load, ở đây chỉ là ẩn đi mà thôi.

Có một cách khác không dùng CSS mà kết quả triệt để hơn, tức là làm mất đi chức năng comments cho một hay một số trang nhất định nào đó. Để thực hiện, bạn Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Chúng ta hãy cùng điểm qua một số trường hợp.

1. Nếu muốn có nhận xét ở các trang tĩnh thì thêm đoạn code bên dưới vào trước đoạn code nói trên (được đánh dấu màu đỏ).

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>

2. Nếu muốn không có nhận xét ở một trang tĩnh bất kỳ trong khi vẫn muốn có nhận xét ở các trang tĩnh khác thì đặt đoạn code sau vào trước đoạn code nói trên (được đánh dấu màu đỏ).

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url == "URL_trang tĩnh"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

3. Nếu muốn không có nhận xét ở một hay một số trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.url == "URL_bài viết 1"'>
<b:else/>
<b:if cond='data:blog.url == "URL_bài viết 2"'>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>

4. Trong trường hợp bạn không cần nhận xét cho tất cả các trang bài viết thì thay đoạn code nói trên (được đánh dấu màu đỏ) bằng đoạn code sau.

<b:if cond='data:blog.pageType !== &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Hy vọng chiêu nhỏ này sẽ có ích với một số blogspot.

Khắc phục lỗi lặp nội dung do đánh chỉ mục Comments

Được biết, lỗi lặp nội dung là nguyên nhân gây hạn chế về SEO cho blogspot. Nói riêng về phần comments của blogspot thì lỗi lặp nội dung gây ra do các đường dẫn đến tác giả nhận xét đều như nhau, xuất phát từ dòng data:comment.url trong Template. Để khắc phục lỗi lặp nội dung trong Comments của blogspot, chúng ta phải chỉ định URL đến từng comment một cách riêng biệt. Theo kinh nghiệm của Bloggerism, hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa data:comment.url (nhấn Ctrl + F trên bàn phím) tìm đến dòng code bên dưới.

<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>

Thay nó bằng đoạn code sau đây.

<b:if cond='data:post.commentPagingRequired'><a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'><data:comment.timestamp/> </a>
</b:if>

Lưu Template là OK.

Hy vọng sau một thời gian ngắn (khoảng 2 – 3 tuần) bạn sẽ thấy thủ thuật này mang lại những thay đổi và cải thiện đáng kể về SEO cho blogspot của bạn.

Ẩn nhận xét của người nhận xét không URL

Chúng ta đã biết đến thủ thuật Ẩn nội dung nhận xét của người nhận xét không URL, một tiền đề để đi đến một thủ thuật cao hơn, hoàn thiện hơn; đó là thủ thuật Ẩn nhận xét của người nhận xét không có URL và danh sách spam.

Sau khi áp dụng thủ thuật này, những nhận xét của người nhận xét gồm Nặc danh (Anonymous) và Tên (không có URL) sẽ bị ẩn đi, tức là ẩn toàn bộ avatar, tên và nội dung nhận xét; đối với những người nhận xét được bạn lọc vào danh sách spam (lấy URL của Profile) thì cũng bị ẩn đi toàn bộ.

Ý tưởng ẩn nhận xét của người nhận xét không có URL do mình nghĩ ra, còn ý tưởng ẩn nhận xét của danh sách spam do blog Duy Phạm đã thực hiện trước. Mình kết hợp 2 ý tưởng để phát triển một thủ thuật hoàn thiện và chia sẻ cho cộng đồng Blogger Việt thân yêu của chúng ta.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đến dòng <b:loop values='data:post.comments' var='comment'>

Và đặt sau nó bằng đoạn code bên dưới.

<b:if cond='data:comment.authorUrl'>
<!-- spam list START -->
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam1&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam2&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam3&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam4&quot;'>
<b:if cond='data:comment.authorUrl != &quot;URL-profile-spam5&quot;'>

<!-- spam list START -->

Ý nghĩa của đoạn code này là chỉ những tác giả nhận xét có URL, không dành cho những tác giả nhận xét có URL là … Theo đó bạn thay URL lần lượt cho các spammer có Profile ID hoặc URL là địa chỉ web trong danh sách spammer của bạn.

Tiếp tục kéo xuống dưới một đoạn để tìm đến thẻ đóng </b:loop> cho thẻ <b:loop> ở trên và đặt trước nó bằng đoạn code bên dưới.

<!-- spam list CLOSE -->
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>

<!-- spam list CLOSE -->
</b:if>

Lưu Template là OK. Như vậy theo cách này, bạn có thể thêm vào danh sách spam những URL bạn muốn, miễn cứ thêm một thẻ <b:if> sau thẻ <b:loop> thì phải có một thẻ đóng </b:if> tương ứng trước thẻ đóng </b:loop>.

Mục tiêu chính của thủ thuật này là giúp ẩn toàn bộ những gì liên quan đến nhận xét của tác giả nhận xét không có URL (gồm Nặc danh và Tên) để tăng cường độ tin cậy và trang trọng cho nhận xét của Blogger. Mình không hy vọng nhiều đến việc ngăn chặn spammer và mong rằng sẽ không có ai spam ở đây bởi vì một lẽ là mình luôn phát triển vì cộng đồng Blogger Việt chúng ta.

Một cách mới để ẩn nhận xét đã bị xóa

Chúng ta đã biết đến cách ẩn nhận xét đã bị xóa qua một thủ thuật khá phổ biến trong cộng đồng Blogger. Bài viết này sẽ giới thiệu một thủ thuật khác cũng khá đơn giản song hiệu quả thì tương tự như thủ thuật đó.

Thông thường sau khi đăng một nhận xét trên một blogspot nào đó, nếu bạn thấy không hài lòng về nội dung nhận xét đó thì bạn có thể xóa nó bằng cách đăng nhập Blogger rồi tìm đến nhận xét tại blogspot đó (sau khi nhấn F5 để hiện delete icon) rồi nhấn vào biểu tượng xóa nhận xét để xóa nó đi. Kết quả của hành động này là một câu thông báo Bài đăng này đã bị tác giả xóa. Như hình minh họa bên dưới.

Để ẩn đi các nhận xét bị tác giả nhận xét xóa thì bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa deleted-comment (nhấn tổ hợp phím Ctrl + F) để tìm đến đoạn code như bên dưới.

<b:includable id='comments' var='post'>
.......
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
.......
</b:includable>

Thay dòng <span class='deleted-comment'><data:comment.body/></span>

Bằng dòng

<script> document.getElementById(&quot;<data:comment.id/>&quot;).style.display=&quot;none&quot;; </script>

Lưu Template là OK.

Tùy biến nhận xét đã bị tác giả xóa

Thông thường sau khi đăng một nhận xét trên một blogspot nào đó, nếu bạn thấy không hài lòng về nội dung nhận xét đó thì bạn có thể xóa nó bằng cách đăng nhập Blogger rồi tìm đến nhận xét tại blogspot đó (sau khi nhấn F5 để hiện delete icon) rồi nhấn vào biểu tượng xóa nhận xét để xóa nó đi. Kết quả của hành động này là một câu thông báo Bài đăng này đã bị tác giả xóa. Như hình minh họa bên dưới.

Ngoài thủ thuật Ẩn nhận xét đã bị xóa, chúng ta có thể tùy biến nhận xét đã bị tác giả nhận xét xóa đi một cách đặc trưng theo ý mình. Và bạn có thể thấy rằng thủ thuật Tùy biến nhận xét đã bị xóa là một trong những thủ thuật “độc” tại http://www.bloggerism.tk/.

Trước khi thực hiện thủ thuật này, bạn có thể xem Demo bên dưới.

Để cài đặt thủ thuật này cho blogspot của bạn, hãy lưu ý blog của bạn chưa áp dụng thủ thuật Ẩn nhận xét đã bị tác giả xóa; hoặc nếu đã áp dụng rồi thì làm ngược lại để vô hiệu hóa thủ thuật đó.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa deleted-comment (nhấn tổ hợp phím Ctrl + F) để tìm đến đoạn code như bên dưới.

<b:includable id='comments' var='post'>
.......
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
.......
</b:includable>

Thay dòng <span class='deleted-comment'><data:comment.body/></span>

Bằng dòng

<span class='deleted-comment'>Nhận xét này đã bị <data:comment.author/> xóa.</span>

Bước 2. Đặt đoạn code CSS bên dưới vào trước dòng ]]></b:skin>.

.deleted-comment {
color: brown;
font-style: italic;
font-weight:bold;
text-decoration: line-through;
}

Lưu Template là OK. Hy vọng thủ thuật này sẽ làm cho phần Comments trên blogspot của bạn trở nên đặc trưng hơn.

Ẩn nội dung nhận xét của người nhận xét không URL

Chúng ta vừa mới biết để thủ thuật Ẩn nội dung nhận xét của Nặc danh. Tuy nhiên sau khi áp dụng thủ thuật này thì vẫn còn xuất hiện một điểm yếu đó là: Vì tùy chọn cài đặt nhận xét là Anyone - includes Anonymous Users (để người nhận xét với tư cách Tên/URL vẫn có thể đăng nhận xét), mà như vậy vẫn có trường hợp người nhận xét chỉ với tư cách Tên (Name) và bỏ trống URL (địa chỉ website/webblog) vẫn có thể đăng nhận xét được trên blogspot. Mà khi nhận xét với tư cách Tên thì người nhận xét có thể đặt tên A, B, C hay bất cứ tên gì khác, như thế thì có khác gì người nhận xét là Nặc danh. Một người nhận xét tin cậy thường phải có Avatar hoặc Tên/URL. Chính vì lẽ trên mà cần đến thủ thuật Ẩn nội dung nhận xét của người nhận xét không có URL (gồm Nặc danh và Tên) để xử lý khiếm khuyết của thủ thuật nói trên.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau. Đăng nhâp Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét), chọn người có thể nhận xét là Bất kỳ ai – Kể cả Nặc danh (Anyone - includes Anonymous Users).

Tiếp tục vào Edit HTML, chọn Expand Widget Templates.

Tìm đến đoạn code giống như thế này.

<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>

Đối với một số Template sẽ trông giống thế này.

<div id='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>
</div>

Bạn chỉ việc thay dòng <p><data:comment.body/></p>

Bằng đoạn code bên dưới.

<b:if cond='data:comment.authorUrl'>
<p><data:comment.body/></p>
<b:else/>
</b:if>

Kết quả thủ thuật trông giống thế này.

Ngoài ra bạn có thể đặt một thông báo riêng cho các nhận xét của Nặc danh và Tên (không URL) như sau:

Nhận xét với tư cách Nặc danh hoặc Tên (không URL) được xem là vi phạm chính sách nhận xét tại blog này.

Bạn cũng có thể tùy ý điều chỉnh nội dung đoạn thông báo ở trên theo ý của bạn. Hãy dùng code như bên dưới.

<b:if cond='data:comment.authorUrl'>
<p><data:comment.body/></p>
<b:else/>
<p style='color:red;font-style:italic'>Nhận xét với tư cách Nặc danh hoặc Tên (không URL) được xem là vi phạm chính sách nhận xét tại blog này.</p>
</b:if>

Kết quả của thủ thuật trông giống như sau.

Lưu Template là OK.

Chú ý khi áp dụng thủ thuật này, bạn sẽ ẩn đi nội dung nhận xét của Nặc danh (Anonymous) và Tên (không URL), song vẫn có thể đọc được nội dung của những nhận xét đó khi Đăng nhập Blogger vào phần Comments để xem.

Ẩn nội dung nhận xét của Nặc danh

Cách đây một thời gian ngắn, bạn Noct đã hỏi tôi có thủ thuật nào giúp ẩn nội dung nhận xét của Nặc danh (Anonymous) hay không, bởi vì thông thường nếu muốn không cho phép Nặc danh đăng nhận xét trên một blogspot thì bạn phải cài đặt phần Comments theo lựa chọn Registered Users - includes OpenID; mà theo lựa chọn này thì ở phần nhận xét trên các bài viết sẽ mất đi tùy chọn Tên/URL (Name/URL). Vậy làm cách nào để ẩn đi nhận xét của Nặc danh mà vẫn để tùy chọn cài đặt nhận xét là Anyone - includes Anonymous Users (để người nhận xét với tư cách Tên/URL vẫn có thể đăng nhận xét).

Để trả lời câu hỏi này, lúc đầu tôi nghĩ đến việc dùng Javascript để tạo thủ thuật liên quan, tuy nhiên nhận thấy nếu dùng Javascript cho một vấn đề tuy nhỏ nhưng không kém phần quan trọng như vậy thì dù sao cũng hơi phung phí. Thế là tôi nghĩ đến việc không cần dùng Javascript mà vẫn tạo được thủ thuật này. Và cuối cùng tôi đã thành công, tuy kỹ xảo rất là đơn giản nhưng kết quả thì trên cả tuyệt vời. Bạn có thể xem kết quả ở hình minh họa bên dưới.

Bằng thủ thuật này, bạn sẽ ẩn đi nội dung nhận xét của Nặc danh (Anonymous), song vẫn có thể đọc được nội dung của nhận xét đó khi Đăng nhập Blogger vào phần Comments để xem. Để cài đặt thủ thuật này, trước tiên bạn Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét), chọn người có thể nhận xét là Bất kỳ ai – Kể cả Nặc danh (Anyone - includes Anonymous Users).

Tiếp tục vào Edit HTML, chọn Expand Widget Templates.

Tìm đến đoạn code giống như thế này.

<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>

Đối với một số Template sẽ trông giống thế này.

<div id='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>
</div>

Bạn chỉ việc thay dòng <p><data:comment.body/></p>

Bằng đoạn code bên dưới.

<b:if cond='data:comment.author == &quot;Nặc danh&quot;'>
<b:else/>
<p><data:comment.body/></p>
</b:if>

Lưu Template là xong.

Chú ý, bạn cần thay Nặc danh bằng Anonymous nếu tên hiển thị người nhận xét Nặc danh trên blog của bạn là Anonymous.

Ẩn nhận xét đã bị xóa và thống kê lại nhận xét

Chúng ta đã biết đến thủ thuật ẩn nhận xét đã bị tác giả xóa. Tuy nhiên thủ thuật đó có một điểm hạn chế là nhận xét bị xóa được ẩn đi nhưng vẫn được thống kê trong tổng số nhận xét trên cả blogspot. Bài viết này hướng dẫn cách vừa ẩn nhận xét đã bị xóa và thống kê lại nhận xét trên blogspot đã loại bỏ các nhận xét đã bị xóa, giúp cho kết quả thống kê được chính xác hơn.

Để làm được như vậy, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm dòng

<b:loop values='data:post.comments' var='comment'>

Rồi chèn dưới nó bằng đoạn code bên dưới.

<b:if cond='data:comment.isDeleted'>
<b:else/>

Kéo xuống đến thẻ đóng </b:loop> rồi chèn trước nó bằng thẻ </b:if>.

Lưu Template. Với Bước 1 thì các nhận xét bị xóa sẽ không còn xuất hiện nữa.

Bước 2. Thống kê lại nhận xét trên blogspot.

Tìm trong Template tất cả các dòng <data:post.numComments/>

Rồi thay nó bằng <font id='numComments'><data:post.numComments/></font>

Tìm dòng <b:includable id='comments' var='post'>

Rồi đặt dưới nó bằng đoạn code bên dưới.

<script type='text/javascript'>var numComments=<data:post.numComments/>;</script>

Tiếp tục tìm dòng <b:if cond='data:comment.isDeleted'> (đã thêm vào ở Bước 1)

Và đặt dưới nó bằng dòng

<script type='text/javascript'>numComments--;</script>.

Cuối cùng, tìm dòng <b:if cond='data:post.commentPagingRequired'>

Rồi đặt trước nó bằng đoạn code bên dưới.

<script type='text/javascript'>
var numC=document.getElementById(&#39;numComments&#39;);
if(numC) numC.innerHTML=numComments;
</script>

Lưu Template. Nhờ Bước 2, các nhận xét bị xóa sẽ được loại trừ và bộ đếm nhận xét sẽ thống kê chính xác hơn.

Tùy biến Comments Block cho blogspot

Để có phần nhận xét (Comments) đẹp cho blogspot thì bạn phải tùy biến hai thành phần quan trọng là comments-block và comment-form. Tiếp sau bài hướng dẫn tạo Comment Form đẹp, bài viết này sẽ hướng dẫn cách tạo một Comments Block đẹp.

Bạn có thể xem một ví dụ Demo ở hình minh họa bên dưới.

Nào chúng ta cùng thực hiện theo các bước như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comments-block, tìm đến đoạn code như bên dưới.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + 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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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>

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

<div id='comments-block1'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-block'>
<div class='comments-wrapper'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<div class='comments-avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>

<div class='comments-meta'>
<strong>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a class='comments-autor-name'> <data:comment.author/></a>
</b:if>
</strong>
<div class='comments-timestamp'>
<span class='comment-timestamp'>
<a class='comment-permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>

<div class='comments-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='arrow'></div>
<p><data:comment.body/></p>
</b:if>
</div>
</div>
</div>
</div>
</b:loop>
</div>

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]</b:skin>.

(Lưu ý trước khi thực hiện Bước 2, hãy dùng từ khoá comments tìm đến code CSS liên quan rồi xóa hết)

#comments-block1 {padding-left:10px}
.comments h4{padding:10px 0 20px 0}
.comments-wrapper{border-bottom:1px solid #e1e1e1;margin-bottom:10px}
.comments-wrapper:last-child{border-bottom:none}
.comments-block{padding:0 10px}
.comments-meta{font-size:.857em;text-align:right;line-height:1.286em;width:98px;float:left;padding-top:16px}
.comments-meta a:hover{text-decoration:none;border-bottom:1px dotted #004A80}
.comments-timestamp{font-size:.857em}
.comments-avatar{float:right}
.comments-body{font-size:0.857em;background:#FFF;margin:10px 0 15px 113px;border:1px solid #E1E1E1;-moz-border-radius:5px;-webkit-border-radius:5px;padding:10px;width:400px}
.comments-body .arrow{width:0;height:0;line-height:0;float:left;margin:5px 0 0 -20px;border-bottom:10px solid transparent;border-right:10px solid #fff;border-top:10px solid transparent}
.comments-body a{border-bottom:1px dotted #004A80}
.comments-body a:hover{text-decoration:none;border-bottom:1px solid #004A80}

Chú ý trong đoạn code trên, điều chỉnh width:400px để định chiều rộng phần thân chứa nội dung nhận xét phù hợp với chiều rộng phần comments-block.

Lưu Template là OK.

Bạn hãy nghiên cứu thêm về CSS để tùy biến cho phần Comments Block theo ý muốn của mình nhé.
:44)

Tùy biến Comment Form sao cho đẹp

Trong quá trình chăm chút cho blogspot, một admin bao giờ cũng muốn cho phần nhận xét trên blog của mình thật đẹp. Tuy nhiên để thỏa ước muốn đó thì cũng không phải dễ dàng gì nếu admin không hiểu tường tận về hệ thống nhận xét của Blogger.

Phần nhận xét của một blogspot được đặt nằm gọn trong id có tên là #comments chứa các id và class khác, trong đó có hai id chính là #comments-block và #comment-form. Bạn không nên nhầm mà đồng nhất #comment-form với #comments bởi vì #comment-form là một bộ phận của #comments mà thôi. Tôi sẽ đề cập đến phần #comments-block trong một bài viết khác, trong phạm vi bài này, chỉ xin giải quyết vấn đề làm sao để có một Comment Form cho đẹp.

Dưới đây là phân tích cấu trúc một Comment Form cơ bản chưa được chỉnh sửa gì nhiều.

Như các bạn thấy thì id #comment-form chứa 2 id khác quan trọng gồm #comment-post-message (dòng thông báo Đăng một nhận xét) và #comment-editor (khung nhập nhận xét). Để hiểu sâu hơn, chúng ta tiếp tục phân tích phần XML trong Template của Comment Form.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comment-form tìm đến đoạn code như bên dưới.

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

Chú ý trên đoạn code trên, đối với một số Template thì bạn sẽ thấy thẻ <div class='comment-form'>, thay vì là thẻ <div id='comment-form'>.

Nào, chúng ta bắt đầu tùy biến bằng CSS nhé.

1. Nếu bạn muốn tùy biến dòng thông báo Đăng một nhận xét thì bạn đặt CSS như sau.

#comment-post-message {
float:left;
font-size:14px;
font-family:Arial;
font-weight:bold;
border:1px solid #fc5604;
color: #0000ff;
text-case:sentence;
}

Chú ý text-transform:uppercase đặt chữ viết HOA, còn text-case:sentence đặt chữ viết Hoa chữ cái đầu.
Nếu bạn rành về CSS thì có thể tùy ý điều chỉnh theo ý muốn.
Nếu bạn muốn id này float về giữa thì đặt float:center;
Nếu muốn ẩn quách nó đi thì đặt thêm display:none !important;
Còn nếu muốn xóa luôn nó đi thì (trong Template) xóa dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Nếu muốn thay đổi dòng Đăng một nhận xét thì thay <data:postCommentMsg/> bằng câu gì đó bạn muốn.

2. Nếu để ý phần #comment-editor bạn sẽ thấy bề ngang nó cách xa biên bên phải của phần Main và bề dọc nó cách xa phần #blog-pager làm cho nó trông rất xấu xí, vì chừa đất trống rất nhiều mà chẳng biết “trồng” cái gì vào đấy. Để cắt phần đất thừa đó đi thì bạn tùy biến CSS cho phần #comment-editor như sau.

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

Ở đây bạn chỉnh các thông số về chiều rộng (width) sao cho không quá bề rộng phần Main, chiều cao (height) sao cho tương xứng và padding-left phù hợp với trang của bạn.

3. Ngoài ra bạn có thể tùy biến CSS cho cả id #comment-form như sau.

#comment-form {
background: ;
}
#comment-form p {
………
}

Bạn có thể đặt nền (background) cho phần Comment Form và thêm CSS khác vào đoạn code trên.

Đối với Template có thẻ <div class='comment-form'> thì thay #comment-form bằng .comment-form

Và còn nhiều thứ khác nữa có thể tùy biến xung quanh Comment Form, hy vọng có thể cập nhật tiếp trong thời gian tới. :1)

Chỉ định liên kết đến trang giới thiệu cho người nhận xét là Admin

Nếu bạn chú ý ở phần tên người nhận xét trong các nhận xét trên blogspot thì sẽ thấy rằng liên kết tên người nhận xét cho trường hợp người nhận xét đăng nhập tài khoản Blogger thường dẫn đến trang hồ sơ Blogger của người nhận xét. Thông thường mỗi blogspot đều có một trang giới thiệu về tác giả (admin) của blog. Vậy tại sao chúng ta không can thiệp để liên kết tên Admin trên các nhận xét dẫn đến trang giới thiệu về tác giả của blog? Nếu làm được như vậy thì blogspot của bạn sẽ tạo được sự khác biệt về một phương diện nào đó.

Bạn có thể xem Demo kết quả này khi click vào tên người nhận xét là Huỳnh Nhật Hà trên blog của tôi trước khi thực hiện cho blogspot của mình.

Đăng nhập Blogger, vào Design >> Edit HTML. Hãy nhớ backup Template của bạn trước khi can thiệp vào code trong Template. Chọn Expand Widget Templates.

Trong Template hãy tìm đến đoạn code như sau:

<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>

Lệnh điều kiện ở trên ý nói rằng, nếu tên tác giả nhận xét có URL (liên kết) thì gán URL cho nó, nếu không thì chỉ có tên tác giả nhận xét mà thôi (dành cho trường hợp người nhận xét là nặc danh).

Nếu bạn muốn URL tên bạn (là Admin) dẫn đến trang giới thiệu (about-me) trên blog của bạn thì thay đoạn code ở trên bằng đoạn code dưới đây.

<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXXX&quot;'>
<a href='URL_trang giới thiệu về Admin' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='blank'><data:comment.author/></a>
</b:if><b:else/>
<data:comment.author/>
</b:if>

Trong đoạn code trên, bạn cần thay XXXXXXXXXXXXXXXXXXXXX bằng chuỗi số ID hồ sơ Blogger của bạn (chuỗi số này chắc là dễ tìm rồi) và thay URL_trang giới thiệu về Admin.

Lưu Template là OK.

Ngoài ra, bạn có thể đặc cách tạo thêm tính năng này cho một người nhận xét thường xuyên nhất trên blog của bạn, hoặc có thể là tri âm tri kỷ trên blog của bạn. Thì bạn dùng code như thế này.

<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXXX&quot;'>
<a href='URL_trang giới thiệu về Admin' rel='nofollow'><data:comment.author/></a>
<b:else/>
<b:if cond='data:comment.author == &quot;Tên một người&quot;'>
<a href='URL_trang giới thiệu của người đó' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
</b:if></b:if><b:else/>
<data:comment.author/>
</b:if>

Xin quý bạn đọc thứ lỗi cho Huỳnh Nhật Hà vì dạo này hơi bận việc khác một chút nên thủ thuật không nhiều như lúc trước, song hy vọng những thủ thuật trong năm 2011 vẫn “độc” để khỏi phụ lòng mong mỏi của mọi người. :54) :44)