Mungkin banyak sebagian dari anda semua terjadi seperti gambar diatas, begitu pula pada
blog ini sebelumnya sering mengalami masalah pesan formulir komentar yang berada di bawah formulir komentar pada saat-saat tertentu. Bagi saya pesan untuk para komentator idealnya terletak tepat di atas formulir komentar, tapi dalam keadaan tertentu biasanya akan turun ke bawah dengan tiba-tiba dan aneh.
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
replybox merupakan variabel. Jika anda mengalihkan pandangan anda sedikit ke atas maka anda akan menemukan bahwa
replybox adalah variabel yang menyatakan elemen
#comment-editor
Itulah kesalahannya?!
#comment-editor sebenarnya adalah elemen
<iframe> formulir komentar yang sama sekali tidak berhubungan dengan pesan formulir komentar.
Coba anda amati lagi script dibawah :
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' ... id='comment-editor' name='comment-editor' src='' width='100%'/>
<p><data:blogCommentMessage/></p> mewakili pesan formulir komentar, dan elemen
<iframe> yang terletak di bawahnya mewakili formulir komentar. Itulah mengapa sebabnya pesan formulir komentar bukanlah bagian dari elemen formulir komentar, karena dia hanya meletakkan diri di sebelah atas formulir.
Oleh karena itu, saat kita mengklik tombol Balas atau poskan komentar, maka yang akan terangkat hanya formulir komentarnya saja, sedangkan pesan formulir komentar yang seharusnya ikut dibawa akan ditinggalkan. Karena dalam script di atas,
.insertBefore() hanya akan membawa
replybox yang merupakan
#comment-editor
Solusinya ??
Solusi untuk mengatasi masalah ini adalah dengan cara menambahkan elemen pembungkus baru yang digunakan untuk mengelilingi formulir dan pesan formulir komentar. Sehingga, kita tidak lagi menugaskan
.insertBefore() untuk mengangkat elemen
replybox tapi kita akan membuat
.insertBefore() mengangkat elemen pembungkusnya, sehingga formulir komentar dan pesan formulir komentar di dalamnya akan ikut terbawa ke mana saja elemen pembungkus berpindah. Caranya sebagai berikut :
1. Edit HTML, kemudian tag Expand Template Widget
2. Cari kode dibawah :
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Tekan CTRL + F lalu ketik threaded-comment-form untuk mempermudah pencarian
3. Kalau sudah ketemu, ganti semua dengan kode dibawah :
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Nah pada kode diatas bahwa elemen
<iframe> dan
<p><data:blogCommentMessage/></p> telah dikelilingi dengan elemen
<div id='form-wrapper'>. Artinya, di dalam
#form-wrapper terdapat formulir komentar dan pesan formulir komentar. Nah, sekarang kita tinggal membuat
.insertBefore() untuk mengangkat
#form-wrapper
4. Terakhir cari kode ini
document.getElementById(domId).insertBefore(replybox, null);
