Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error

bungfrangki Tutorial Blog 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.

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:

<head>

atau

<head>

Kembalikan menjadi seperti ini:

<head>

Selanjutnya cari kode seperti ini:

</head>

atau

</head>

Ganti balik menjadi seperti ini:
</head>

2. Kembalikan tag </body> sebagaimana mestinya

Cari kode ini:

</body>

Ganti dengan kode ini:

</body>

3. Ikuti langkah berikut

Cari kode ini:

<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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 == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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("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>") 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 + "_backlinks-container"'>
<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.

Label

Tutorial Blog