Thread Comments Stylish Dark Edition dengan CSS

Pada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah saya modifikasi sesuai warna template yang gelap atau dark. Request dari mas Odhie Akbar. thread comment ini dari blog saya yang satu lagi http://boyrohman.blogspot.com. Contoh seperti gambar diatas.

langsung saja masuk tahap pemasangan, berikut cara pemasangannya:

Masuk ke Template » Edit HTML

Letakkan kode berikut ini di atas kode ]]></b:skin>.

#comments h4 {
margin:1em 0;
font-weight:bold;
line-height:1.3em;
text-transform:uppercase;
letter-spacing:.2em;}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
#comments h4{font-size:200%;text-transform:capitalize;margin:30px 0 10px}
.comments .avatar-image-container,.comments .avatar-image-container img{width:50px;height:50px;max-height:50px;max-width:50px;float:right;}
.comments .comment-block{margin-right:60px;margin-left:0}
.comments .comments-content .comment{background-color:#222;padding:10px;border:0px solid #CCC;box-shadow:0px 0px 3px black;border:1px solid #303030;-moz-box-shadow:0px 0px 3px black;border:1px solid #303030;-webkit-box-shadow:0px 0px 3px black;border:1px solid #303030;}
.comments .comments-content .inline-thread{margin:7px 0 10px !important;padding:5px;background-color:#333;border-radius:3px;-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
.comments .comments-content .inline-thread .comment:first-child{padding:10px}
.comments .comments-content .inline-thread .comment{background:#222;margin-bottom:5px}
.comments .comments-content .comment:last-child,.comments .comments-content .comment:first-child{padding:10px;border-bottom:0px solid #CCC}
.comments .thread-toggle{margin-bottom:10px}
.comments .comments-content .inline-thread ol{margin-left:0}
.comments .inline-thread .comment .avatar-image-container,.comments .inline-thread .comment .avatar-image-container img{width:40px;height:40px;float:left;}
.comments .comment .comment .comment-block{margin-right:0;margin-left:50px}
.comments .comment .comment-actions a{padding:4px 8px;background:#969696;color:white;margin-right:10px;display:block;float:left;box-shadow:0px 0px 3px black;border:1px solid #303030;-moz-box-shadow:0px 0px 3px black;border:1px solid #303030;-webkit-box-shadow:0px 0px 3px black;border:1px solid #303030;}
.comments .comment .comment-actions a:hover{text-decoration:none;background:#008DDD;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-bottom:1px solid #860000;box-shadow:0px 0px 3px black;-moz-box-shadow:0px 0px 3px black;-webkit-box-shadow:0px 0px 3px black;
transition:0.5s linear;
      -o-transition:0.5s linear;
      -ms-transition:0.5s linear;
      -moz-transition:0.5s linear;
      -webkit-transition:0.5s linear}
.comments .comments-content .comment-replies{margin-left:0}
.comments .thread-toggle{width:100%;text-align:right}
.comment-form{max-width:100%;margin:0 auto}
#comments h4#comment-post-message{font-size:150%}
.comments .comment-replybox-single #form-wrapper p{background-color:transparent;}
.comments .comment-replybox-single{margin-left:0}
.comment-actions{overflow:hidden;margin-top:20px;display:block}
.comments .comments-content .icon.blog-author{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5t3MtwkW_MvXgvaImCTu4yDLHX_NaF9f2z6Mp7MLJy5VigjPaZGdjtNPV2OWzHsfIKDLlYr7gGhmx7FEEEQ2c5u28G6co78P6NI5AYdswoV3e5L7wa1yEdGwr6K201vjs5NifVqrczI/s1600/author.png);display:block;width:36px;height:36px;position:absolute;top:-12px;right:-71px}
.comments .comments-content .inline-thread .icon.blog-author{right:-11px}
.comments .comments-content .user{float:left}
.comments .thread-toggle {
margin-bottom:10px;
#comments p a {display:none;}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Terakhir Simpan template

Silahkan anda modifikasi lagi dan sesuaikan dengan warna template anda.

Catatan:

Apabila thread comments anda sebelumnya sudah di modifikasi, lebih baik hapus CSS thread comment sebelumnya kemudian ganti dengan yang ini agar tidak terjadi error/acak-acakan pada thread comment.

Silahkan tanyakan jika ada yang tidak di mengerti.

Selamat mencoba dan semoga berhasil.

Judul: Thread Comments Stylish Dark Edition dengan CSS; Ditulis oleh Unknown; Rating Blog: 5 dari 5