Google vừa bổ xung Google +1 vào Blogger và có vẻ như nút +1 này nhanh chóng chiếm được cảm tình của đông đảo Blogspotter. Google +1 thực hiện chức năng đánh giá cho bài viết, trang tĩnh, trang chủ hoặc trang lưu trữ, vậy còn comments? Chúng ta đều biết đến nút Like nổi tiếng đã trở thành thương hiệu của Facebook, thậm chí họ còn đăng ký bản quyền cho nó. Hoặc không kể đâu xa, "người đóng thế" Disqus cũng có 2 lựa chọn Like và Dislike trong comments. Chẳng còn gì nhanh chóng hơn 1 click Like để thay lời cảm ơn cho comment bạn thích mà đôi khi viết ra thì thấy cụt lủn, không viết thì "thâm tâm day dứt". Ngoài Hiển thị Xếp hạng theo Dấu sao (Star Ratings) hẳn bạn biết có 1 tiện ích đánh giá bài viết với nhiều lựa chọn hơn đó là Phản ứng (Reactions). Bài viết này sẽ giúp bạn đưa tiện ích đó vào đánh giá từng comment.

Tìm trong template thẻ <data:comment.body/>. Sẽ có 2 thẻ như vậy, thẻ đầu tiên để hiển thị thông báo comment đã bị xóa và chắc hẳn bạn không muốn thêm nút Like cho nội dung này, hãy chọn thẻ <data:comment.body/> thứ 2 và thêm vào sau nó đoạn mã dưới đây:

<b:if cond='data:top.showReactions'>
 <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl + data:comment.id' frameborder='0' name='reactions' scrolling='no'/>
</b:if>

Sau khi lưu template lại bạn quay về Thiết kế → Phần tử trang chọn Chỉnh sửa widget Blog Posts và đánh dấu vào lựa chọn Phản ứng. Tại đây chọn Chỉnh sửa và thêm những lựa chọn phản ứng mà bạn muốn ngăn cách nhau bởi dấu phẩy rồi lưu lại.

Bạn chỉ muốn sử dụng Phản ứng cho comments nhưng Phản ứng sau khi bật thì đang hiển thị cả trên bài viết? Hãy tìm đoạn mã dưới đây trong template và xóa nó đi.

<span class='reaction-buttons'>
  <b:if cond='data:top.showReactions'>
    <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
      <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
        <span class='reactions-label'>
        <data:top.reactionsLabel/></span>&#160;</td>
      <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
     </tr></table>
  </b:if>
</span>

Mình không sử dụng thẻ <data:top.reactionsLabel/> là chữ Phản ứng: vì thấy không cần thiết. Những nút Phản ứng được đặt dưới nội dung comment, tùy sở thích mà bạn có thể đặt ở ví trí khác.

Ưu điểm là có thêm lựa chọn đánh giá cho từng comment để khuyến khích những comment chất lượng. Tuy nhiên nhược điểm sẽ làm giảm tốc độ blog đi đôi chút khi duyệt bài viết.

Đây là một style dành cho Thread Comment mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giản, rõ ràng và hiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.

Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWozcn_6y8gb7U3VFKT-o7YlEzniK98TCqyUE8vEbiLwVZHLtAIRjLC0Dj7vfZOuISzEz2QRSh2bPk8jBcZfRlEYBX0_bC0Xotzlmk0dAGoYDaXxoraXa12VQ3_eQo83FAWbkuSoyKzQ/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

d80556 là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.

Thread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây:

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.

Cancel reply là hủy bỏ hành động Reply, nó là nút thường có trong Thread Comment. Trong Blogger nó chính là nút Add comment, có điều nút này nằm dưới cùng danh sách nhận xét và như vậy khi muốn hủy bỏ Reply người nhận xét phải kéo con trỏ chuột xuống hết danh sách nhật xét mới gặp. Thủ thuật này sẽ hiển thị nút Cancel reply ngay trên khung nhận xét khi reply.

Thêm đoạn mã dưới đây vào sau đoạn mã if (replybox && (commentId !== replyParent)) { trong template của bạn.

cancelRep=document.getElementById('bc_0_'+items.length+'I');
document.getElementById(domId).insertBefore(cancelRep,null);
cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');
if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

Thủ thuật đã xong. Nếu muốn trang trí cho nút Cancel reply bạn thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template.

.comments .continue{display:none;border-top:0}
.comments .continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px rgba(255,255,255,.3) inset;background:#e8233a;padding:5px 10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

Ở bài viết trước đây mình có hướng dẫn tạo nút Like cho những nhận xét. Tuy nhiên nó có nhược điểm là nếu bài viết càng nhiều nhận xét thì tốc độ tải trang càng chậm theo, và đó là dành cho phiên bản nhận xét cũ của Blogger. Trong bài viết này mình sẽ hướng dẫn tạo nút Like cho nhận xét ở phiên bản Thread Comment mới. Vẫn được sử dụng tiện ích Star Ratings "cây nhà lá vườn" của Blogger tuy nhiên không gây xung đột với tiện ích này ở phần đánh giá bài viết, chỉ tải về khi đưa chuột vào nút Like do đó không làm chậm blog.

Preview

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGZorGpXLYyof3dlnD8uVsKboVcmq-2G89A0Y7aUktsQOvmQ_vfPqXwKOLdaT4NrwAQAnHl457dkXjvBlCPuDkNnuOkcU-QJJk-0soKuhT3Db_HzXQ7fb9XhfTuUhcKPSdPkTOb8qP5E/s10/like.png) no-repeat}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây:

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây:

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn.

<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Mang về blog và hãy bấm Like cho nhận xét mà bạn thích nhé!