Thư viện

Trải nghiệm

Thứ Năm, tháng 4 03, 2014

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

Thêm số đếm những nhận xét, comment đã được đăng vào ngay sau tiêu đề của bài viết trên blogspot.

Chia sẻ:
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(http://2.bp.blogspot.com/-IpbOpU-P9rM/UOeOBWt64WI/AAAAAAAAFBQ/4Xq8npDL91k/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.

21 nhận xét:

  1. đã áp dụng nhưng không hiển thị gì hết. anh xem giúp em với :-)

    Trả lờiXóa
    Trả lời
    1. Ở bước 4 mỗi blog thường có 2 đoạn code như vầy. Một đoạn dành cho giao diện mobile, một đoạn cho giao diện web, Hiện tại em chèn vào sau đoạn cho mobile rồi.

      Xóa
  2. em đã làm được nhưng lại gặp một số lỗi sau: nó không hiện số comment và ảnh chứa số nhận xét bị cắt mất một nữa khúc trên. anh Nam xem giúp em với :-)

    Trả lờiXóa
  3. anh qua xem trực tiếp trên blog em nhé: TẠI ĐÂY

    Trả lờiXóa
  4. ak nếu em muốn làm cái style chứa số comment giống anh Nam thì làm sao anh Nam nhỉ?

    Trả lờiXóa
    Trả lời
    1. .comment-bubble{border-bottom:1px dotted #0080ff;
      background:#ddd;
      color:#fff;
      float : right;
      width : 72px;
      height : 72px;
      font-size : 28px;
      margin-top : -15px;
      margin-right : 2px;
      padding:5px;
      text-align : center;}

      Xóa
    2. Chỉnh lại cho thích hợp.
      margin-top : -15px;
      margin-right : 2px;

      Xóa
    3. bạn mail cho mình mình sẽ hướng dẫn

      Xóa
  5. ok, mình đã làm được, cám ơn bạn và anh Nam nhé :_0

    Trả lờiXóa
  6. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. Admin ơi anh biết làm cách nào để đổi từ "0 comment" trong blogspot thành "Leave a comment" không ạ ? em tìm khắp mọi nơi rồi nhưng ko có cách nào hiệu quả cả :( anh giúp em với :(

    Trả lờiXóa
    Trả lời
    1. Ý bạn là chuyển phần đếm comment thành phần di chuyển tới khung nhận xét phải không .

      Xóa
    2. em ko hiểu câu hỏi lắm , ý em là muốn nó giống kiểu trang livejournal.com ấy ạ, nếu có 1 comment thì nó sẽ hiển thị là "1 comment", 10 comments thì hiển thị là "10 comments", còn nếu ko có thì là "leave a comment" thôi ạ. Để 0 comment trông blog nó trống trải kiểu gì ấy :((

      Xóa
  9. chào AD ^^! blog của mình hiện có 1 chút vấn đề về phần nhận xét. Đó là phần "tổng quan" chỉ có
    [Số lượt xem hôm nay
    Bài đăng
    Người theo dõi]
    chứ không hề có mục đếm phần nội dung comment của blog @@!
    còn vào blog, dù cho có comment nó cũng không hiện comment ra mà ẩn đi @@! Chỉ có mỗi khung trả lời thôi @@! Mong ad giúp @@!

    Trả lờiXóa
    Trả lời
    1. Mìnhd đã vào blog 4truyentranh củab bạn thấy nó hoạt động bình thường vẫn hiển thị tốt.

      Xóa
  10. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  11. Admin ơi có làm thế nào để số nó canh giữa hình chứ của mình nó toàn bị dính lên đoạn trên của hình nhìn mất thẩm mỹ quá!

    Trả lờiXóa
    Trả lời
    1. Bạn thêm vào sau đoạn: .comment-bubble { đoạn code bên dưới:

      padding-top:10px;
      padding-right:10px;

      chỉnh sửa lại các thuộc tính cho thích hợp nha.

      Xóa
  12. cám ơn thông tin của bạn chia sẻ
    ---------------------------------------------------
    trại nấm linh chi | nấm linh chi đỏ

    Trả lờiXóa