Membuat Green Lava Threaded Comment DI Blog
Ditulis oleh: Ditulis pada: April 15, 2022
Kotak komentar berikut ini memiki nuansa berwarna hijau, yah dengan tapilan kolom komentar berwarna hijau ini membuat kotak komentar anda lebih menarik untuk dilihat pengunjung blog anda. Ok sobat berikut adalah css kotak komentar seperti ini.
CSS
.comments {padding: 30px 1em 0;clear: both;margin: 0 1em 1em;background: #FFF;border: 1px solid #DADADA;}
.comments ol{list-style:none;counter-reset:trackit}
.comments ol li {list-style:none;counter-increment:trackit}
.comments ol li:before {
content: counters(trackit,”.”);position: absolute;right: 1.5em;color: #6CB61A;font-size: 24px;background: rgba(133, 206, 53, 0.4);border-radius: 50%;-moz-border-radius: 50%;
padding: 1px 9px;}
.comments .comments-content .comment-replies .comment-thread ol li:before {
content: counters(trackit,”.”);position: absolute;right: 2.5em;color: rgba(1, 111, 1, 0.34);font-size: 24px;
background: rgba(0, 0, 0, 0);
border-radius: 0%;-moz-border-radius:0%;}
.comments h4 { font-size: 25px; line-height: 30px; padding: 0; text-transform: capitalize; }
.comments .avatar-image-container {float: left;max-height: 65px;overflow: hidden;width: 65px;max-width: 65px;}
.comments .avatar-image-container img {max-width: 65px;max-height: 65px;min-height: 65px;min-width: 65px;}
.comments .comment-block {margin-left: 5em;position: relative;word-wrap: break-word;}
.comments .comments-content .user {font-style: normal;font-weight: bold;background: #85CE35;padding: 1px 5px;font-size: 14px;}
.comments .comments-content .user a {
color: #FFF;}
.comments .comments-content .icon.blog-author {display: none;}
.comments .comments-content .datetime {margin: 0;background: rgba(133, 206, 53, 0.25);padding: 1px 5px;font-size: 14px;}
.comments .comments-content .datetime a{color:#6CB61A}
.comments .thread-toggle {
display: none;}
.comments .comments-content .comment-header {margin: 0 0 8px -2em;overflow: overlay;position: relative;}
.comments .comments-content .comment-replies .comment-thread ol li {border-top: 2px solid #86B15E;border-bottom:0px!important;background: rgba(100, 201, 22, 0.1);padding: 10px;}
.comments .comments-content li.comment {
border-bottom: 2px solid #86B15E;
}
.comments .comments-content .comment:last-child {border-bottom: 2px solid #86B15E;padding-bottom: 0;
}
Screenshot :
Sekian tutorial blog untuk saat ini silahkan lihat artikel terbaru anisuka lainnya.
