Tạo khung comments cho khác chút nha.

Đây là một style dành cho Thread Comment mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giản, rõ rànghiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.

Đây là mẫu



 Bấm ctrl+F , copy thẻ ]]></b:skin> vào khung Find để dễ tìm code nha

 Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.


#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments 
.comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments 
h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px
 solid #d80556;border-right:20px solid 
transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments 
.comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container 
img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content 
.comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread 
.comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 
0;padding:0;width:100%;line-height:1em}
.comments .comments-content 
.icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image:
 
url(http://lh6.ggpht.com/-GDMurKK2tec/T5JCD6hoKoI/AAAAAAAABAc/COHOItBlFWk/author.png);width:36px;height:36px}
.comments
 .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid 
#ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread 
.comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px
 solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment 
.comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread 
.avatar-image-container,.comments .comment-thread.inline-thread 
.avatar-image-container 
img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}



 d80556 là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.
Nguồn: http://blog.duypham.info/2012/04/nice-style-thread-comment-for-blogger.html

18 comments:

  1. Làm được cho em hay nha....phải lưu cái bảng css của mình vào word document đi..có gì hư thì bỏ nó vô lại.

    ReplyDelete
    Replies
    1. Được rồi, để coi thay màu nữa coi sao. :D

      Delete
  2. Hay quá ta ơi...để mai kiếm bộ emotions cài dzô đây để có mặt cừ...mặt khóc coi chơi.:D

    ReplyDelete
  3. Hay lắm đó, mà chưa thấy An add bên nhà chị hén:)
    Đang coi để áp dụng:)

    ReplyDelete
  4. Replies
    1. Ủa...em add hôm qua rồi mà?...check lại đi..ở cuối trang là box Friend list của em đó...Khung Find sẽ xuất hiện khi chị kết hợp tổng hợp phím ctrl+F...bấm 2 key đó 1 lúc thì nó sẽ hiện ra ở ngay task bar đó chị...Khung này giúp mình tìm tất cả những chi tiết mà mình muốn xóa hay edit...tạm dùng như vậy..chứ khg có nó là mình lòi con mắt luôn đó.:D
      [img src='http://i319.photobucket.com/albums/mm469/hoaian_bucket/IMG_0080-1.jpg' width='400' height='300'/]

      Delete
  5. Hi hi..là hoang anh đó hử? Hey cái recent comments này đẹp mà hơi rắc rối há. Thấy bên trang tiếng Anh có bày.

    ReplyDelete
    Replies
    1. Tiếng Việt mà chị làm khg xong..đọc tiếng Anh làm cho rối hử?...cái này là dzễ nhất rồi đó...chỉ cần find cái thẻ đó roôi copy và paste đoạn code này vô..xong.

      Delete
  6. Hình như mình vào đây lạc lối làm quấy rầy mấy chú chim non:))

    ReplyDelete
    Replies
    1. Xời...chị cứ tự nhiên đi...ai cũng lớn hết rồi mà.

      Delete
  7. Đâu con chim nào đâu? Cohuynh bắt rô ti coi.

    ReplyDelete
  8. Mình làm hoài mà không ra hình như của An. Hic.

    ReplyDelete
  9. Không biềt chỉ sao luôn.:D

    ReplyDelete
  10. Chị làm được rồi ..Cám ơn An :)
    Chị chỉ làm hình tròn nó bé đi thôi

    ReplyDelete
    Replies
    1. Chị cứ hay nói là chịu thua mấy cái thuộc về code...giờ làm được rồi đó thấy không?

      Delete

-Vui lòng gõ tiếng Việt có dấu và không viết những từ của trẻ con thời @
-Code chèn hình [IMG]link hình[/IMG]
chèn youtube [YOUTUBE]link[/YOUTUBE]
TEXT