Tạo khung, phân cấp cho các comments blogspot!

Đây là khung comment phân cấp phù hợp với các mẫu template simple của blogger, ở đây thêm mục phân cấp. Tuy là threaded comment mặc định của Blogger nên chỉ được tối đa là 1 cấp nhưng đã có cải tiến một chút nên có thể phân được nhiều cấp,cụ thể phân được 6 cấp(vậy có lẽ cũng là đủ).

Bài này giới thiệu 2 loại khung comment:phân 1 cấp và phân nhiều cấp, ai thích xài loại nào thì sử dụng code tương ứng với loại đó.

Tạo khung, phân cấp comments(nhận xét) cho các comments của blogspot!

Trước tiên, hãy lưu lại một bản template gốc để đề phòng bất trắc. Sau đó vào phần chỉnh sửa HTML, chọn mở rộng mẫu, tìm các đoạn sau:

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

Thay thế tất cả các đoạn tìm được bằng đoạn sau:

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

Lưu ý- Thay tất cả các đoạn tìm được

A- Phân 1 cấp:
Chèn code sau vào trước thẻ ]]></b:skin>

.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/AVvXsEh22Cq6eatb9k7Tozjnuy84sWlYN6XBNA4-9VT8K8x7BB4M05HbzKdCG9-rN_wEEwXmwIuZowxA4vPQUPIoTY0hxErEz_AG2_Xr758wZEwT1Ttaq7Ha5RkcN7NraMUOAfaHEelD5znxJuM/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}}Save template lại và test.
B- Phân nhiều cấp:Chèn code sau vào trước thẻ ]]></b:skin>.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/AVvXsEh22Cq6eatb9k7Tozjnuy84sWlYN6XBNA4-9VT8K8x7BB4M05HbzKdCG9-rN_wEEwXmwIuZowxA4vPQUPIoTY0hxErEz_AG2_Xr758wZEwT1Ttaq7Ha5RkcN7NraMUOAfaHEelD5znxJuM/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}}.comments .thread-toggle {margin-bottom:10px;}.comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px}.comments .comment-thread.inline-thread .comment {margin:0px 0px 5px 30%}.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%}.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%}.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%}.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%}.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%}.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%}

Save template lại và test.

Tạo màu nền nổi bật cho comments của admin Blogspot

Đối với những blogspot vẫn còn sử dụng khung comments mặc định của blogger mà cụ thể vẫn sử dụng template Simple với css mặc định không sử dụng code bên trên thì có thể tạo màu nền cho comments của admin blog khác với comments của khách truy cập bằng cách thêm vào trước thẻ </body> đoạn javascript sau:

<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('background','#FFE4B5 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

- #FFE4B5 là màu nền comments bạn có thể thay đổi cho hợp sở thích.
Chúc thành công!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait