Cara Membuat Thread Comment dengan CSS di Blog

CaraMembuat Thread Comment dengan CSS - Sebenarnya ini adalah Thread Comment yang sudah lama dibagikan oleh MDF-Blog. Menurut saya bentuk komentar seperti ini sangat cantik dan anda juga bisa dengan mudah memodifikasi Thread Comment dengan CSS ini. Caranya sangat mudah kok.

Langsung saja ya. Ikuti langkah-langkah berikut ini.

Langkah 1.

Login ke dashboard blogger anda. Pilih Template > Edit HTML

Cari kode ]]></b:skin> dan untuk mempermudah gunakan Ctrl+F atau F3

Letakkan kode css berikut ini tepat 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/AVvXsEgb6-VlXyMDMkYQto2NHB-v8ekFjM0rwKyOqDMxOwojY5MMIf3fO2ZxlSZVYCRMTBvJib1KCx11QD4mK4ZA-KBD713OD8a6Vz1X1Ln4bl7QcF5JgbIryJBLefpcIWZem4zfEv5-yb0ELpfQ/s1600/loader.gif')
no-repeat 50% 120px; width:100% !important }
.comment-form { width:100%; max-width:100%
}

Simpan template anda.

Selamat mencoba semoga berhasil. Jika ada keluhan silahkan tinggalkan komentar anda.