Tạo số đếm nhận xét đẹp sau tiêu đề bài viết

Những nhận xét, bình luận là một trong những tiêu trí dùng để đánh giá mức độ thành công và nổi tiếng của blog bạn. Độc giả thường bình luận trên blog bạn để hỏi đáp những vấn đề họ khúc mắc trong bài viết của bạn, hay đơn giản chỉ để cảm ơn hoặc đánh giá về tác giả của bài viết đó. Một cách có thể khuyến khích độc giả comment trên trang của bạn là thông báo cho họ thấy bài viết họ đang xem có bao nhiêu người comment (tất nhiên nếu con số càng lớn thì co thấy bài viết đó được quan tâm càng nhiều). Bài viết này namkna sẽ hướng dẫn cho các bạn cách thêm một thông báo số lượng nhận xét được đăng trên một bài viết vào ngay sau tiêu đề của bài viết đó.

(Ảnh minh họa)

Xem trực tiếp trên blog minh họa:

» VIEW DEMO

» Cách tạo số đếm nhận xét đẹp sau tiêu đề bài viết.

1. Đăng nhập vào trang blog của bạn.

2. Vào phần Chỉnh sửa HTML (Edit HLM)

3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaz70GzahkF-VHtyuogSKkcq-dz1_pTt6L4bt6TiZAsxkGNXO5t0N5SuZyR2Gnz0xkFptUt43UR-qsFJ1MqvQbB1DCHBKz2j6ZZKvfuLP6VfkzEYSgTQp-sVgyQ4M-NAdcG8SS9qIvD_8/s1600/text_comment_bubble_comments-namkna-blogspot.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

4. Tìm đoạn mã chứa tiêu đề bài viết có dạng như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

- Tùy theo từng blog và tác giả của nó mà đoạn code có thể có sự khác nhau nhè nhẹ ví dụ như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

5. Sau khi tìm được đoạn code ở bước 4 bạn dán vào sau nó đoạn code bên dưới:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000; font-size: 16px; font-weight: bold;'><data:post.numComments/></a>
</b:if> 

»Tùy chỉnh mã CSS.

• Thay đổi mã màu chữ số đếm color: #000 cho phù hợp với màu nền của hình ảnh và màu nền trang của bạn nha. bạn có thể sử dụng bảng mã màu namkna cung cấp để chọn màu bạn thích. Bảng mã màu cho blogger.
• Thay thế link ảnh màu đỏ thành link ảnh nền của số đếm nhận xét khác theo ý của bạn. Bạn có thể sử dụng và thay thế thành một số link hình ảnh khác mà mình cung cấp ở bên dưới:
  
• font-size: 16px Là cỡ chữ của số đếm. bạn hãy điều chỉnh lại cỡ chữ cho phù hợp với từng ảnh nền để nó không bị tràn ra khỏi ảnh hay đè lên ảnh nha.

Namkna hy vọng bài viết sẽ giúp trang blog của bạn có thêm một trải nghiệm mới với giao diện blog có sự thay đổi theo chiều hướng tích cực hơn. Hãy chia sẻ và +1 nếu bài viết có ích với bạn nha. Tất nhiên là hãy để lại comment nếu có bất cứ khó khăn gì khi áp dụng thủ thuật này nha các bạn.

Sưu tập từ Terocket

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..