Ada beberapa cara untuk menampilkan threaded comment ini, banyak beberapa rekan blogger sudah mengulasnya. Disini saya akan mejelaskan cara yang paling simple.
Edit Template
1. Login ke Dasbor klik
Template --->
Edit HTML
2. Centang
Expand Template Widget
3. Cari semua kode ini
<b:include data='post' name='comments'/>
(di template saya ada 4 kode seperti itu)
4. Ganti semua kode diatas dengan :
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
5. Save dan lihat hasilnya
Modifikasi Tampilan Threaded Comments Blogger
1. Login ke Dasbor klik Template ---> Edit HTML
2. Centang Expand Template Widget
3. Cari semua kode ini
<b:include id='feedLinksBody' var='links'>
4. Copy code CSS dibawah dan letakkan tepat diatas/sebelum kode diatas :
<b:includable
id='threaded_comment_css'> <style> /*------------- START Blogger
Threaded Comments -------------*/ .comments { clear: both; margin-top: 10px;
margin-bottom: 0px; line-height: 1em; } .comments .comments-content {
font-size: 12px; margin-bottom: 16px; font-weight: normal; text-align:left;
line-height: 1.4em; } .comments .comment .comment-actions a { display:
inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4;
border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242
!important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration:
none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
background: #EDEDED; background: -webkit-gradient( linear, left top, left
bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background:
-moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px
sans-serif; padding:2px 8px; margin-right:10px; } .comments .comment
.comment-actions a:hover { text-decoration: none; background:#fff; border:1px
solid #5AB1E2; } .comments .comments-content .comment-thread ol {
list-style-type: none; padding: 0; text-align: none; } .comments
.comments-content .inline-thread { padding: 0.5em 1em; } .comments
.comments-content .comment-thread { margin: 8px 0px; } .comments
.comments-content .comment-thread:empty { display: none; } .comments
.comments-content .comment-replies { margin-top: 1em; margin-left: 40px;
font-size:12px; background:#EBF5FE; } .comments .comments-content .comment {
margin-bottom:16px; padding-bottom:8px; } .comments .comments-content
.comment:first-child { padding-top:16px; } .comments .comments-content
.comment:last-child { border-bottom:0; padding-bottom:0; } .comments
.comments-content .comment-body { position:relative; } .comments
.comments-content .user { font-style:normal; font-weight:bold; } .comments
.comments-content .user a { color:#2D5E7B; font-size:14px; font-weight:
bold;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 { color: #999999; float: right;
font-size: 11px; text-decoration: none; } .comments .comments-content,
.comments .comments-content .comment-content { margin:0 0 8px; }
.comment-header {background-color: #F4F4F4; border: thin solid #E6E6E6;
margin-bottom: 5px; padding: 5px; } .comments .comments-content .comment-content
{ text-align:none; } .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 .thread-toggle { cursor:
pointer; display: inline-block; } .comments .continue { cursor: pointer; }
.comments .continue a { display: inline-block; margin: 0; padding: 1px 6px;
border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color:
#E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0
white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius:
2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient(
linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font:
11px/18px sans-serif; padding:2px 8px; margin-right:10px; } .comments
.comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top:
3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity:
0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display:
none; } .comments .thread-toggle { display: inline-block; } .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; } .comments
.avatar-image-container {background-image:
url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position:
center center;background-repeat: no-repeat;float: left;width: 36px;max-height:
36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align:
middle;overflow: hidden; border: 1px solid #DDDDDD;} .comments
.avatar-image-container img { width: 36px; } .comments .comment-block {
margin-left: 48px; position: relative; } /* Responsive styles. */ @media screen
and (max-device-width: 480px) { .comments .comments-content .comment-replies {
margin-left: 0; } } /*------------- End of Blogger Threaded Comments
-------------*/ </style> </b:includable>
5. Lalu carilah kode dibawah ini :
<b:includable id='threaded_comments' var='post'>
6. Kemudian Letakkan kode berikut dibawah/setelah kode diatas :
<b:include name='threaded_comment_css'/>
7. Klik Save Template dan lihat hasilnya.
