Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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 yang Error
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:

#comment-editor adalah formulir komentar, namun pesan formulir komentar bukan termasuk di dalamnya
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:

Formulir komentar kini sudah dipegangi oleh 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!

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 68 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!