Cara Mengatasi Pesan Komentar Berpindah Kebawah

 Asalamualaikum Wr Wb

Hmm...Mungkin banyak sebagian dari sobat semua mengalami pesan komentar berpindah kebawah seperti diatas, begitu pula pada blog ini juga sebelumnya pernah mengalami kejadian tersebut pada saat-saat tertentu. Bagi admin 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 dan itu tidak enak dipandang bukan??.

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

Coba sobat amati script dibawah :

Klik Show untuk melihat

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 sobat mengalihkan pandangan sedikit ke atas maka sobat akan menemukan bahwa replybox adalah variabel yang menyatakan elemen #comment-editor
Itulah letak kesalahannya... #comment-editor sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan pesan formulir komentar.
 

Coba sobat amati lagi script dibawah :
 

Klik Show untuk melihat

<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 itu hanya meletakkan dirinya 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  

Bagaimana Solusinya ?? Solusi untuk mengatasi masalah ini adalah dengan cara menambahkan elemen <iframe> 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. Template > Edit HTML
2. Cari kode dibawah :
 

Klik Show untuk melihat

<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 berikut :
 

Klik Show untuk melihat

<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...Wasalam  .

Sumber: http://istiawanblog.blogspot.com/2012/12/mengatasi-pesan-komentar-yang-pindah-ke-bawah.html

Share this

Share on FacebookPlus on Google+