Khung comment phân cấp đơn giản đẹp Blogger

Giới thiệu

+ Sử dụng comment threaded mặc định của blogger
+ Phân cấp 1 lần
+ Icon user và admin phân biệt
+ Màu tác giả và khách phân biệt

Hướng dẫn

Tìm đoạn code dưới đây

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

và thay thế tất cả thành

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

Thêm đoạn css này vào sau ]]></b:skin>

.comments{clear:both;font-family:Arial;font-size:14px;line-height:18px;width:100%}.datetime.secondary-text{line-height: 11px;display: block}.comments .comments-content{padding:0 5px;text-align:left}.comments .comment .comment-actions a,.comments .comment .continue a{font-size:12px;color:#e3045d!important;cursor:pointer;display:inline-block;padding:0 0;margin:0 0 0 8px;text-align:center;text-decoration:none}.comments .comment .comment-actions a:hover{color:#666}.comments .comments-content .comment-thread ol{list-style-type:none;margin:0;padding:0}.comments .comments-content .comment-thread ol li{margin:0;padding:0}.comments .comments-content .inline-thread{padding:0}.comments .comments-content .comment-thread{margin:8px 0}.comment-replies{margin-left:15px}.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}.comments .comments-content .comment:first-child{padding-top:6px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-size:12px;color:#0D0D0D;font-style:normal;font-weight:bold}.comments .comments-content .user a{font-size:12px;color:#004D99;font-weight:bold;text-decoration:none}.comments .comments-content .datetime a{color:#999;font-size:11px;padding-left:1px;text-decoration:none}.comment-header{border-bottom:1px solid #e3e3e3;font-size:16px;padding:5px 5px 13px}.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-left:8px;margin-top:5px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{display:none}.comments .comments-content .loadmore{cursor:pointer;margin-top:0;max-height:3em}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}.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{max-height:44px!important;max-width:46px!important;float:left;height:44px!important;overflow:hidden;vertical-align:middle;width:46px!important}.comments .avatar-image-container img{background:#fff;border:1px solid #ccc;height:35px!important;max-height:40px!important;max-width:40px!important;padding:2px;width:40px!important}.comments .comment-block{background:#f8f9f9;border:1px solid #ccc;border-radius:5px}.comments .comment-block p{margin-bottom: 7px; margin-top: 5px;padding:0 8px;font-size:14px!important}.comments .comments-content .blog-author a{color:#900}.avatar-image-container img{border:1px solid #fff;padding:0;float:left;height:30px;width:30px}.comment-form{padding: 0 0 0 10px;}.comments .comments-content .comment-content { text-align: left; color: #000; }
.comments .comments-content .icon.user.blog-author { position: absolute; width: 16px; height: 16px;margin: 0 0 0 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qa3UR13Su2nPFaOPI3wS1Fd-KIlJ8HnHrS-le6BRbmCLegzcexAUqfvD5ETPDAZDCHuSxuqRLrN7aWYCMjzeHtnuG5ZOKI2-tqxkf5We5EU5v4J1chSlrk-Yxhe0S-g83njPIk-9NARe/w16-h15-no/admin.gif); }
.comments .comments-content .icon.user { position: absolute; width: 16px; height: 16px;margin: 0 0 0 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpW0yevPU9Z_pigpIuz0CASQisKt2pFKiVA1cM3WIr0JUEADt7DC9rsPWVO_6OdI3ponNdmQoOT1jpncoZlyYJpVfh5BPUuDwJcoCIquOaSn-a4bM0DvWQoyAvkq9GcRGkkk-pi_AYcUMq/s16-no/khach.png); }

Chúc các bạn thành công :) nguồn sauciu blog

Xem bài viết trên phiên bản di động