Kumpulan CSS Threaded Comments Blogger

Bismillah. Alhamdulillah. Kumpulan CSS Threaded Comments Blogger. Prolog dulu ya hahaxD. Sebenarnya sih ini waktunya buat saya belajar ms Word sama ms Excel buat perwakilan lomba dari SMP saya sendiri yang dimulai lombanya 2 hari lagi, hari selasa *degss. Waktu liburan kemaren2 sebenarnya dirumah, tapi keganggu suasana libur jadi maen blog *wkwkw. Orangnya anehkan, mau lomba aja malah maen blog terus, padahal juga gak update postingan *cupllaaakkk. Udah lah, cukup prolognya, gak ada funn funnyaxD.

Sebelumnya pernah saya posting cara membuat threaded comments. Kumpulan CSS Threaded Comments Blogger. Style komentar, komentar threaded blogger. Maksudnya style design tampilan lebih keren minimalist di komentar komentar diblog agan *membingungkan tp sulit diungkapkan. Yap, udah tau maksud sayakan, kalau gak tau coba cari tau dari maksud kata2 saya diatasxD. Kalau tetep gak tau, mending baca deh kode CSS nya *wwkwk.

CSS Threaded Comments Blogger - From Blog.Kangismet.net

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

CSS Threaded Comments Blogger - From System of Blog

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

CSS Threaded Comments Blogger - From DTE:]

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  color:rgb(51,51,51);
}

.comments .comments-content a {
  color:#3B5998 !important;
}

.comments h2,
.comments h3,
.comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 10px;
  border-top:1px solid #e9e9e9;
  border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
  margin:0 0 0;
  padding:0 0 0;
  border:none;
  background:transparent;
}

.comments .comment .comment-header {
  margin-bottom:4px;
}

.comments .comment .comment-header .datetime a {
  color:#808080 !important;
}

.comments .comment .comment-actions a {
  padding-right:5px;
}

.comments .thread-toggle .thread-arrow {
  width:7px;
  height:7px;
  padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {
  margin:0 0 0 60px !important;
}

.comments .comment .comment-thread.inline-thread {
  margin:7px 0 0 22px;
}

.comments .comment .comment-thread.inline-thread ol {
  margin:7px 0 10px !important;
}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
  width:32px;
  height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
  margin:0 0 0 40px !important;
}

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

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;
}

.comments .comment .comment-thread.inline-thread .comment:last-child {
  border-left:2px solid #A8B2CE !important;
}

Kumpulan CSS Threaded Comments Blogger - From Obachti 95

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

Kumpulan CSS Threaded Comments Blogger - Template Responsive Under-88

.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 ⇓ ⇓]

Kumpulan CSS Threaded Comments Blogger - Blog Bamz

.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://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/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;
}}

Cara memasangnya mudah kok, masuk ke editor template. Cari kode kurang lebih kerangkanya begini :

<b:includable id='threaded_comment_css'>
<style>

..
....
.......
.........
............
<!-- Kode yang harus diganti -->
............
.........
......
...
.

</style>
</b:includable>

Ganti semua kode yang diapit seperti kerangka diatas, dan ganti pilihan CSS yang anda pilih diatas.

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

Demikain post kali ini, sekain terimakasih. Alhamdulillah :)