Cara Modifikasi CSS Thread Comment

Artikel saya sebelumnya tentang Thread Comment Seperti Komentar FB, yang tampilannya masih polos atau tanpa warna background artinya warna latar Komentar adalah transparan disamping jarak antara Komentar sedikit agak longgar, bagi saya pribadi sangat perlu di adakan perubahan  

Tampilan Thread Comment aslinya :

• Tanpa warna latar belakang [background]
• Komentar Admin [Replies dan Reply] dipinggir kanan agak masuk ke kiri seperti pinggir kiri Komentar

Cara Memodifikasi Thread Comment :

• Masuk ke Account Blogger dengan ID kawan
• Pada Perancang Template pilih Edit HTML
• Beri tanda ceklist  disamping Expand Template Widget 
• Sebaiknya Simpan dulu Template kawan
• Cari kode <b:includable id='threaded_comment_css'> 

Kalau sudah ketemu mulai 

<b:includable id='threaded_comment_css'>
<style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
sampai dengan ...............
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

Hapus dan Ganti dengan 

Hasil Modifikasi Blog Creation

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
}
.comments .comment .comment-actions a {
  padding: 5px  5px 0 0;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: -2px;
  margin-left: 36px;
width: 501px;}
.comments .comments-content .comment {
  margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
  padding-top:1px;
}
.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: 14px;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0;
}
.comments .comments-content .datetime {
float: right;
  margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin: 0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
background: transparent;
  cursor: pointer;
text-align: right;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
margin-left: 48px;
  font-weight: bold;
background: #95cafF;
color: #F00;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: inline-block;
}
.comments .thread-toggle {
background: #95CAFF;
  display: inline-block;
padding: 3px 0;
width: 100%
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 0;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
background: #95CAFF;
  margin-left: 48px;
padding: 5px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

Khusus untuk width: 501px; adalah lebar untuk Replies dan Reply silahkan disesuaikan dengan lebar Komentar Blog kawan atau bisa dihilangkan
Jangan lupa simpan Template kawan