Tiếp tục mình sẽ viết CSS cho khung bình luận đẹp hơn sử dụng Font Awesome 5 Free.
Đầu tiên Thêm Font trước thẻ đóng </head> hoăc trước </body> đều được.
<script> //<![CDATA[ function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css"); //]]> </script>
Tiếp theo thêm CSS trong thẻ <b:skin>
/* Comment css */ #comments{float:left;width:100%;display:block;clear:both;padding:20px;margin:0;margin-top:20px;background:#fff} #comments h3{margin-bottom:20px} .comment-form h4{display:none} .comments-system-facebook #comments{width:100%;margin:0} .comments .comments-content{float:left;width:100%;margin:0} .comments .comment-content{display:block;font-size:14px;color:#000);line-height:1.6em;margin:12px 0 0} .comments .comment-content>a:hover{text-decoration:underline} .comment-thread .comment{position:relative;padding:20px;margin:20px 0 0;list-style:none;border:1px solid #efeaea;border-radius:4px} .comment-thread ol{padding:0;margin:0} .toplevel-thread ol>li:first-child{margin:0} .toplevel-thread ol>li:first-child>.comment-block{padding-top:0;margin:0;border:0} .comment-thread ol ol .comment{background-color:rgba(155,155,155,0.08);border:0} .comment-thread ol ol .comment:hover{box-shadow:unset} .comment-thread ol ol .comment:before{content:'\f3bf';position:absolute;left:-25px;top:-5px;font-family:'Font Awesome 5 Free';font-size:16px;color:var(--border-color);font-weight:700;transform:rotate(90deg);margin:0} .comments .comment-replybox-single iframe{padding:0 0 0 45px;margin:20px 0 0} .comment-thread .avatar-image-container{position:absolute;top:20px;left:20px;width:35px;height:35px;overflow:hidden;border-radius:50%;box-shadow:0 2px 5px -3px rgba(155,155,155,0.15)} .avatar-image-container img{width:100%;height:100%} .comments .comment-header{padding:0 0 0 45px} .comments .comment-header .user{display:inline-block;font-size:16px;color:#000;font-style:normal;font-weight:700;margin:0 0 3px} .comments .comment-header .user a{color:#000} .comments .comment-header .user a:hover{color:#fc5356} .comments .comment-header .icon.user{display:none} .comments .comment-header .icon.blog-author{display:inline-block;font-size:12px;color:#efeaea;font-weight:400;vertical-align:top;margin:-3px 0 0 5px} .comments .comment-header .icon.blog-author:before{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:400} .comments .comment-header .datetime{display:block;line-height:1;margin:0} .comment-header .datetime a{font-size:10px;color:#000;padding:0} .comments .comment-actions{display:block;margin:12px 0 0} .comments .comment-actions a{display:inline-block;font-size:13px;color:#000;font-weight:400;font-style:normal;padding:0;margin:0 15px 0 0} .comments .comment-actions a:hover{color:#fc5356} .item-control{display:none} .loadmore.loaded a{display:inline-block;border-bottom:1px solid rgba(155,155,155,.51);text-decoration:none;margin-top:15px} .comments .continue{display:none} .comments .comment-replies{padding:0 0 0 45px} .thread-expanded .thread-count a,.loadmore{display:none} .comments .footer,.comments .comment-footer{float:left;width:100%;font-size:13px;margin:0} .comment-form{float:left;width:100%;margin:0} p.comments-message{display:none;float:left;width:100%;font-size:12px;color:#000;font-style:italic;padding:0 0 10px;margin:0 0 20px;border-bottom:1px solid #000} .no-comments p.comments-message{padding:0;margin:0 0 20px;border:0} .comments-system-blogger p.comments-message{display:block} p.comments-message>a{color:#000} p.comments-message>a:hover{color:#fc5356} p.comments-message>em{color:#ff3f34;font-style:normal} .comment-form>p{display:none} p.comment-footer span{color:#fc5356} p.comment-footer span:after{content:'\002A';color:#d63031} .comment-content .responsive-video-wrap{position:relative;width:100%;padding:0;padding-top:56%} .comment-content .responsive-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%} .comments .comment-replybox-thread iframe{margin:30px 0 0} #show-comment-form,.comments #top-continue a{float:left;width:100%;height:36px;background-color:rgba(155,155,155,0.08);color:rgba(155,155,155,0.8);font-size:14px;font-weight:500;line-height:36px;text-align:center;padding:0 30px;margin:30px 0 0} .no-comments #show-comment-form{margin:5px 0 0} #show-comment-form:hover,.comments #top-continue a:hover{background-color:#fc5356;color:#fff} .comment-form-visible .comments .comment-replybox-thread,.comment-form-visible .no-comments .comment-form{display:block} .comments .comment-header .user a:after{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:400;margin-left:5px;color:#426694;font-size:12px;margin-top:0;float:right}
[/blog]
Xin chào admin!
Trả lờiXóaAd cho mình hỏi cách chèn comment này vào blogger như thế nào?
Thanks AD :D
comment blogger mặc định nó có mà b
XóaBình thường mặc định có nhưng của mình tem nó không có bình luận mặc định nên mình muốn xin cấu trúc chèn vào blog!Cảm ơn AD
XóaMặc định để gọi khung cmnt thì dùng thẻ này
Xóa[code] [/code]
Xóa:D cmt nó ko hiện, xem cmt ở phần facebook
Xóaban căng thật của mình cung có thẻ ở cmt face luôn mà không hiểu sao k hiện bình luận!
XóaXem thử trong bài viết có mục tùy chọn đó - bật hiển thị comment lêm xem sao
XóaNice tips
Trả lờiXóa