-->

Membuat Threaded Comments Blogger


Membuat Threaded Comments Blogger

Membuat Threaded Comments Blogger

Kali ini saya akan membahas mengenai cara Membuat Threaded Comments pada blogspot. Threaded Comments lebih mundahnya kita menyebutnya atau mengartikannya sebagai komentar berbalas. Mirip dengan komentar pada Facebook. Tutorial ini sukses saya terapkan pada Template Moshtheme, dan mungkin bisa di terapkan di template yang lainnya.

Langkah-langkahnya

  1. Masuk ke Dashboard Blogger kamu.
  2. Pilih Tema, kemudian Edit HTML.
  3. 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>
  4. Ubah juga Tag </body>
    Cari kode ini
    &lt;!--</body>--&gt;&lt;/body&gt;
    ubah menjadi
    </body>
  5. Cari kode berikut.(Ctrl+F)
  6.         <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>
  7. 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>
  8. 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>
  9. Untuk mempercantik tampilan komentar, silahkan copy kode berikut dan taruh di atas
  10. /* 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;}
  11. 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.

2 Komentar untuk "Membuat Threaded Comments Blogger"

  1. Artikel yang bermanfaat.
    Blog ini akan saya kunjungi kembali.
    Terima kasih sebelumnya, silahkan kunjungi balik dan jangan lupa titipkan komentar juga ya..

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel