Cảm nhận tư duy và tổng hợp kiến thức

Thứ Ba, 17 tháng 11, 2015

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 đó.


Tạo số đếm nhận xét đẹp sau tiêu đề 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:
    Tạo số đếm nhận xét đẹp sau tiêu đề bài viếtTạo số đếm nhận xét đẹp sau tiêu đề bài viết
  • 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 →
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é.

Share:
LIKE and Share this article: :

0 Comments:

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa



Thống kê Blogspot

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP