Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error

Tutorial ini adalah lanjutan sekaligus jawaban dari artikel sebelumnya tentang komentar blog error, tombol reply not working. Tips blogger kali ini masih seputar komentar Blogger/blogspot, namun ini adalah benar-benar solusinya.
Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error

Adapun rincian masalahnya adalah sebagai berikut:
  • Threaded comment (balasan komentar) yang menjadi terlihat rata dengan komentar induk.
  • Tombol reply comment not working, tidak berfungsi sebagaimana mestinya. 

Khususnya bagi pengguna template Themeindie.com dan mengalami error pada komentar blognya, maka disarankan untuk mengikuti tutorial sebagai berikut.

How to fix threaded Blogger comment error and reply button not working?

Sebelum melanjutkan ke tutorial, silahkan backup dulu XML template Anda, untuk menghindari sesuatu yang tidak sepatutnya terjadi di hidup Anda.

Untuk mengikuti tutorial ini, anda harus masuk ke editor Blogger, pilih menu Theme > Edit HTML.
Caranya sebagai berikut.

1. Kembalikan tag <head> dan </head> sebagaimana mestinya

Cari kode seperti ini:
&lt;head&gt; 
atau
&lt;!--<head>--&gt;&lt;head&gt;

Kembalikan menjadi seperti ini:
<head>

Selanjutnya cari kode seperti ini:
&lt;/head&gt; 
atau
&lt;!--</head>--&gt;&lt;/head&gt;
Ganti balik menjadi seperti ini:
</head>

2. Kembalikan tag </body> sebagaimana mestinya

Cari kode ini:
&lt;!--</body>--&gt;&lt;/body&gt;

Ganti dengan kode ini:
</body>

3. Ikuti langkah berikut

Cari kode ini:
        <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 kode tersebut dengan kode berikut:
        <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>

Perhatian:
Biasanya kode tersebut ada 2, masing-masing ada di dalam kode ini:
<b:includable id='main' var='top'>

Dan kode ini:
<b:includable id='mobile-post' var='post'>

4. Selanjutnya, ikuti cara ini

Ganti seluruh kode yang ini:
<b:includable id='comment_picker' var='post'>...</b:includable>

Dengan 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>

5. Perbaiki tampilan

Anda mestinya harus menambahkan dan mengedit CSS berikut ini, untuk mempercantik tampilan komentar. Sebab, beberapa tag class dan id yang lama ada yang sudah diganti sama si Blogger.
/* 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;}

6. Alternatif: Jika title comment dan pesan komentar berantakan?

Perbaiki dengan cara ini,

Silahkan expand dan ganti semua kode ini:
<b:includable id='threaded_comments' var='post'>...</b:includable>

Dengan kode ini:
    <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
   <h3>
  <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
      <span class='embel'>This post have</span> <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
      <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</b:includable>

Simpan Tema,

Selesai.

Cara ini sudah diterapkan pada template Viralisme Premium Blogger Template. Dan 100% working dengan sangat mulus.

Demikian tutorial blogger tentang cara mengatasi komentar blogspot/blogger error dan tombol balas tidak berfungsi, semoga bermanfaat dan terima kasih!

Jika ada pertanyaan seputar tutorial ini, silahkan berkomentar di bawah.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.