Macam Form Threaded Comments

Threaded comment adalah sebuah fitur komentar atau form komentar yang secara interaktif berfungsi untuk memudahkan admin dan pengunjung blog dalam membuat dan membalas komentar yang masuk ke blog dengan memakai tombol Reply, Sehingga komentar balasan sobat tidak akan masuk di komentar paling akhir atau paling bawah di dalam postingan, akan tetapi komentar sobat akan muncul tepat dibawah komentar yang ingin anda balas. Gimana.., pada bingung? dari pada bingung kita langsung saja lihat kumpulan berbagai macam Threaded Comment yang beredar di dunia maya internet dibawah ini :

Contoh 1 : Threaded Comments Blogger 

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  margin-bottom:16px;
  font-weight:normal;
  text-align:left;
  line-height:1.4em;
}

.comments .comment .comment-actions a {
  display:inline-block;
  margin:0;
  padding:1px 6px;
  border:1px solid #C4C4C4;
  border-top-color:#E4E4E4;
  border-left-color:#E4E4E4;
  color:#424242 !important;
  text-align:center;
  text-shadow:0 -1px 0 white;
  text-decoration:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  background:#EDEDED;
  background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );
  background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );
  font:11px/18px sans-serif;
  padding:2px 8px;
  margin-right:10px;
}

.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#fff;
  border:1px solid #5AB1E2;
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
  background:#EBF5FE;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.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;
}

.comments .comments-content .user a {
  color:#2D5E7B;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
}

.comments .comments-content .icon.blog-author {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  color:#999999;
  float:right;
  font-size:11px;
  text-decoration:none;
}

.comments .comments-content,.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {
  background-color:#F4F4F4;
  border:thin solid #E6E6E6;
  margin-bottom:5px;
  padding:5px;
}

.comments .comments-content .comment-content {
  text-align:none;
}

.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 {
  cursor:pointer;
}

.comments .continue a {
  display:inline-block;
  margin:0;
  padding:1px 6px;
  border:1px solid #C4C4C4;
  border-top-color:#E4E4E4;
  border-left-color:#E4E4E4;
  color:#424242 !important;
  text-align:center;
  text-shadow:0 -1px 0 white;
  text-decoration:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  background:#EDEDED;
  background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );
  background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );
  font:11px/18px sans-serif;
  padding:2px 8px;
  margin-right:10px;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.comments .thread-toggle .thread-arrow {
  display:inline-block;
  height:6px;
  width:7px;
  overflow:visible;
  margin:0.3em;
  padding-right:4px;
}

.comments .thread-expanded .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  background-image:url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");
  background-position:center center;
  background-repeat:no-repeat;
  float:left;
  width:36px;
  max-height:36px;
  margin:0;
  outline:1px solid #FFFFFF;
  padding:3px;
  vertical-align:middle;
  overflow:hidden;
  border:1px solid #DDDDDD;
}

.comments .avatar-image-container img {
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
}

/* Responsive styles. */
@media screen and (max-device-width:480px) {
.comments .comments-content .comment-replies {
  margin-left:0;
}}

 

Contoh 2 :  Threaded Comments Blogger

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:13px;
  margin-bottom:16px;
  overflow:auto;
}

.comments .comment .comment-actions a {
  float:right;
  display:inline-block;
  margin:5px 0 0 5px;
  padding:1px 6px;
  border:1px solid;
  color:black !important;
  text-align:center;
  text-decoration:none;
  background:#DD0;
  font:11px/18px sans-serif;
  border-color:transparent black black black;
}

.item-control {
  display:inline;
}

.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:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:36px;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.comments .comments-content .comment:last-child {
  padding-bottom:0;
}

.comments .comments-content .comment-body {
  position:relative;
}

.comments .comments-content .user {
  font-size:14px;
  color:#666666 !important;
  text-decoration:none;
}

/* Style Komentar Author */
.comments .comments-content .icon.blog-author {
  display:inline-block;
  margin:0 0 -4px 6px;
  position:absolute;
  top:0;
  right:0;
  background-color:#39A;
  width:100%;
  height:100%;
  z-index:-1;
}

/* AKhir style Komentar Author */
.comments .comments-content .datetime {
  font-size:10px;
  color:#999;
  text-decoration:none;
}

.comments .comments-content .datetime a {
  float:right;
}

.comments .comments-content .comment-header {
  margin:0 0 8px;
  border:thin solid #E6E6E6;
  background-color:#dff0fa;
  background-color:rgba(223,240,250,0.3);
  padding:5px;
}

.comments .comments-content .comment-content {
  margin:0 0 8px;
  padding:5px;
  border:thin solid #E6E6E6;
  background-color:#F4F4F4;
  background-color:rgba(244,244,244,0.5);
  line-height:21px;
}

.comments .comments-content .comment-content {
  text-align:justify;
  line-height:1.5;
}

.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 {
  cursor:pointer;
  border:1px solid #666;
  color:#424242 !important;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  font:normal 11px/18px sans-serif;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  background:rgb(196,191,39);
  background:-webkit-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-moz-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-o-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-ms-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27',endColorstr='#ede980',GradientType=0 );
}

.comments .continue a {
  display:block;
  color:black;
  padding:2px 5px;
}

.comments .continue a:hover {
  text-decoration:none !important;
  background:#ccc;
  background:-webkit-gradient(linear,left top,left bottom,color-stop(.2,#eeeeee),color-stop(1,#cccccc));
  background:-webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.comments .thread-toggle .thread-arrow {
  display:inline-block;
  height:6px;
  width:7px;
  overflow:visible;
  margin:0.3em;
  padding-right:4px;
}

.comments .thread-expanded .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  width:36px;
  max-height:36px;
  overflow:hidden;
  padding:0;
  margin-left:10px;
  margin-top:2px;
}

.comments .avatar-image-container img {
  width:36px;
}

img[src$="http://img1.blogblog.com/img/anon36.png"] {
  display:none;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
  padding:5px;
  background:#68F;
  border:1px solid #E4E4E4;
  z-index:99;
}

/* Responsive styles. */
@media screen and (max-device-width:480px) {
.comments .comments-content .comment-replies {
  margin-left:0;
}}

 

 
Contoh 3 : Threaded Comments Blogger 

.comments .comments-content .icon.blog-author {
  background-repeat:no-repeat;
  background-image:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURh1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

.comments .comment-thread.inline-thread {
  background-color:transparent;
}

.comments .continue {
  border-top:2px solid #000000;
}

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  largin-bottom:16px;
  font-family:Verdana;
  font-weight:normal;
  text-align:left;
  $0D
line-height:1.4em;
}

.comments .continue a,.comments .comment .comment-actions a {
  display:inline;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  padding:2px 5px;
  text-decoration:none;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  color:#FFF;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  margin-right:10px;
  border:1px solid #3079ED;
  background:#0066FF;
  background:-webkit-gradient(linear,left top,left bottom,from(#0099FF),to(#009999));
  background:-moz-linear-gradient(top,#0099FF,#009999);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF',endColorstr='#009999');
}

.comments .continue a:hover,.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#0099FF;
  background:-webkit-gradient(linear,left top,left bottom,from(#009999),to(#0099FF));
  background:-moz-linear-gradient(top,#009999,#0099FF);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999',endColorstr='#0099FF');
}

.comments .continue a:active,.comments .comment .comment-actions a:active {
  position:relative;
  top:1px;
  background:-webkit-gradient(linear,left top,left bottom,from(#0066FF),to(#0099CC));
  background:-moz-linear-gradient(top,#0066FF,#0099CC);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF',endColorstr='#0099CC');
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em 0 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0 0 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
}

.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom:0;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}

.comments .comments-content .comment-body {
  position:rel`tive;
}

.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color:#444;
}

.comments .comments-content .user a:hover {
  text-decoration:none;
  color:#555;
}

.comments .comments-content .icon.blog-author {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  largin-left:6px;
  color:#999;
  font-style:italic;
  font-size:11px;
  float:right;
}

.comments .comments-content .comment-content {
  font-family:Arial,sans-serif;
  font-size:12.5px;
  line-height:19px;
}

.comments .comments-content .comment-content {
  font-family:Arial,sans-serif;
  font-size:12.5px;
  line-height:19px;
  text-align:none;
  margin:15px 0 15px;
}

.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}

.comments .comments-replybox {
  border:nnne;
  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 .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.colments .thread-toggle {
  display:inline-block;
}

.comments .thread-toggle .thread-arrow {
  display:inline-block;
  height:6px;
  width:7px;
  overflow:visible;
  margin:0.3em;
  padding-right:4px;
}

.comments .thread-expanded .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  overflow:hidden;
  backgrnund:#fefefe;
  -webkit-box-shadow:0 1px 1px #ccc;
  -moz-box-shadow:0 1px 1px #ccc;
  box-shadow:0 1px 1px #ccc;
}

.comments .avatar-image-container img {
  -moz-border-radius:125px;
  -webkit-border-radius:125px;
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
  padding:15px 20px 15px 20px;
  background:#F7F7F7;
  border:1px solid #E4E4E4;
  overflow:hidden;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-image:initial;
}

 
Contoh 4 : Threaded Comments Blogger 

.comment-form {
  clear:both;
  max-width:100%;
}

.comments {
  clear:both;
  margin:10px !important;
}

.comments a:link,.comments a:hover,.comments a:visited {
  color:#4F97BD!important;
}

.comment-actions a,#blog-pager a,.jump-link a {
  margin:0 5px;
  cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
  color:#444;
  font:bold 11px Arial,Sans-Serif;
  text-decoration:none;
  outline:none;
  vertical-align:middle;
}

.comments .avatar-image-container {
  float:left;
  overflow:visible !important;
  width:auto !important;
}

.comments .avatar-image-container img {
  border:4px solid transparent !important;
  border-radius:4px !important;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  box-shadow:0 0 2px rgb(0,0,0,0);
  -moz-box-shadow:0 0 2px rgb(0,0,0,0);
  -webkitbox-shadow:0 0 2px rgb(0,0,0,0);
  margin:0;
  max-width:40px;
  padding:0;
}

.comments .thread-toggle {
  margin-bottom:10px;
}

.comments .comment-block {
  background:#FFF !important;
  border:1px dotted #CCC !important;
  margin-left:60px;
  padding:10px 15px;
  position:relative;
}

.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:60px;
}

.comments .comment-thread.inline-thread .comment {
  margin:0 0 5px 30%; /* Level 6+ */
padding:10px 15px;
  color:#000;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {
  margin:0 0 5px 25%;
}

/* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {
  margin:0 0 5px 20%;
}

/* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {
  margin:0 0 5px 15%;
}

/* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {
  margin:0 0 5px 10%;
}

/* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {
  margin:0 0 5px 5%;
}

/* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {
  margin:0 0 5px 0%;
}

/* Level 1 */
.icon.blog-author {
  background:transparent;
  border-width:8px;
  border-color:transparent transparent transparent seaGreen;
  border-style:solid;
  width:0!important;
  height:0!important;
  position:relative;
}

[UPDATE ⇓ ⇓]

Contoh 5:  Threaded Comments Blogger

.comments {
  clear:both;
  marfin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  margin-bottom:16px;
  font-family:Verdana;
  font-weight:normal;
  text-align:left;
  line-height:1.4em;
}

.comments .comment .comment-actions a {
  background:#1F9EE5;
  cursor:pointer;
  color:#ffffff;
  padding:2px 3px;
  margin-right:10px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  font:9px sans-serif;
  border:1px solid #1F9EE5;
}

.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#5AB1E2;
  border:1px solid #5AB1E2;
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
  background:#EBF5FE;
  border:1px dotted #DDD;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.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;
}

.comments .comments-content .icon.blog-author {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8OEh55xX0P9wZiJ2d5jQXhT0Z_HouImP8YGU4A81X-ZxBtlH71BuWhGiFHK0tgduoCqIIa67pNWb7i1YmOZNaI7a8_Tgltxy0E0ZlXsGb1SkUdrW06YsJVsA28dhKLTMGdP4IiparmcO0/h80/icon_clock.gif) no-repeat;
  margin-left:6px;
  padding-left:20px;
  font-size:10px;
  float:right;
}

.comments .comments-content .comment-header,.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comments .comments-content .comment-content {
  text-align:none;
}

.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 .commdnt-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 {
  cursor:pointer;
}

.comments .continue a {
  display:block;
  padding:0.5em;
  font-weight:bold;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.comments .thread-toggle .thread-arrow {
  display:inline-block;
  height:6px;
  width:7px;
  overflow:visible;
  margin:0.3em;
  padding-right:4px;
}

.comments .thread-expanded .thread-arrow {
  background:url("
  data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC"
  ) no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("
  data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg=="
  ) no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  width:36px;
  max-height:36px;
  overflow:hidden;
}

.comments .avatar-image-container img {
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
}

/* Responsive styles. */
@media screen and (max-device-width:480px) {
.comments .comments-content .comment-replies {
  margin-left:0;
}}

Proses  memasang script kode diatas adalah, masuk ke editor template. Cari kode seperti dibawah ini :

<b:includable id='threaded_comment_css'>
<style>
............
<!-- Kode yang harus diganti -->
............
</style>
</b:includable>

Ganti semua kode antara <b:includable id='threaded_comment_css'>.....</b:includable>, dan ganti pilihan CSS yang anda pilih diatas.

Apabila kode seperti kerangka seperti diatas tidak, copy paste CSS Threaded Comments pilihan agan diatas kode ]]></b:skin>.
Apabila tombol hapusnya hilang bisa copas css : .item-control {display: inline;} diatas kode ]]></b:skin>

Demikain posting cara memasang Threaded Comments Blogger di blogger, semoga bermanfaat, sekain terimakasih. Wassalam