Cara-1 Membuat Threaded Comments di Blogger

Assalamu'alaikum Wr.Wb.

Cara-1 Membuat Threaded Comments di Blogger judul artikel dari Go Blog Go kali ini, sebenar-nya Saya bingung dengan pemberian judul-nya yang tujuan sebenar-nya adalah bagaimana cara Mojang dan Bujang men-Design sendiri tampilan Thread-Comment ini sesuai dengan selera masing-masing. Disini Saya hanya akan menjelaskan bagian terpenting saja yang mana dari CSS Thread-Comment ini yang boleh dibilang mudah untuk di-Oprek CSS-nya.
Saya visualisasikan langsung saja karena dianggap Mojang dan Bujang sudah tau cara menempatkan-nya dan tersedia fasilitas Threaded-Comment di Blog-nya, Mojang dan Bujang hanya tinggal lihat Screen Shoot Threaded Comments berdasarkan Nomor yang tertera :

• Login Blogger
• Ke Dashboard
• Template -> edit HTML

Lihat bagian CSS THREADED COMMENTS-Nya apakah disimpan diatas ]]></b:skin> atau <b:includable id='threaded_comment_css'>...</b:includable>, kurang lebih CSS-nya seperti dibawah ini :

#comments h4 {
font:15px "Trebuchet MS",Arial;
font-weight:bold;
color:#666 !important;
text-align:left;
text-decoration:none;
display:inline;
}
.comments {
clear:both;
margin-top:10px;
margin-bottom:0;
padding:9px;
font:13px Arial;
line-height:18px;
}
.comment .comment-content {
color:#222;
font-weight:normal;
text-align:left;
text-decoration:none;
padding:7px;
margin-bottom:21px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.comments .comment-block {
margin-left:70px;
position:relative;
padding:7px;
overflow:hidden;
border:1px solid #DDD;
}
.comment-header {
border:1px solid #584d44;
text-decoration:none;
padding:5px;
margin-bottom:7px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}
.comments .comments-content .user a {
color:#FF0000;
font-size: 15px;
font-weight: bold;
margin-left: 3px;
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 a {
color:#B0ED00;
font-size:10px;
float:right;
text-decoration:none
}

.comments .thread-toggle{
cursor:pointer;
display:inline-block
}
.comments .comment .comment-actions a {
display:inline-block;
margin:0 0 5px 7px;
padding:3px 9px;
cursor:pointer;
border:1px solid #584d44;
font:12px "Trebuchet MS",Arial;
text-shadow:0 2px 0 #222;
color:#EEE !important;
line-height:19px;
text-align:center;
text-decoration:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
text-shadow:0 1px 0 #222; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.5);
box-shadow:0 2px 2px rgba(0,0,0,.5)
}

.comments .continue a {
display:inline-block;
padding:5px;
margin:0;
text-shadow:0 2px 0 #222;
color:#EEE !important;
cursor:pointer;
border:1px solid #584d44;
font:15px "Trebuchet MS",Arial;
font-weight: normal;
text-align: center;
text-decoration: none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}
.comments .continue a:hover {
display:inline-block;
text-decoration:none;
text-shadow: 0 1px 0 #222;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.5);
box-shadow:0 2px 2px rgba(0,0,0,.5)
}

.avatar-image-container {
float:left;
vertical-align:middle;
overflow:hidden;
width:70px !important;
height:70px !important;
max-width:70px !important;
max-height:70px !important
}
.comments .avatar-image-container img {
width:50px !important;
height:50px !important;
max-width:50px !important;
max-height:50px !important;
position:relative;
padding:3px;
overflow:hidden;
border:.1em solid #DDD;
}

.comments .comments-content .comment-body {
position:relative
}
.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 .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 .comments-content .comment-thread {
margin:8px 0
}
.comments .comments-content .comment-thread ol {
list-style-type:none;
padding: 0;
text-align: none
}
.comments .comments-content .comment-thread:empty {
display:none
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px
}
.comments .comments-content .inline-thread {
padding:0.5em 1em
}
.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
}
.item-control {
display:inline
}
.deleted-comment {
font-style:italic;
color:#808080 }
.comments .comment-thread.inline-thread {
position:relative;
padding:7px;
overflow:hidden;
}

.comment .comment-thread.inline-thread .comment:nth-child(7){margin:0px 0px 5px 30%;}
.comment .comment-thread.inline-thread .comment:nth-child(6){margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5){margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4){margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3){margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2){margin:0px 0px 5px 5%;}
.comment .comment-thread.inline-thread .comment:nth-child(1){margin:0px 0px 5px 0%;}

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

Cara Merubah #Comment h4 lihat no.1, CSS-nya dibawah ini :

#comments h4 {
font:15px "Trebuchet MS",Arial;
font-weight:bold;
color:#666 !important;
text-align:left;
text-decoration:none;
display:inline;
}

Cara Merubah .comment-content lihat no.2, CSS-nya dibawah ini :

.comment .comment-content {
color:#222;
font-weight:normal;
text-align:left;
text-decoration:none;
padding:7px;
margin-bottom:21px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}

Cara Merubah .comment-block lihat no.3, CSS-nya dibawah ini :

.comments .comment-block {
margin-left:70px;
position:relative;
padding:7px;
overflow:hidden;
border:1px solid #DDD;
}

Cara Merubah .comment-header lihat no.4, CSS-nya dibawah ini :

.comment-header {
border:1px solid #584d44;
text-decoration:none;
padding:5px;
margin-bottom:7px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}

Cara Merubah .comments-content .user a lihat no.5, CSS-nya dibawah ini :

.comments .comments-content .user a {
color:#FF0000;
font-size: 15px;
font-weight: bold;
margin-left: 3px;
text-decoration:none
}
Untuk selanjut-nya silahkan Mojang dan Bujang ke Bab berikut-nya :

Cara-2 Selanjutnya