Mengatasi Pesan Komentar yang Pindah ke Bawah

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.

Sebelum saya berbagi tutorial bagaimana cara memperbaikinya agar pesan formulir komentar berada diatas formulir komentar, ada baiknya kita mengetahui sebenarnya apa sih penyebab pesan formulir komentar bisa jatuh ke bawah.

Coba anda amati script dibawah :

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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </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);

5. Ganti dengan kode

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

6. Simpan Template.

Sekarang setiap kali kita mengklik tombol Balas atau poskan komentar, maka yang akan berpindah-pindah adalah elemen #form-wrapper dan bukan elemen #comment-editor. #comment-editor dan pesan formulir komentar di dalamnya hanya akan berdiam diri di dalam #form-wrapper dan akan mengikuti ke mana saja dia berpindah. Semoga bermanfaat…

Related Post :