Membuat Threaded Comment Unik dan Berwarna

Salam Blogger!

Sambil menunggu hujan berhenti Bang Kamplenk akan mebagikan postingan tentang "Membuat Threaded Comment Bertingkat, Unik dan Berwarna, Bagi sahabat yang sudah bosen dengan tampilan standar bawaan Blogspot cara ini bisa dijadikan alternatif, ikuti panduannya :

D E M O

Pada dasbor klik Template --> edit HTML

Klik Ctrl+F dan cari kode ]]></b:skin>

Tambahkan kode CSS berikut diatas kode ]]></b:skin>

PENTING !!!

Threaded Comments ini hanya untuk tampilan Comments blog yang belum pernah diedit, bagi yang pernah menganti dan merubahnya anda harus mengembalikan dengan tampilan standar, caranya cari kode ini  <b:include data='post' name='comments'/>

Biasanya terdapat lebih dari dua, ganti semunya dengan :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Bila sudah dipraktekan lalu copast kode dibawah ini diatas kode ]]></b:skin>

Semoga Bermanfaat.

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

C O D E