Đây là thủ thuật của một số mẫu giúp cho giao diện comment mặc định của blogger đẹp hơn và lôi cuố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 2 cấp.
» Cách thực hiện:
1- Đăng nhập vào blogger
2- Chọn Mẫu
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ì tìm đoạn code sau:
<b:include data='post' name='comments'/>- Nếu thấy thì thay thế nó bằng đoạn sau:
<b:include data='post' name='threaded_comments'/>
- Nếu không thấy thì bỏ qua bước này.
6- Tiếp tục chọn một trong số các mẫu bên dưới và dán trước thẻ ]]></b:skin>
Một số style đẹp cho thread comments của bloggerMẫu 1:
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/AVvXsEjEUV8G0RZj829Cmvzuinr31u8NCO6V-UrA54ld6Ueo-M0cqLV3y22rAEP_vqThuXf4jsj-JX3esFnpQ3uhmmcAM65sK0hJVWvC1m73W-m6fIEaDW1AO30FAh3a-Hqa9zU-hGuI8NNltPg/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.
Code chè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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-23Z1nSIMMTXUtE7gfL9vA6Cs17OkwSRBVETNmFkZhOkHn9sv-6gJIMLBviYt79nX_TTlXR4deXmAbO_p8XGE53TFGb5kCBhGB6xKyZFXO4w6ApJYopedslLBQKDoySCm-K5VTcC4pJg/h120/author-namkna.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%}
Chúc thành công!
Nguồn:
https://blog.landgonow.com/2012/03/lam-dep-threaded-comments-cua-blogspot.html
:))
:((
:)
:-ss
=))
:(
:d
@-)
:p
:-o
[-(
:-?
:-t
b-(
=d>
:((
:(
:))
~X(
:-h
:-?
b-)
*-:)
~O)
@};-
>:D<
=))
:)
:-*
:D
[-X
x(
:-o
=D>
:@)
:P
:">
;;)
;)
:X
=((
:-/
Không có nhận xét nào:
Hướng dẫn viết nhận xét:
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
- Thêm một vài biểu tượng cảm xúc...