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/AVvXsEiMuihUY8WYE2iYgbYmrEW1PzoA2nqiCRFw_qoWlezNP_bQUeSSQ164PcmNqpDj2eI3K8I02nBexHn1uOOQoELapKHdiNrvJmuui8oh9Kp_o4jNAibyqh7ee7Bwm60EqN2myXKPL8ZtZFPY/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..

Judul: Thread Comment Stylish Light Clean With CSS; Ditulis oleh Unknown; Rating Blog: 5 dari 5