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 HTMLLetakkan 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/AVvXsEj-4Ge_M3yaDTaamMGp7GWWqA7_GMBdGYDKlqRWHTlcKRe8bK50TaftorCulA3AvZY9jS-7PLeSrfXs7PQAxi1Tfrhz26tlx3w3GITgSrqzQ1qD6FQdHVy9kPXXajHWOXE1-H9F7R3AVVM/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.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.