Một giao diện khác cho Threaded comments của Blogger

Một giao diện khác cho Threaded comments của Blogger

Hôm trước mình đã hướng dẫnchuyển threaded comments của blogger về dạng comments cũ vì một số hạn chế của hệ thống comments này. Nhưng có 1 số bạn cũng nhờ tùy biến lại xem giao diện nó như thế nào nên hôm nay mình mới viết thêm bài viết này, hướng dẫn tùy biến 1 số thứ cho hệ thống comments này...

Xem Demo

1. Vào Thiết kế → chỉnh sửa HTML → mở rộng tiện ích mẫu. tìm đến đoạn code sau:

<b:includable id='threaded_comment_css'>
  <style>
...
...
...
  </style>
</b:includable>

2. Bạn thay toàn bộ đoạn code trên bằng đoạn code sau:

<b:includable id='threaded_comment_css'>
  <style>
.comments {  clear: both;  margin-top: 10px;  margin-bottom: 0px;  line-height: 1em}
.comments .comments-content {  font-size: 13px}
.comments .comment .comment-actions a {padding:10px}
.comments .comment .comment-actions a:hover {  text-decoration: underline}
.comments .comments-content .comment-thread ol {  list-style-type: none;  padding: 0;  text-align: left}
.comments .comments-content .inline-thread {  padding: 0.5em 1em}
.comments .comments-content .comment-thread {  margin: 8px 0px}
.comments .comments-content .comment-thread:empty {  display: none}
.comments .comments-content .comment-replies {  margin-top: 1em;  margin-left: 36px}
.comments .comments-content .comment {  margin-bottom:15px;
border:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.15);
background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), to(rgba(0,0,0,0.05)));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#666666&#39;, EndColorStr=&#39;#999999&#39;); /* IE6,IE7 only */
-ms-filter: &quot;progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#666666&#39;, EndColorStr=&#39;#999999&#39;)&quot;; /* IE8 only */
box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5)
}
.comments .comments-content .comment-body {  position:relative}
.comments .comments-content .user {  margin:6px 0 0 0;  font-style:normal;  font-weight:bold}
.comments .comments-content .icon.blog-author {  width: 18px;  height: 18px;  display: inline-block;  margin: 10px 10px -4px 6px}
.comments .comments-content .datetime {  margin:10px;  float:right}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {  margin:0 0 8px}
.comments .comments-content .comment-content {  text-align:justify}
.comments .comments-content .owner-actions {  position:absolute;  right:0;  top:0}
.comments .comments-replybox {  border: none;  height: 250px;  width: 100%}
.comments .comment-replybox-single {  margin-top: 5px;  margin-left: 48px}
.comments .comment-replybox-thread {  margin-top: 5px}
.comments .comments-content .loadmore a {  display: block;  padding: 10px 16px;  text-align: center}
.comments .thread-toggle {  cursor: pointer;  display: inline-block}
.comments .continue {  cursor: pointer}
.comments .continue a {  display: block;  padding: 0.5em;  font-weight: bold}
.comments .comments-content .loadmore {  cursor: pointer;  max-height: 3em;  margin-top: 3em}
.comments .comments-content .loadmore.loaded {  max-height: 0px;  opacity: 0;  overflow: hidden}
.comments .thread-chrome.thread-collapsed {  display: none}
.comments .thread-toggle {  display: inline-block}
.comments .thread-toggle .thread-arrow {  display: inline-block;  height: 6px;  width: 7px;  overflow: visible;  margin: 0.3em;  padding-right: 4px}
.comments .thread-expanded .thread-arrow {  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow {  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent}
.comments .avatar-image-container {  float: left;  width: 36px;  max-height: 36px;  overflow: hidden;  margin:5px 0 0 5px}
.comments .avatar-image-container img {  width: 36px}
.comments .comment-block {  margin-left: 48px;  position: relative}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

Save template lại và thưởng thức kết quả nào :)