Cara-2 Membuat Threaded Comments di Blogger

Assalamu'alaikum Wr.Wb.

Cara-2 Membuat Threaded Comments di Blogger, Jumpa lagi Mojang dan Bujang artikel ini kelanjutan dari Cara-1 masih seputar bagaimana cara-nya merubah CSS Threaded Comment yang jelas-nya biar Mojang dan Bujang yang belum tau bisa lebih tau cara-nya.
Cara Merubah .comments-content .datetime a lihat no.6, CSS-nya dibawah ini :

.comments .comments-content .datetime a {
color:#B0ED00;
font-size:10px;
float:right;
text-decoration:none
}

Cara Merubah .comment .comment-actions a lihat no.7, CSS-nya dibawah ini :

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

Cara Merubah .comments .continue a lihat no.8, CSS-nya dibawah ini :

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

Cara Merubah .avatar-image-container lihat no.9, CSS-nya dibawah ini :

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

Sebenar-nya simple kalau Mojang dan Bujang sedikit-nya memahami CSS-nya, sedikit tambahan kalau berminat menambah CSS-nya jadi bertingkat serta Responsive tinggal menambahkan CSS berikut ini :

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

Semoga artikel ini membawa manfaat dan berguna buat Bloggernize...Salam. Go Blog Go...!!! Amiin