Thread Comment Stylish Light Clean With CSS

Thread Comment Stylish Light Clean With CSS
Thread Comment Stylish Light Clean With CSS, itulah saya beri nama. Thread Comment hasil modifikasi dengan css, seperti yang kita ketahui unutk memperganteng blog banyak di lakukan para blogger, seperti modifikasi tampilan blog, menambah widget yang keren-keren dan yang tidak kalah penting yaitu modifikasi tampilan thread comment sehingga tampilannya lebih balance atau serasi dengan templatenya.. Untuk pemasangan thread comment ini caranya mudah, hanya menambahkan CSS thread comment ini lalu menghapus css thread comment yang lama.
Berikut cara memasang Thread Comment Stylish Light Clean:
1. Login akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini diatas kode ]]></b:skin>
#comments h4{margin:0;font-size:150%;margin-bottom:10px}
#comments-block .avatar-image-container.avatar-stock img { border-width:0; padding:1px }
#comments-block .avatar-image-container { height:40px; left:-45px; position:absolute; width:40px }
#comments-block.avatar-comment-indent { margin-left:45px; position:relative }
#comments-block.avatar-comment-indent dd { margin-left:0 }
iframe.avatar-hovercard-iframe { border:0 none; padding:0; width:25em; height:9.4em; margin:.5em }
.comments .comments-content { margin-bottom:16px }
.comments .comment .comment-actions a { background-color:#666; color:#fff; font-family:Segoe UI; font-size:12px; font-weight:bold; letter-spacing:normal; padding:3px 7px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:0 10px 0 -7px }
.comments .continue a:hover,.comments .comment .comment-actions a:hover { background-color:#c2c2c2; text-decoration:none }
.comments .comments-content .comment-thread ol { margin:20px 0 0 -10px; overflow:hidden }
.comments .comments-content .inline-thread { padding:0 }
.comments .comments-content .comment-thread { margin:0 0 0 -15px }
.comments .comments-content .comment-thread:empty { display:none }
.comments .comments-content .comment-replies { margin-left:0; margin-top:0 }
.comments .comments-content .comment,.comments .avatar-image-container { padding:4px }
.comments .comments-content .comment:first-child { padding-top:4px }
.comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0 }
.comments .comments-content .comment-body { position:relative }
.comments .comments-content .user { font-style:normal; font-weight:bold; font-size:15px; text-transform:capitalize; margin-bottom:-3px }
.comments .comments-content .icon.blog-author { display:inline-block; height:18px; margin:0 0 -4px 6px; width:18px }
.comments .comments-content .datetime { font-size:10px; margin-left:0; line-height:12px; display:block; margin-top:-5px; margin-right:10px }
.comments .comments-content .datetime a { color:#888 }
.comments .comments-content .datetime a:hover { text-decoration:none }
.comments .comments-content .comment-header { position:relative; min-height:37px; line-height:37px; padding-left:45px }
.comments .comments-content .comment-content { border:1px solid #ccc; padding:5px 10px; margin:17px 0 7px -9px; position:relative; background-color:#f7f7f7; color:black; font:normal 16px Calibri,Arial,Sans-Serif; height:auto; -moz-box-shadow:0 0 3px #e0e0e0; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px }
.comments .comments-content .comment-content:before { content:""; width:0; height:0; position:absolute; bottom:100%; left:20px; border-width:10px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent; display:block }
.comments .comments-content .owner-actions { position:absolute; right:0; top:0 }
.comments .comments-replybox { border:none; width:100% }
.comments .comment-replybox-single { margin-left:4px; margin-top:5px }
.comments .comment-replybox-thread { margin:5px 25px }
.comments .comments-content .loadmore a { display:block; padding:10px 16px; text-align:center }
.comments .thread-toggle { cursor:pointer; display:none }
.comments .continue { cursor:pointer; display:inline-block; margin:0 0 0 50px }
.comments .continue a { display:block; font-weight:bold }
.comments .comments-content .loadmore { cursor:pointer; margin-top:3em; max-height:3em }
.comments .comments-content .loadmore.loaded { max-height:0; opacity:0; overflow:hidden }
.comments .thread-chrome.thread-collapsed { display:none }
.comments .thread-toggle .thread-arrow {width:7px;height:7px;padding-right:4px;}
.comments .avatar-image-container { padding-left:0; margin:5px 10px 5px 0; max-height:48px; width:48px }
.comments .avatar-image-container img { border:3px solid #fff; max-width:44px; width:44px; border-radius:30px; display:block; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; box-shadow:0 1px 1px #aaa; -moz-box-shadow:0 1px 1px #aaa; -webkit-box-shadow:0 1px 1px #aaa }
.comments .comment-block { margin-left:0; position:relative }
.comments .comments-content .comment { list-style:none outside none; margin:0 13px 15px 50px }
#comment-editor { background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XFT-NTXymBIe9ACpdzCKDhekFzp2KEMZdVG9tL-ffFSsB0k43BpIkz2a9Rcmvv_lZjrY20dMFCxU6oIZRVw6oafyzy-xjgKigjgDHF4_7T_5pcK1v0YhYklQa-Qb0_qkTuc5sNOPiiiJ/s1600/loader.gif') no-repeat 50% 120px; width:100% !important }
.comment-form { width:100%; max-width:100% }
5. Simpan Template
Silahkan anda modifikasi lagi agar sesuai dengan 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.
 
Itulah pembahasan saya tentang Thread Comment Stylish Light Clean With CSS, semoga bermanfaat untuk anda. Selamat mencoba dan Semoga berhasil..

Posting Komentar

Catatan: (memasukan item pada 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.
Back to Top