Pesan Komentar Melorot ke Bawah

Aslinya (default) isi pesan komentar blog (blogspot.com) akan berada di atas formulir (form) komentar bila sebuah postingan belum memiliki komentar, namun bila sebuah postingan telah memiliki komentar maka pesan tadi akan pindah ke bawah form komentar. Bagi sebagian blogger situasi ini bukanlah masalah berarti namun bagi blogger yang lain ini sangat tidak elok, bagi mereka ini pesan untuk para komentator idealnya terletak tepat di atas formulir komentar. Bagaimana Cara Mengatasi Pesan Komentar yang Berada dibawah Form Komentar? Mari kita pelajari.


Caranya sebagai berikut :

1. Temukan 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>

Tip. Tekan CTRL + F lalu ketik threaded-comment-form untuk mempermudah pencarian.


2. Ganti semua dengan kode berikut,

<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'><!--elemen pembungkus-->
           <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><!--tutup elemen pembungkus-->
         </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 <p><data:blogCommentMessage/></p> dan <iframe> telah dibungkus oleh elemen baru, <div id='form-wrapper'>. Artinya, kita telah memasukkan elemen formulir komentar dan pesan formulir komentar ke dalam elemen #form-wrapper. Intinya kita hanya perlu menambahkan <div id='form-wrapper'> dan </div>.


Selanjutnya, kita harus mengatur perintah .insertBefore(), perintah untuk mengatur elemen #form-wrapper. Cara menagaturnya dijelaskan pada langkah nomer 3 dan nomer 4.

3. Temukan kode ini,

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

4. Ganti dengan kode,

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

5. Simpan Template. Selesai.


Penjelasannya
Mari kita amati script dibawah ini,

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 yang menyatakan elemen #comment-editor, yaitu,

replybox = document.getElementById('comment-editor')

Padahal #comment-editor ini sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan 'pesan' formulir komentar.

Mari kita amati lagi script dibawah :

<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><data:blogCommentMessage/></p> adalah pesan formulir komentar, dan elemen <iframe> (yaitu <iframe allowtransparancy='true'>....</iframe>) yang terletak di bawahnya adalah formulir komentar. Jelas terlihat bahwa pesan formulir komentar tidak menjadi bagian dari elemen formulir komentar, pesan formulir komentar berada di atas sedangkan formulir komentar berada terpisah di bawahnya, tidak berada dalam satu elemen.

Oleh karena itu, saat kita mengklik tombol 'Balas' atau 'poskan komentar', maka yang akan terangkat hanya formulir komentarnya saja, sedangkan pesan formulir komentar ditinggalkan padahal seharusnya yang seharusnya ikut dibawa. Perilaku ini diatur oleh perintah, .insertBefore(), yang hanya akan membawa replybox saja dan meninggalkan <iframe allowtransparancy='true'>....</iframe>.

Solusinya?
Solusi untuk mengatasi masalah seperti ini adalah dengan cara menambahkan elemen baru yang membungkus elemen formulir dan elemen pesan formulir komentar. Elemen baru tersebut kita beri nama 'form-wrapper', ini boleh diganti dengan kata apa saja, misalnya 'pembungkus-formulir'.


Kemudian, kita tidak lagi menugaskan .insertBefore() untuk mengangkat elemen replybox saja tapi kita akan membuat .insertBefore() mengangkat elemen pembungkusnya, yaitu elemen baru yang kita buat tadi,

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

sehingga formulir komentar dan pesan formulir komentar akan ikut terbawa ke mana saja elemen baru yang telah kita buat tadi bergeser.

Nah, sekarang setiap kali kita mengelik tombol 'Balas' atau 'poskan komentar', maka yang akan bergeser adalah elemen #form-wrapper. Karena Elemen #comment-editor dan pesan formulir komentar berada di dalam #form-wrapper maka kedua elemen tersebut akan mengikuti ke mana saja elemen #form-wrapper bergeser.

Selamat belajar.

Komentar

  1. <div id='coba'>Coba konversi</div>

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Tambah bagus aja nih tampilan templatenya... \o/

    BalasHapus
  4. @fika zhafirah, ngintip blog sebelah, soalnya penasaran redirect terus kalau diclone. Tapi akhirnya ketemu juga kuncinya, hehe..

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template