CSS Style "Threaded Comments" Dark Shadow Transparent

Assalamu Alaikum Wr.Wb..

Pada kesempatan kali ini saya akan memberikan trik 'CSS Style "Threaded Comments" Dark Shadow Transparent' maksdnya disini kita akan merubah tampilan kotak komentar (Threaded Comments) dengan dengan memberikan Kode CSS sehingga tampilannya lebih menarik, dan sebelum kita mulai membuat'Nya disini saya akan memberikan 2 Mode Style Warna yaitu Merah dan Biru..!!






Baiklah sebelum kita mulai pastikan sobat sudah mengaktifkan Threaded Comments diblog, jika blum silahkan baca disini...

Nah jika sobat tertarik tuk membuat'Nya silahkan ikuti langkah-langkah berikut :

1.Login blogger.
2.Rancangan, Edit HTML (centang Expand Widget Templates) cari kode ]]></b:skin>
Dan Letakkan kode CSS berikut diatasnya :

Threaded Comments Style MERAH :>>

/* Blogger Threaded Comments Styles Merah */
#comments h4 {background:none repeat scroll 0 0 #D60000;display:inline;font-size:15px;color:#fff;line-height:40px;padding:10px;font-weight:bold;position:relative;}
#comments h4:after{
content:"";
position:absolute;bottom:-10px;left:10px;border-top:10px solid #D60000;border-right:10px solid transparent;width:0;height:0;line-height:0;}
.comments {clear:both;margin:3px 3px 3px 3px;
line-height:1em;width:ancho;color:#999;text-shadow:0 -1px 1px #000;font:normal 15px Terminal Dosis Light;}
.comment-header,.comments .comment .comment-actions.secondary-text a,.comments .continue a,.comment-replies,.comment-content,.PageList li.selected a {
background-color:rgba(0,0,0,.1);border:1px solid #1B1C20;border-top-color:rgba(255,255,255,0.04);
border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 2px 4px rgba(0,0,0,.5);-moz-box-shadow:0 2px 4px rgba(0,0,0,.5);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.5);
transition:all .15s ease-in-out;-moz-transition:all .15s ease-in-out;-webkit-transition:all .15s ease-in-out;transform-origin:50% 1px;-moz-transform-origin:50% 1px;-webkit-transform-origin:50% 1px;}
.comments .comments-content {font-size:14px;margin-bottom:16px;
font-weight:normal;text-align:left;line-height:1.3em;}
.comments .comment .comment-actions.secondary-text a,.comments .continue a
{
display:inline-block;white-space:nowrap;padding:0 1.5em;margin:0.1em;
font:normal 1em/2em PT Sans Narrow, Helvetica;text-decoration:none;
color:#D60000;}
.comments .comment .comment-actions.secondary-text a:hover,.comments .continue a:hover
{background-color:rgba(0,0,0,.3);}
.comments .comment .comment-actions.secondary-text a:active,.comments .continue a:active
{background-color:rgba(0,0,0,.1);}
.comments .comment .comment-actions.secondary-text a:before,.comments .continue a:before
{
background:rgba(0,0,0,.1);float:left;width:1em;text-align:center;font-size:1.5em;padding:0 .2em;
-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events:none;}
.comments .comment .comment-actions.secondary-text a:before
{margin:0 1em 0 -1em;}
.comments .continue a:before
{margin:0 1em 0 -.9em;}
.comments .comment .comment-actions.secondary-text a:before
{content: "\279C";}
.comments .continue a:before {content: "\271A";}
.comments .comments-content .comment-thread ol {
list-style-type:none;padding:0;text-align:none;}
.comments .comments-content .user {font-style:normal;font-weight:bold;color:#444;}
.comments .comments-content .user a {color:#D60000;font-size:14px;font-weight:bold;text-decoration:none;}
.comments .comments-content .icon.blog-author {
width:18px;height:18px;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;box-shadow:0 0 2px #D60000;-moz-box-shadow:0 0 2px #D60000;-webkit-box-shadow:0 0 2px #D60000;border:1px solid #D60000;
background:rgba(0,0,0,.3);display:inline-block;margin:0 0 -4px 6px;}
.comments .comments-content .datetime {
color:#555;float:right;font-size:11px;
text-decoration:none;}
.comments .comments-content .datetime a {
color:#444;}
.comments .comments-content .datetime a:hover {
color:#999;text-decoration:none;}
.comments .comments-content,.comments .comments-content .comment-content {
text-align:justify;margin:0 0 8px;}
.comment-header{margin:0;padding:10px;}
.comments .avatar-image-container {
background-image:url("http://1.bp.blogspot.com/-UO6cBpRZY8o/TzLlEMG7_yI/AAAAAAAAHPY/d1JewJY0EKU/s1600/default-avatar.png");
background-position:top center;background-repeat:no-repeat;
width:36px;height:36px;margin:0;padding:0;overflow:hidden;
float:left;margin-right:33px;display:block;
border:1px solid #D60000;background-color:rgba(155,155,155,0.50);-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
.comments .avatar-image-container:hover,
.comments .avatar-image-container img:hover{
border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;}
.comment-content{padding:10px;}
.comment-replies .comment-content{padding:10px;border-bottom:1px solid rgba(255, 255, 255, 0.04);border-radius:3px;-moz-border-radius:3px;
-webkit-border-radius:3px;}
.comment-block {margin-left:48px;position:relative;float:right:width:300px;}
.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;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

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

.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .continue {
  cursor: pointer;
}
.comments .comments-content .comment {
  margin-bottom:10px;
  padding-bottom:8px;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment:first-child {
  padding-top:10px;
}
.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 .comment-thread:empty {display:none;}
.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 .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
.comments .avatar-image-container img {width:36px;transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;}
.deleted-comment {display:none!important;}

/* comment-form and comment-editor style */
.comment-form, #comment-editor {background-color:rgba(0,0,0,.2);border:1px solid #222;border-top-color:#333;border-bottom-color:#151515;-moz-box-shadow:0 4px 8px rgba(0,0,0,.7);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.7);box-shadow:0 4px 8px rgba(0,0,0,.7);padding:15px;}
.comment-form, #comment-editor{width:95% !important;max-width:95% !important;}
.comment-form p {cursor:help;box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);position:relative;border:4px solid rgba(35,35,35,0.40);
padding:10px;font-size:14px;line-height:1.6em;color:#D60000;}
.comment-form p:hover {color:#bbb;background:rgba(15,15,15,0.70);}
.comment-form p::after, .comment-form p::before {top:100%;
border:solid transparent;content:" ";height:0;width:0;position:absolute;
pointer-events:none}
.comment-form p::before {border-top-color:rgba(214,0,0,0.55);border-width:15px;right:10%;margin-right:-26px}
.comment-form p::after {border-top-color:rgba(214,0,0,0.75);border-width:9px;right:10%;margin-right:-20px}
.comment-form a{color:#D60000;}
#comment-editor{opacity:0.4;}
#comment-editor:hover{opacity:2.2;}
#comment-editor, .comment-form p{transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;}

/* counter number merah */
.comments {counter-reset:number;}
.comments .comment {position:relative;}
.comments .comment:after {counter-increment:number;content:counter(number);
display:block;width:35px;height:35px;text-align:center;font:italic normal 18px/35px Times,Serif;color:#eee;position:absolute;top:0;right:0;-webkit-border-radius:100%;
-moz-border-radius:100%;border-radius:100%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);border:3px solid #ccc;background:rgba(214,0,0,0.55);}
.comments .comment .comment-thread.inline-thread {counter-reset:number;}
.comments .comment .comment-thread.inline-thread .comment:after {font-size:18px;
line-height:30px;width:30px;height:30px;}
.comments .comment:hover:after {background-color:rgba(5,5,5,0.45);border-color:rgba(214,0,0,0.45);color:#D60000;text-shadow:0 0 2px #D60000;}

Threaded Comments Style BIRU :>>

/* Blogger Threaded Comments Styles Biru */
#comments h4 {background:none repeat scroll 0 0 #319BED;display:inline;font-size:15px;color:#fff;line-height:40px;padding:10px;font-weight:bold;position:relative;}
#comments h4:after{
content:"";
position:absolute;bottom:-10px;left:10px;border-top:10px solid #319BED;border-right:10px solid transparent;width:0;height:0;line-height:0;}
.comments {clear:both;margin:3px 3px 3px 3px;
line-height:1em;width:ancho;color:#999;text-shadow:0 -1px 1px #000;font:normal 15px Terminal Dosis Light;}
.comment-header,.comments .comment .comment-actions.secondary-text a,.comments .continue a,.comment-replies,.comment-content,.PageList li.selected a {
background-color:rgba(0,0,0,.1);border:1px solid #1B1C20;border-top-color:rgba(255,255,255,0.04);
border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 2px 4px rgba(0,0,0,.5);-moz-box-shadow:0 2px 4px rgba(0,0,0,.5);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.5);
transition:all .15s ease-in-out;-moz-transition:all .15s ease-in-out;-webkit-transition:all .15s ease-in-out;transform-origin:50% 1px;-moz-transform-origin:50% 1px;-webkit-transform-origin:50% 1px;}
.comments .comments-content {font-size:14px;margin-bottom:16px;
font-weight:normal;text-align:left;line-height:1.3em;}
.comments .comment .comment-actions.secondary-text a,.comments .continue a
{
display:inline-block;white-space:nowrap;padding:0 1.5em;margin:0.1em;
font:normal 1em/2em PT Sans Narrow, Helvetica;text-decoration:none;
color:#319BED;}
.comments .comment .comment-actions.secondary-text a:hover,.comments .continue a:hover
{background-color:rgba(0,0,0,.3);}
.comments .comment .comment-actions.secondary-text a:active,.comments .continue a:active
{background-color:rgba(0,0,0,.1);}
.comments .comment .comment-actions.secondary-text a:before,.comments .continue a:before
{
background:rgba(0,0,0,.1);float:left;width:1em;text-align:center;font-size:1.5em;padding:0 .2em;
-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255, 255, 255, 0.03);
-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events:none;}
.comments .comment .comment-actions.secondary-text a:before
{margin:0 1em 0 -1em;}
.comments .continue a:before
{margin:0 1em 0 -.9em;}
.comments .comment .comment-actions.secondary-text a:before
{content: "\279C";}
.comments .continue a:before {content: "\271A";}
.comments .comments-content .comment-thread ol {
list-style-type:none;padding:0;text-align:none;}
.comments .comments-content .user {font-style:normal;font-weight:bold;color:#444;}
.comments .comments-content .user a {color:#319BED;font-size:14px;font-weight:bold;text-decoration:none;}
.comments .comments-content .icon.blog-author {
width:18px;height:18px;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;box-shadow:0 0 2px #319BED;-moz-box-shadow:0 0 2px #319BED;-webkit-box-shadow:0 0 2px #319BED;border:1px solid #319BED;
background:rgba(0,0,0,.3);display:inline-block;margin:0 0 -4px 6px;}
.comments .comments-content .datetime {
color:#555;float:right;font-size:11px;
text-decoration:none;}
.comments .comments-content .datetime a {
color:#444;}
.comments .comments-content .datetime a:hover {
color:#999;text-decoration:none;}
.comments .comments-content,.comments .comments-content .comment-content {
text-align:justify;margin:0 0 8px;}
.comment-header{margin:0;padding:10px;}
.comments .avatar-image-container {
background-image:url("http://1.bp.blogspot.com/-UO6cBpRZY8o/TzLlEMG7_yI/AAAAAAAAHPY/d1JewJY0EKU/s1600/default-avatar.png");
background-position:top center;background-repeat:no-repeat;
width:36px;height:36px;margin:0;padding:0;overflow:hidden;
float:left;margin-right:33px;display:block;
border:1px solid #319BED;background-color:rgba(155,155,155,0.50);-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;}
.comments .avatar-image-container:hover,
.comments .avatar-image-container img:hover{
border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;}
.comment-content{padding:10px;}
.comment-replies .comment-content{padding:10px;border-bottom:1px solid rgba(255, 255, 255, 0.04);border-radius:3px;-moz-border-radius:3px;
-webkit-border-radius:3px;}
.comment-block {margin-left:48px;position:relative;float:right:width:300px;}
.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;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

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

.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .continue {
  cursor: pointer;
}
.comments .comments-content .comment {
  margin-bottom:10px;
  padding-bottom:8px;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment:first-child {
  padding-top:10px;
}
.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 .comment-thread:empty {display:none;}
.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 .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
.comments .avatar-image-container img {width:36px;transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;}
.deleted-comment {display:none!important;}

/* comment-form and comment-editor style */
.comment-form, #comment-editor {background-color:rgba(0,0,0,.2);border:1px solid #222;border-top-color:#333;border-bottom-color:#151515;-moz-box-shadow:0 4px 8px rgba(0,0,0,.7);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.7);box-shadow:0 4px 8px rgba(0,0,0,.7);padding:15px;}
.comment-form, #comment-editor{width:95% !important;max-width:95% !important;}
.comment-form p {cursor:help;box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-moz-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);-webkit-box-shadow:inset 0 3px 8px rgba(15,15,15,0.70);position:relative;border:4px solid rgba(35,35,35,0.40);
padding:10px;font-size:14px;line-height:1.6em;color:#319BED;}
.comment-form p:hover {color:#bbb;background:rgba(15,15,15,0.70);}
.comment-form p::after, .comment-form p::before {top:100%;
border:solid transparent;content:" ";height:0;width:0;position:absolute;
pointer-events:none}
.comment-form p::before {border-top-color:rgba(45,45,45,0.55);border-width:15px;right:10%;margin-right:-26px}
.comment-form p::after {border-top-color:rgba(49,155,237,0.75);border-width:9px;right:10%;margin-right:-20px}
.comment-form a{color:#319BED;}
#comment-editor{opacity:0.4;}
#comment-editor:hover{opacity:2.2;}
#comment-editor, .comment-form p{transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;}

/* counter number biru */
.comments {counter-reset:number;}
.comments .comment {position:relative;}
.comments .comment:after {counter-increment:number;content:counter(number);
display:block;width:35px;height:35px;text-align:center;font:italic normal 18px/35px Times,Serif;color:#111;position:absolute;top:0;right:0;-webkit-border-radius:100%;
-moz-border-radius:100%;border-radius:100%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);box-shadow:inset 0 1px 2px rgba(0,0,0,0.55);border:3px solid #222;background:rgba(0,180,255,0.55);}
.comments .comment .comment-thread.inline-thread {counter-reset:number;}
.comments .comment .comment-thread.inline-thread .comment:after {font-size:18px;
line-height:30px;width:30px;height:30px;}
.comments .comment:hover:after {background-color:rgba(5,5,5,0.45);border-color:rgba(0,180,255,0.45);color:#fff;}

3.Selanjutnya cari kode seperti ini :

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.5em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.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 0px;
}
.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:10px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:10px;
}
.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 {
  margin-left:6px;
  font-size:11px;
}
.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 {
  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: 0px;
  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(&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 {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwsqX_jp03-UI3_WW3bM6f9qamKmwPS6SfujSV6RLcLAf5YmTQ-5HPBScpeqNp9me7lo7P2QR_br3pa9oWRexQzjkhqYwXAoP0dp6DQnQkwS4CNfOV21kntVkhKLYGwG9kXfh7Pe3saYV/s0/avatar.png) no-repeat center;
  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;
  }
}
  </style>
</b:includable>

- Jika sudah ketemu, Sobat perhatikan kode diatas yang berwarna merah dan sampai kode penutup, sobat tinggal hapus semua kode yang berwarna hijau, ingat yang berwarna merah jangan dihapus yah, bisa2 kotak postingan diblog sobat hilang.!!

4. Langkah terakhir Priview dulu, jika tidak terjadi kesalahan, baru sobat bisa save template. dan selesai :D Please rate this article: