Làm đẹp Threaded comments của blogspot

Như các bạn đã biết hiện nay Blogspot đã cho ra Threaded comments mới, tuy nhiên giao diện còn khá đơn giản, nhìn không đẹp mắt lắm. Do vậy mình xẽ giới thiệu cho các bạn một số mẫu giúp cho giao diện comment mặc định của blogger đẹp hơn và lôi quấn hơn.

Các mẫu này dựa trên nền tảng Threaded comments của blogger do vạy chỉ phân cấp được tối đa 1 cấp. Sau đây mình sẽ giới thiệu cho các bạn các cách tùy biến Threaded comments sao cho đẹp hơn:

» Cách thực hiện:

1- Đăng nhập vào blogger
2- Chọn Thiết Kế
3- Chọn Chỉnh sửa HTML
4- Chọn mở rộng tiện ích mẫu:

5- Đối với các blogger cũ chưa cập nhật Threaded comments thì các bạn tìm đoạn code sau:

<b:include data='post' name='comments'/>

- Nếu không thấy thì bở qua bước này. Nếu thấy thì thay thế nó bằng đoạn sau:

<b:include data='post' name='threaded_comments'/>

6- Tiếp tục tìm đoạn code có dạng tương tự như sau:

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

7- Đến đây có 3 mẫu cho các bạn lựa chọn nếu thích mẫu nào thì các bạn chọn code mẫu đó và thay thế vào phần mình tô màu xanh ở bước 6.

- Chú ý: Nếu không tìm thấy Code ở bước 6 thì bạn thêm code bước 7 vào chèn trước thẻ  ]]></b:skin> .

Mẫu 1: xem hình bên dưới.

Code chèn:

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOu_7S20XR9SzgYAjfDXYWm4-UoDwnfhp7ZkqTlP0xS13HcpEc9VH89PM0dz1Ek_MPkRP0pcKtoD4fVN1t4W0438IFzSpD-HCFqkYT8uVDSsgGy6X19h5en85vBpUOr6HJZxcNhRNLY3Y/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Mẫu 2:Dạng comment mẹ bao trùm comment con.

Code chèn:

.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='#666666', EndColorStr='#999999'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999')"; /* 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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow {  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") 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;
  }
}

Mẫu 3: Mẫu của Duy phạm.

Ảnh minh họa: Demo

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOx5ZgJvWSMB5ZTd6zAb8GMSzye47gRSO2l1H-yySg_NZpUECsts0EfKi4sReHn2Eh0jEsqexLGgac7q9so-VHylL0vZC4lj5nJogCn0ur_m6L2AdMa8ZX9K2vbcz6g5wBKj_E3RDn6K8/);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%} 

Chúc thành công!

Chủ đề: