Green Lava Threaded Comment Theme For Bloggers. Ok sobat untuk anda yang suka mengotak-atik tampilan template blog anda maka berikut ini Socips akan membagikan CSS untuk mengganti tampilan kotak komentar di Blog Blogger.

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 seocips lainnya.
0 Komentar untuk "Membuat Green Lava Threaded Comment DI Blog"