Cách thêm tiện ích hiển thị số nhận xét cho bài đăng Blogger với CSS

H

ướng dẫn thêm tiện ích hiển thị số nhận xét(Comment counter) cho bài đăng Blogger với CSS. Mình thấy tiện ích này khá hay ở chỗ nó báo cho người đọc biết số nhận xét/Comment mà người đọc trước đó đã phản hồi cho bài viết. Điều này phát sinh từ thói quen lướt bình luận trước khi xem nội dung, rằng họ muốn biết người khác đánh giá thế nào về bài đăng trước khi quyết định xem nội dung.

Mình đánh giá đây là tiện ích đáng để thêm vào cho blog. Tùy vào sở thích và cách nghĩ của từng blogger mà cách hiển thị cũng vì thế mà khác đi.

Hướng dẫn này chỉ bạn cách hiển thị một nút/button hiển thị số nhận xét cho từng bài viết. Vị trí hiển thị là phần Header, nơi hiển thị tiêu đề bài đăng. Để thêm tiện ích, bạn làm theo các bước sau:

Bước 1: Vào phần Chỉnh sửa HTML > Ctrl-F và tìm đến đoạn code ]]></b:skin> > Thêm trước/trên nó

MẪU 1

.comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2l5GRRW1EJEcfmAXcXGYx5Rq_jwzTmZXAq6jlCVOVRRi1Kk58W2rWt_G6rIdHdUTGYucTrjHZXRuSlGPBdy5EIbCw75P8UNMaEbrKR1oAB5yifJ1hIMPSfmQVSrx3jKKipXvs9bWpcyFR/s200/comment-counter-bubble.png) no-repeat;
float : right;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}

MẪU 2

.comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCUOy0-3qX_jQ4YwZiVA9V6Euj_0Ow8mSLb_wog1Sec2zGuNnR8vYfi9C8_JycgY8zb30i4eiAMOd136EPV3ES8qU8XFZzSr7JYi3CBaA4X8cakHFRouTROzapnYyQcfifiFaP6x0Ic89k/s200/comment-counter-bubble-2.png) no-repeat;
float : right;
font-size : 14px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}

Bước 2: Tiếp tục tìm đến đoạn code <h3 class='post-title entry-title'> hoặc post-title entry-title và thêm dưới/sau nó đoạn code này:

<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Bước cuối cùng: Lưu Template và chỉnh sửa

Bạn có thể thấy đây là một tiện ích cài đặt đơn giản thôi. Điều không đơn giản ở đây chính là Style bạn muốn nó hiển thị trên trang của mình. Việc này tốn khá nhiều thời gian trong việc tìm kiếm các hình ảnh thay thế nếu bạn không hài lòng với 2 mẫu trên. Nối chung, cái code css này đơn giản, bạn cứ vọc vạch thoải mái... ít nhiều có kinh nghiệm thiết kế về sau.

Bài viết gốc: How to add a comments counter button to Blogger (Blogspot)