Cara Memodifikasi Threaded Comment Agar Tampil Keren pada blog

Siang sobat blogger, saya akan berbagi tutorial tentang Cara Memodifikasi Threaded Comment Agar Tampil Keren. Pastinya sobat blogger semua ingin mencoba memasangnya agar tampilan Threaded Comment sobat menjadi lebih keren tentunya. Saya juga memasang ini karena yang sebalumnya kurang keren coba lihat screenshot diatas sobat. Ingin pasang soabt? ikuti langakah-langkah dibawah ini :

1. Login Blogger
2. Masuk Template kemudian pilih Edit HTML
3. Cari kode ]]></b:skin> gunakan ctrl+f biar mudah mencarinya
4. Copy dan pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

#comments-block .avatar-image-container img {background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySda3jkZJVpHW2iz-yhdLW2-V-bRU8T8uZXxA3PM5AmAn29nNR-o_QFJekRmWPGq7uvE2lgHsTCj_iy5Jh9plju60Su6CJIQMhui9c2vdUAT8UUDk9d-0SvmcwjOjpNbJqrm3E6H_QA0/s200/anonim-c.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.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 .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {
margin-left:-5px;
}
.comments .continue a{
color:#069;
}
#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/AVvXsEiLqpStaeA0na7u5jaKBEQzYnz5uK3Xjcirv_JWGymapieUr3zrOsL1JGJIFTCpqLHIXF9jxpHEgSsTrY9JD5ueRGm4HQQfKOQPlLYWMaxYsudQnzq0mh88WT3q384kvwKezJZ2tAehsxnG/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;
}
.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; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {
transform:scale(1.5) rotate(3600deg) translate(0px);-moz-transform:scale(1.5) rotate(3600deg) translate(0px);-webkit-transform:scale(1.5) rotate(3600deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 2.5s ease;-webkit-transition:all 2.5s ease
}