Modifikasi ke-2 Css Thread Comments

Setelah sebelumnya saya memposting tentang Thread Comment Seperti Komentar Gaya FB dan Cara Memodifikasi Css Thread Comment, begitu juga dengan Cara Praktis Tampilkan Thread Comment, yang tampilannya masih standar, karena Css yang akan dimodifikasi tersebut sekarang sudah tidak ada lagi di Template Blog, dan karena ada beberapa Komentar menanyakan masalah ini, sayapun tak bisa menjawabnya hehehe :z

Kawan tahu apa sebabnya ? karena Thread Comment datang tanpa diundang dan hilangpun tanpa permisi hihihi memangnya Jaelangkung :O 

Okey cukup sekian intermesonya, karena sekarang saya akan mencoba berbagi dengan kawan Cara Memodifikasi Thread Comment yang hasilnya seperti Gambar disamping atau pada Komentar Blog ini :D 

• Caranya :
• Masuk ke Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTMl - Lanjutkan 
• Beri tanda cek pada  disamping Expand Template Widget 
• Cari  <b:include data='post' name='comments'/>  yang biasanya ada 4 pada 2 tempat, seandainya ada 3 tambahkan biar menjadi 4.   
• Ganti semuanya dengan : 

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

•  Selanjutnya Copas Script berikut diatas ]]></b:skin>

.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: center;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
margin: 0 340px 0 48px;
  font-weight: bold;
background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#7CA9C0');background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;
border: 1px solid #ccc;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
color: #FFF;
}
.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: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006400');background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;
border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
  display: inline-block;
padding: 3px 0;
width: 80px;
height: 20px;
text-align: center;
}
.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: rgb(99,147,193) none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(99,147,193)', endColorstr='rgb(207,231,250)');background:-moz-radial-gradient(top, rgb(99,147,193), rgb(207,231,250));background:-webkit-gradient(linear, left top, left bottom, from(rgb(99,147,193)), to( rgb(207,231,250))) no-repeat left top;
border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;
  margin-left: 48px;
padding: 5px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

• Jangan lupa simpan Template kawan 
• Text yang berwarna merah adalah lebar kotak Komentar, silahkan disesuaikan

Tambahan Penjelasan :

1. Komentar Blog lama yang ada akan kelihatan sejajar dipinggir kiri 
2. Untuk mendapatkan hasil yang sesuai dengan Gambar diatas silahkan kawan mencoba memberikan Komentar dengan Account lain [Anonim] yang selanjutnya kawan balas dengan Nama Admin Blog :r
3. Selamat memcoba dan berkreasi