Cara Agar Pesan Komentar Selalu diatas Form Komentar

                Pesan komentar adalah sebuah pesan pendek yang biasanya berisi tentang aturan-aturan berkomentar di suatu blog. Seharusnya, pesan komentar tersebut berada di atas form komentar. Namun pada threaded comment dan beberapa keadaan tertentu, pesan komentar tersebut tidak berada di tempatnya. Terkadang pesan komentar tersebut berada dibawah form komentar. Hal ini membuat isi dari pesan komentar tersebut tidak selalu terbaca oleh pengunjung yang ingin berkomentar.

                Pada threaded comment atau komentar berbalas, ketika kita akan melakukan reply komentar maka form komentar itu akan berpindah berada tepat di bawah komentar yang akan kita balas komentarnya. Hal itu terjadi karena variable replybox yang memanggil form komentar tersebut kebawah komentar. Secara default, variable replybox tersebut hanya memanggil form komentar nya saja. Sedangkan pesan komentar nya tidak ikut terbawa karena form komentar dan pesan komentar nya adalah elemen yang berbeda. Itulah penyebab mengapa pesan komentar nya terkadang berada di bawah.

                Variable replybox secara default:

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;

    }

};

                Perhatikan, bahwa perintah insert before memanggil variable replybox yang perintah nya memanggil elemen form komentar saja. Untuk mengatasi nya, kita harus membuat tag <div> yang menyatukan elemen pesan komentar dan form komentar tersebut lalu mengubah perintah pada variable replybox agar tidak hanya memanggil form komentar nya saja tetapi juga memanggil pesan dari komentar nya juga. Dengan begitu ketika kita mereply komentar, yang berpindah kebawah komentar induk adalah form dan pesan komentar nya.

                Caranya silahkan masuk ke template editor masing-masing, kemudian carilah kode dibawah ini :

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

Kemudian ganti kode yang berwarna hijau dengan kode dibawah ini :

<div id='form-wrapper'>

    <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%'/>

<p style=��text-align:right; font-size:5px; color:��><a href=http://www.misterdhi.net>Misterdhi.net</a></p>

    </b:if>

</div>

            Pada kode diatas, kita lihat bahwa comment-editor (kode form komentar) dan kode <p><data:blogCommentMessage/></p>(pesan komentar) telah disatukan dalam tag div dengan id form-wrapper. Nah, tag div dengan id tersebut akan menjadi elemen yang akan di panggil oleh variable replybox.

                Sekarang, untuk mengatur perintah replybox nya silahkan cari kode

document.getElementById(domId).insertBefore(replybox, null);

                kemudian ganti kode tersebut dengan kode dibawah ini :

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

                Terakhir klik Save Template.

                Sekarang, pesan komentar akan selalu berada di atas form komentarnya dan ketika kita klik tombol reply di komentar pun maka form dan pesan komentar akan berpindah ke bawah komentar induk.

                #semoga bermangfaat

                #salam terhangat dari Misterdhi.

Tulisan ini terinspirasi dari:http://www.dte.web.id/2012/05/masalah-pesan-formulir-komentar-yang.html