» Cách thực hiện:
1- Đăng nhập vào blogger2- 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/AVvXsEjQQTPRxrOrgVyL9pP_qH6i8AlfLumZhdgNWMfmVmdNNjQLP8nydrzkURL5VdQoaSB7ksZEW3WSh0DfkUirjf-3rvv_lwSY3-YH1nR_C9qLDUFrclcem_4Od5nq6K-ybfwXJyL12-0euEY/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/AVvXsEgyvQI83Kzy1lbe0KqCcsT6-LsBDQyLVL6DMYArHCRYiqYJLEpJkrkscKFa7NCtiXbve7A6q0c9aE_Mw3uIaEfRlJE93GfI9oJXDyFBVxQkGFlm0z2AIwZMnvlSfjKO5pv9mrw037u1O5A/);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!
(nguồn blog namkna)
