Cara Membuat Threaded Comments Blogger

Threaded Comments Blogger atau Komentar Bertingkat

Nofantz.com - Threaded Comments lebih mundahnya kita menyebutnya atau mengartikannya sebagai komentar berbalas. Mirip dengan komentar pada Facebook. Tutorial ini sukses saya terapkan pada Template Mostheme, dan mungkin bisa di terapkan di template yang lainnya.

Langkah-langkahnya

Masuk ke Dashboard Blogger kamu.
Pilih Tema, kemudian Edit HTML.

Ubah Tag <head> dan </head> seperti aslinya.

&lt;head&gt;

atau 

&lt;!--<head>--&gt;&lt;head&gt;

ubah menjadi

<head>

kemudian, cari kode berikut

&lt;/head&gt;

atau

&lt;!--</head>--&gt;&lt;/head&gt;

ubah menjadi

</head>

Ubah juga Tag </body>
Cari kode ini
```
&lt;!--</body>--&gt;&lt;/body&gt;
```
ubah menjadi
```
</body>
```

Cari kode berikut.(Ctrl+F)

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Ganti dengan code ini

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>

Cari Kode seperti ini:

<b:includable id='comment_picker' var='post'>...</b:includable>

ganti dengan kode ini

    <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>

Temukan kode ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

atau kode seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

ganti dengan kode ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>
</li>

Untuk mempercantik tampilan komentar, silahkan copy kode berikut dan taruh di atas

/* CSS Tambahan untuk komentar */
.comment-thread .user a{font-weight:700;color:#000;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .user a:hover{color:inherit}
.comment-thread .user{font-weight: bold;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .datetime {font-weight: normal;font-size:11px;}
.comment-thread .user {padding:0;font-size:13px;font-weight:bold;position:relative;}
.comment-thread .datetime {color: #a9a9a9;font-size:12px!important;margin-top:-3px;}
.comment-thread .datetime a{text-decoration:none;color: #a9a9a9;font-size:12px!important;font-weight:normal;}
.comment-thread .datetime a:hover{color: #000;}
.comment-content {line-height: 1.5em;margin:4px 0 5px;color: #444;font-weight:normal;font-size: 13px;word-wrap:break-word;padding:0;}
a.comment-reply, .item-control a{color: #aaa !important;font-size:12px!important;font-weight:normal!important;}
a:hover.comment-reply, .item-control a:hover{color:#000 !important;}
.item-control{margin-left:0px} /* tombol delete comment */
.thread-chrome a.comment-reply{margin-top:20px!important;border:1px solid #eee;text-align:center;border-radius:5px}
.thread-chrome a:hover.comment-reply{border-color:#bbb}
.comment-block{margin-left:65px;padding:10px;text-align:left;border:1px solid #f5f5f5;border-radius:5px;position:relative;display:block}
#comments .comments-content .icon.blog-author{
width: 16px;height: 16px;margin-left: 5px;vertical-align: 2px;display: inline-block;background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z' fill='%23118ff9'/></svg>&quot;) center center no-repeat;}

Terakhir, Simpan Template.

Silahkan cek di blog kamu, apakah sudah berubah?
Kamu juga bisa menemukan artikel lainnya yang berkaitan dengan Komentar blogspot, diantaranya:
Memperbaiki Tombol Replay Error pada Komentar Blogspot
Mengubah tampilan komentar blogspot versi lama menjadi versi baru
Selamat mencoba.