Masalah Pesan Formulir Komentar Blogger yang Jatuh ke Bawah

Posting ini sekaligus sebagai jawaban dari beberapa pertanyaan mengenai bar emotikon jQuery yang seringkali tampil pada tempat yang salah jika kita menggunakan template standar Blogger.

Pesan formulir komentar berada di bawah, padahal seharusnya di atas.

Masalah ini sangat sering ditanyakan di sini (kemunculan pertanyaan sejenis terbanyak bisa ditemukan di posting Emotikon Blogger Otomatis dengan jQuery). Ini mengenai masalah pesan formulir komentar yang akan jatuh/meletakkan diri di bawah formulir komentar tanpa kita inginkan pada saat-saat tertentu. Kita semua setuju bahwa pesan untuk para komentator idealnya terletak tepat di atas formulir komentar, tapi untuk beberapa kasus mereka biasanya akan turun ke bawah dengan cara yang aneh.

Pada awalnya Saya juga merasa bingung dengan cara kerja fitur baru Blogger ini, sampai Saya mencoba membandingkan sebagian script di blog Saya dengan salah satu script yang sudah berhasil diimplementasikan oleh sebuah blog yang Saya kunjungi:

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

replybox adalah variabel. Jika Anda mengalihkan perhatian Anda sedikit ke sebelah atas maka Anda akan menemukan bahwa replybox adalah variabel untuk menyatakan elemen #comment-editor:

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

Meskipun variabel tersebut tidak berada dalam satu kondisi, tapi setidaknya kita sudah tahu titik terangnya. Itulah kesalahannya! #comment-editor sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan pesan formulir komentar. Pesan formulir komentar bukanlah bagian dari elemen formulir komentar. Dia hanya meletakkan diri di sebelah atas formulir seperti ini:

<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. Selengkapnya mengenai struktur formulir komentar Blogger bisa Anda pelajari di artikel Struktur Label dan Status Komentar.

Oleh karena itu, saat kita mengeklik tombol Balas, 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 notabene adalah #comment-editor, bukan .comment-form:

Pesan formulir komentar tidak termasuk dalam wilayah #comment-editor (replybox)

Buat Elemen Pembungkus Baru untuk Mengangkat Formulir Komentar Beserta Kelengkapannya

Solusi untuk mengatasi masalah ini adalah dengan cara menambahkan elemen pembungkus baru yang akan kita gunakan untuk mengelilingi formulir dan pesan formulir komentar. Dengan begitu, kita tidak akan menugaskan .insertBefore() untuk mengangkat elemen replybox tapi kita akan membuat dia mengangkat elemen pembungkusnya, sehingga formulir komentar dan pesan formulir komentar di dalamnya akan ikut terbawa ke mana saja elemen pembungkus berpindah.

Masuklah ke halaman Editor HTML Template, kemudian cek Expand Template Widget. Temukan kode 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' 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' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script>
      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.

Ganti semua kode di atas dengan kode ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/><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' 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' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if></div>    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Pada kode di atas Anda akan melihat bahwa Saya telah mengelilingi elemen <iframe> dan <p><data:blogCommentMessage/></p> dengan elemen <div id='form-wrapper'>. Nah, kita akan menggunakan elemen pembungkus tersebut sebagai “pegangan” bagi .insertBefore() untuk memindah-mindah elemen formulir komentar dan pesan formulir komentar di dalamnya.

Kita tahu bahwa di dalam #form-wrapper terdapat formulir komentar dan pesan formulir komentar, oleh karena itulah ke dua elemen tersebut (formulir dan pesan formulirnya) akan ikut terbawa seiring berpindahnya elemen #form-wrapper:

Pesan dan formulir komentar kini sudah dipegangi oleh elemen #form-wrapper

Terakhir, untuk memodifikasi script thread-commenting Blogger agar tidak hanya mengangkat/memindah formulir komentarnya saja, lihatlah kembali pada bagian ini:

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

Ganti dengan kode ini:

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

Klik Simpan Template.

Sekarang setiap kali kita mengeklik tombol Balas, 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.

---

Cara Lain

Cara yang satu ini lebih sederhana. Anda tidak perlu membaca tutorial di atas untuk memecahkan masalah semacam ini.

Pertama-tama cari kode ini:

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

Ganti dengan kode ini lalu simpan perubahan yang ada:

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

Selesai!