Cách thực hiện:
1. Đăng nhập Blogspot
2. Vào Thiết kế
3. Chọn Mẫu => Chỉnh sửa HTML => Mở rộng mẫu tiện ích
4. Tìm đoạn code:
<b:include data='post' name='comments'/>
và thay thế nó bằng đoạn code sau:<b:include data='post' name='threaded_comments'/>
Nếu không tìm thấy đoạn code đầu tiên thì bỏ qua bước này.5. 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>
6. Chèn đoạn code sau vào vị trí được tô màu xanh ở trên: (ở đây mình đưa ra 03 mẫu mình thấy ưng ý nhất cho các bạn lựa chọn)***Lưu ý: Nếu không tìm thấy đoạn code ở bước 5, thì bạn chèn đoạn code bên dưới vào ngay bên trên thẻ ]]></b:skin>
a/ Mẫu của Namkna:
Minh họa:
Code:
.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://lh6.googleusercontent.com/-s5F6xrSNUu8/UOl9lnRSJkI/AAAAAAAAGew/ZvCZfvvFu4k/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}}
b/ Mẫu của Duy Phạm: (chỉ phân cấp được 1 cấp - là giao diện mình đang sử dụng hiện tại)Minh họa:
Code:
#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://lh6.googleusercontent.com/-Iw7XX6iJm18/UOl3Yx5q8JI/AAAAAAAAGeg/-TOxSbLzWMQ/s36/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%}
c/ Mẫu 03: (Mẫu này nhìn khá giống giao diện của Multiply, tuy nhiên cũng chỉ có thể phân cấp được 1 cấp)Minh họa:
Code:
.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;
}
}
7. Lưu mẫu.Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét