Cách thêm nút Reply đẹp cho Comment của Blogger/Blogspot

Chắc hẳn ai sử dụng blog Wordpress đã quá quen thuộc với nút Reply. Nút Reply hay Trả lời xuất hiện trong trong mục Comment của Blog giúp bạn đọc dễ dàng theo dõi Comment của từng người. Hiện tại nút Reply tại hướng dẫn này chỉ có tác dụng thêm ký tự @ vào tên người mà nhận trả lời kèm theo link đến comment đó. Bài viết này mình sẽ hướng dẫn các bạn thêm nút Reply đẹp vào Blogger cho các bạn.

DEMO

1. Đăng nhập vào tài khoản Blogger >> Chọn Blog cần quản lý:

2. Vào Mẫu >> Chỉnh sửa HTML
3. Check phần Mở rộng Mẫu Tiện ích
4. Tìm đoạn mã ( Ctrl + F để tìm) như sau:

<data:commentPostedByMsg/>

và thêm vào ngay sau nó đoạn mã :

<span><a class='cm_reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=7403020410772635599&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>Reply</a></span>

Lưu ý: Thay chuỗi số màu đỏ đậm (7403020410772635599) thành BlogID của bạn.
Xác định BlogID bằng cách nhìn lên thanh địa chỉ và copy blogID của bạn vào đó. Xem hình:

5. Thêm CSS làm đẹp:
Tìm ]]></b:skin> và thêm vào trên nó đoạn mã :

.cm_reply {border-bottom-color:#DDDDDD;
  border-bottom-left-radius:4px 4px;
  border-bottom-right-radius:4px 4px;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#DDDDDD;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#DDDDDD;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:#DDDDDD;
  border-top-left-radius:4px 4px;
  border-top-right-radius:4px 4px;
  border-top-style:solid;
  border-top-width:1px;
  color:#999999;
  float: right;
  font-size:10px;
  line-height:1em;
  margin-right:-6px;
  margin-top:30px;
  padding-bottom:3px;
  padding-left:3px;
  padding-right:3px;
  padding-top:3px;
  text-transform:uppercase;
}
.cm_reply:hover {
background: #eb7d1d;
text-decoration: none;
}

6. LƯU TEMPLATE
Lưu ý : CSS mình chỉ tìm hiểu trên mạng, nếu có thể tối giản mong bạn tối giản hộ mình nhé ^^!
Tính năng:
- Khi bấm vào Reply sẽ hiện ra 1 cửa sổ mới cho bạn viết nhận xét.
- Các nhận xét sẽ không được hiển thị theo level như bên WordPress.
- Tự động thêm ký tự @ vào tên người mà nhận trả lời kèm theo link đến comment đó.
- Thủ thuật không có hiệu lực trên Disqus.