Thêm nút Comments nhanh và đẹp cho blogger?

Bình luận chính là những ý kiến phản hồi về các bài đăng trên blog, do đó comments thực sự là một phần thiết yếu của bất kỳ Blog. Là một blogger, bạn luôn luôn vui mừng khi thấy các thảo luận mới về bài viết của mình. Nhưng cũng có khi bạn không nhận được bình luận nào cả và điều này thường xảy ra trong các bài viết dài. Vấn đề ở đây là độc giả ngại di chuyển đến tận cuối cùng để bình luận bài viết của bạn.

Demo

Vì vậy, làm thế nào bạn có thể cải thiện trang blog của bạn theo để có thể nhận được thêm ý kiến? Làm cách nào để đưa nhận xét đến vị trí gần nhất của độc giả?

Và bài viết này, mình sẽ hướng dẫn làm thế nào để thêm một nút bình luận cố định trên Blogger. Trước tiên bạn hãy xem demo sau đó làm theo các bước hướng dẫn đơn giản bên dưới

Thêm nút Comments cho blogger

1. Vào blogger > Mẫu > Chỉnh sửa HTML
2. Dán một trong hai code bên dưới trước thẻ </body> sau đó lưu lại

• Nếu bạn muốn sau khi click vào Nút comments sẽ nhảy đến phần comments của những độc giả trước thì sử dụng code sau

<b:if cond='data:blog.pageType == "item"'>
<a class="cmntlink" href="#comments">Comments</a>
</b:if>

• Nếu bạn muốn sau khi click vào Nút Comments sẽ nhảy đến phần comment form để bình luận thì sử dụng code sau

<b:if cond='data:blog.pageType == "item"'>
<a class="cmntlink" href="#comment-editor">Comments</a>
</b:if>

Đoạn code màu đỏ phía trên được thêm vào để nút comments chỉ hiện ở bài viết, sẽ không xuất hiện ở Home và các trang khác

Chèn CSS

• Vào blogger > Mẫu > Tùy Chỉnh (không phải là chỉnh sửa HTML nhé!)
• Nâng cao > Kéo thanh cuộn ngay bên cạnh xuống cuối cùng và chọn add CSS sau đó dán code bên dưới vào

Click để xem ảnh lớn

a.cmntlink {
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -ms-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -o-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none !important;
box-shadow: 1px 1px 10px grey;
text-shadow: 0 1px 0 white;
border: 1px solid gainsboro;
padding-bottom: 13px;
color:black !important;
text-decoration: none;
display: inline-block;
padding: 10px 23px;
border-radius: 3px;
position: fixed;
z-index: 9999;
bottom: -3px;
right: 3px;
-webkit-transition: all .400s;
-moz-transition: all .400s;
-ms-transition: all .400s;
-o-transition: all .400s;
transition: all .400s;
}
a.cmntlink:hover {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border-color: #999;
color: #333;
}
a.cmntlink:active {
border-color: darkRed;
color: black;
}

• Save lại và xem kết quả nào!

Bạn hưởng lợi ích gì từ thủ thuật này?

Nút Comments này rất hiệu quả, chức năng này trong blog của bạn làm tăng số lượng comments vào bài đăng trên blog của bạn và khách truy cập có thể truy cập phần comments chỉ với một cú nhấp chuột. Đồng  nghĩa là thông tin phản hồi ngày càng tăng của các độc giả  và sẽ giúp cho blog của bạn phổ biến hơn.