Cara membuat threaded comment menu pada blogger

Penjelasan dari menu komentar ini yaitu penambahan menu Reply atau Balas dengan ciri khas balasan sebuah komentar yang menyamping ke kanan.Seperti menu komentar pada wordpress, blogger untuk sekarang ini juga sudah support threaded comment menu ini.
Dengan menu komentar ini memberikan suasana dialog komentar lebih stylish daripada menu komentar yang versi sebelumnya di blogger.

Berikut adalah cara pemasangannya :
1. Masuk ke menu Rancangan » Edit html
2. Download template lengkap terlebih dahulu sebagai antisipasi jika terjadi kesalahan.
3. Centang menu expand template widget
4. Cari kode <b:include data='post' name='comments'/> (Ctrl+F untuk mempermudah pencariaan) ada 4 kode jadi anda harus teliti dalam mengganti kode ini.
5. Sekarang ganti 4 kode  <b:include data='post' name='comments'/> dengan kode dibawah ini:

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

6. Simpan template dan sekarang coba lihat hasilnya.
7. Tambahan untuk menambahkan style css, copy kan css berikut tepat diatas kode ]]></b:skin> :

/* div untuk image admin */
.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==);
}
/* div untuk coment loadmore*/
.comments .comments-content .loadmore a {
border-top: 1px solid cccccc;
border-bottom: 1px solid cccccc;
}
.comments .continue {
border-top: 2px solid cccccc;
}
/* div untuk bagian tanggal komentar*/
.comments .comments-content .datetime a{
float: right;
color: 069;
}
.comment-block .comment-footer a:link, a:visited {
color:069;
}
.comments .avatar-image-container {

}
.comments .continue a{
color:069;
}
/* div untuk body dari satu komentar */
comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivD4VdqKFYc268UwYCyjJT1tnZOSZiErIZQTyxorqUMrm4k6ua2E65TTZD6Q6nSLXg5c3AWC2U2cN_dBa9e7ig6v457b3N-VhTj9g5yKMasahfeHzJXHZDnxlepRcQEOU2qSX86Lm3RH_P/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid cccccc;
border-left:3px solid 069;
border-bottom:1px solid cccccc;
border-right:1px solid cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 FFF inset, 0 1px 0 FFF;
-moz-box-shadow: 0 1px 0 FFF inset, 0 1px 0 FFF;
-webkit-box-shadow: 0 1px 0 FFF inset, 0 1px 0 FFF;
}
/* div untuk tombol balas dan hapus */
.comment-actions a {
background: c1c1c1;
background: -moz-linear-gradient(top, c1c1c1 0%, dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,c1c1c1), color-stop(100%,dedede)); background: -webkit-linear-gradient(top, c1c1c1 0%,dedede 100%); background: -o-linear-gradient(top, c1c1c1 0%,dedede 100%); background: -ms-linear-gradient(top, c1c1c1 0%,dedede 100%); background: linear-gradient(top, c1c1c1 0%,dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='c1c1c1', endColorstr='dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid c1c1c1; color:666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: c9c9c9; background: -moz-linear-gradient(top, c9c9c9 0%, dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,c9c9c9), color-stop(100%,dedede)); background: -webkit-linear-gradient(top, c9c9c9 0%,dedede 100%); background: -o-linear-gradient(top, c9c9c9 0%,dedede 100%); background: -ms-linear-gradient(top, c9c9c9 0%,dedede 100%); background: linear-gradient(top, c9c9c9 0%,dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='c9c9c9', endColorstr='dedede',GradientType=0 ); text-decoration:none !important; }

/* div untuk wadah avatar */
.avatar-image-container {
border: 1px soli ccc;
}