Masalah Pesan Formulir Komentar Blogger yang Jatuh ke Bawah

Tabel Konten
  1. Buat Elemen Pembungkus Baru untuk Mengangkat Formulir Komentar Beserta Kelengkapannya 
  2. Cara Lain 

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!

68 Komentar

  • Yopi Hasopa

    mantepp banget nih mas.... :-bd

    dari dulu saya nunggu2 nih, tapi baru banget nemu tadi siang solusinya. Saya coba dulu ahh... siapa tau lebih maknyosss... thx mas ^_^

  • Taufik Nurrohman

    @Yopi Hasopa Nggak perlu mas, Saya sempat cek blog mas tidak ada masalah kok. Semuanya sudah berjalan seperti apa yang diinginkan saat seseorang berhasil menerapkan tutorial ini. Kalau di blog mas memakai ID #threaded-comment-form, bukan #form-wrapper dan semuanya sudah beres sejak awal, sama seperti salah satu blog yang Saya gunakan sebagai pembanding sebelum membuat posting ini ;)

  • Yopi Hasopa

    @Taufik Nurrohman double sip kalo gitu mas :-bd :-bd

  • Andro Bhaskara

    wah.. saya belum pernah menemukan kejadian seperti itu kang.. tapi kalo ketemu, udah ada senjatanya.. :D
    Makasih kang.. :)
    #eh.. saya punya masalah pada widget yang blank dan tidak dapat di hapus.. kalo di buka isi widgetnya adalah formulir kosong configure feed dengan title "recent Post" atau "recent comment".. saya coba hapus pada HTMLnya, tapi kalo di save, pesannya error dan proses saving tidak bisa dilanjutkan.. Makasih sebelumnya.. :)

  • Taufik Nurrohman

    @Andro Bhaskara Pindah ke interface lama dulu, lalu hapus widgetnya melalui kode HTML seperti biasa.
    Masalah pesan error itu seharusnya memang harus dijadikan sebagai bahan Feedback untuk Blogger, tapi pas Saya mau ngasih feedback bingung cara ngomongnya gimana hehe... :p

  • Unknown

    Mas Taufik, ko kotak komentar aku tibatiba hilang yah mas ???
    Engga tau kenapa ???
    Kalau artikel belum ada komentarnya (0 Komentar) malah ga ada kota komentarnya :'(

    Apa setelah aku pasang show komentar ya mas ??? :'(

    Coba ya mas taufik lihat postingan aku yang masih belumada komentarnya...

    Sebelumnya terima kasih =p*

    Mohon pencerahanya :-bd

  • Unknown

    @trii waluyo Oh ya,, alhamdulilah dah jadi.... ah aku terapkan postingan yang ini.... :)
    Mas Taufik emang master blogger :-bd

    Harusnya bukak kursus nie mas,, hehehe \o/

  • Cyserrex

    Akhirnya terjawab juga mas pertanyaan saya yang di sini :-bd

  • Cyserrex

    Mas, kalo pengen nambahin button di samping button Pratinjau gimana ya?
    Sperti ini contoh gambarnya: http://prntscr.com/97vm0

  • Taufik Nurrohman

    @Cyserrex Nggak bisa mas, masalahnya formulir komentar Blogger memakai iframe, bukan formulir sungguhan :'(

  • Cyserrex

    @Taufik Nurrohman Oh.. Jadi udah emang dari database blogger ya mas.. :(
    Terima kasih atas jawabannya mas.. 0:)

  • Putra

    kenapa malah pas di balas gak bisa muncul yoo mas? http://underground404.blogspot.com/ :'(

  • Taufik Nurrohman

    @Alam Perwira Elemen #form-wrappernya belum ada Al. Coba edit elemen <div class='comment-form'> menjadi seperti ini:

    <div class='comment-form' id='form-wrapper'>

    • Unknown

      Makasih Kang Rohman , semua done ....

  • Putra

    @Taufik Nurrohman sekali langsung berhasil. Emang bener kata orang kalo mas taufik masternya bloggerrrr :-bd :-bd ;)

  • Anonim

    Mas di blognya Zhito ada cara yang lebih mudah dengan mengganti kode:

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

    dengan kode:

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

  • Anonim

    @The7Bloggers Ini mas linknya..... http://sin1aja.blogspot.com/2012/05/pesan-formulir-komentar-keren.html

  • Taufik Nurrohman

    @The7Bloggers Sama saja. Cara kerjanya kita memegangi pembungkus formulir komentar untuk memindah-mindah formulir, bukan memegangi iframe formulirnya.
    Di atas Saya menuliskan elemen pembungkus secara manual berupa elemen #form-wrapper, sedangkan di tutorial tersebut menggunakan elemen #threaded-comment-form. Tutorial ini khusus untuk mengatasi masalah blog yang tidak memiliki elemen #threaded-comment-form di dalam formulir komentar mereka. Itu saja intinya :W

  • Unknown

    Mantap mas, tadi saya otak atik sendiri sampai puyeng :p gak nemu salahnya dimana tetep aja letak emot dibawah comment editor. Ternyata disini salahnya, makasih mas :-bd

  • Farid Wajdi Kardbri

    wah, makasih infonya.. sgt membantu :-bd

  • Anonim

    makasih tutornya, sudah saya praktekkan dan berhasil,
    salam kenal dan sukses selalu
    :-bd

  • Unknown

    Ini Yang Baru Namanya truroriall bagus sobb..
    jadi kalo mau balas komen nga usah loadning lagi tinggal tunggu bentar nonggol deh tu kotak kmentar

  • Anonim

    wahh bisa mas heheh makasih ya mas......

  • PRADANA TEKNIK AC

    wah sakses lagi triknya.... kang taufik memang top dah :-bd

  • Hermanbagus

    Terimakasih tutorialnya mas, sangat membantu sekali, muter muter mencari akhirnya keteu disini.

  • Vpie ◥TwekzLibz◤ MahaDhifa

    . . keren banget. pengen nyoba achhhhh . .

  • Limit Komputer

    Terima KAsih bnyak yah gan .... ane bru nemu triknya ane cba dan berhasil

  • Yandi Mulyadi

    Om , Aku kan punya Blog Tapi Saat Aku Masang Komentar Di blog itu ? kan pake Emoticon Sendiri , Kenapa emoticonnya gak muncul saat ku pakai Contoh =) saat ku pakai eh gak muncul gambarnya coba cek ke : www.Mafiazblogger.blogspot.com

  • Shinobi Batuahku

    min tau cara ngilangin tombol reply di blog gk?!
    ane pengen ngilangin tombol reply, udah otak atik gk dapet2 T.T

  • Unknown

    \o/ saya kira masalah ini tidak ada jalan keluarnya sob. . ternyata terjawab semua disini.. Thank's You verymuch sobat.. :Q

  • MassiveBjn

    muanteb sob tutorial bermanfaat banget, tanks

    visit n koment back di blogq y :)
    http://achsanarea23.blogspot.com

  • Anonim

    MAs klok nambahkan Efek SLide Atau Efek FAdein Or FAde Out Dan Lain" Bisa gak mas kira"..?? :yaya:

    Mohon Pencerahannya ^_^

  • Viyan Pradita

    Udah lama nongkrong dimari tp blm sempet komeng kang :D
    Ini masalah dari dulu susah saya pecahin =p*

    Sudah tak coba, sukses masbro :-bd
    Salam kenal kang.

    • Viyan Pradita

      Kang, biar keterangannya gak ikut terangkat tp ke hidden gmn caranya yah :D

      Nah hanya seperti itu jadinya, keterangan yang lain tidak ikut tp hidden.

      • Taufik Nurrohman

        .comments .comment #threaded-comment-form p {display:none}

        • Unknown

          bagaimana menghilangkan kode emoticon didalam komentar gan?

  • Conan Edogawa

    wah thanks bgt info nya gan, persis sm mslah ane skrg, lgsng ane coba smoga benar" teratasi pake cara diatas..

  • Yuliaprianto

    wah, bagus banget mas Taufik, sudah saya coba praktekkan manjur nih. Trims,

    o ya mas, saya minta izin ya buat menyalin artikel-artikel punya mas?

    saya sudah baca kok kebijakan & privasinya.
    Trimakasih banyak,

  • Anonim

    mas taufik kok gak ada yah ? apa saya yang salah memakainya :'(

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

  • Diki

    punyaku juga gak ada kode document.getElementById(domId).insertBefore(replybox, null); walaupun ada yang mirip {document.getElementById(x).insertBefore(g,null) kalo di ganti fungsi Balas komentar gak bisa di pake. :(

    • Taufik Nurrohman

      Mungkin sudah dimodifikasi sama yang punya :\

      • Diki

        kira-kira Mas Taufik punya solusi tidak?

  • Anonim

    kalo seperti ini mas ? kotak komentarnya kalo belum ada yang komentar kecil, kalo sudah kembali ke ukuran normal ?

    belum ada komentar

    sudah ada komentar

    • Taufik Nurrohman

      #comment-form {max-width:none}

      Ngomong-ngomong ini screenshoot lama atau baru? Kok tampilan formulirnya masih klasik ya? Saya pengen balik lagi ke tampilan yang dulu. Lebih bersih...

      Pertanyaan Sejenis: /2012/07/menambahkan-nomor-urut-pada-daftar.html?showComment=1360714992562#c609767437905996266

      • Anonim

        baru mas, belum diotak-atik maklum masih baru :D

        • Anonim

          #comment-from tidak diketemukan ? gimana yah mas ?

          • Taufik Nurrohman

            Tidak usah dicari. Ditaruh saja di atas b:skin seperti ini. Kalau perlu tambahkan selektor #threaded-comment-form:

            #threaded-comment-form,
#comment-form {
max-width:none;
width:auto;
}

            Sebenarnya yang membuat lebarnya tidak sama itu karena: saat lebarnya menyempit, itu artinya formulir komentar berada di dalam elemen #comment-form, dan saat formulir komentar lebarnya maksimal, itu artinya formulir komentar berada di dalam elemen #threaded-comment-form

            • Anonim

              oke deh terimakasih yah mas taufik :d

  • Unknown

    Mas, punya saya kalau belum ada komentar, kenapa emoticonnya tidak muncul di bawah pesan komentar ya? Nuwun MAs

    • Taufik Nurrohman

      Tergantung memakai script emotikon yang mana. Baca komentar-komentar yang ada di posting mengenai pemasangan emotikon di blog ini. Di situ sudah ada komentar/pertanyaan sejenis seperti ini beserta solusinya.

  • Surga Kenari

    asli jenius banget mas taufik ini :-bd

    gak cuma ngasih solusi tapi ngasih penjelasan mengapa bisa begini dan bgtu, penjelasannya detil perinci dan mudah di pahami.

    gak sekedar ngasih script suruh copas. ini yg di namakan blogger tutorial yang mencerdaskan blogger. B)

    sukses buat mas taufik.

  • ROHIS SMADA KLATEN

    kak taufik tanya gimana menempatkan emoticon didalam pesan formulir komentar? kayak punya kakak.. saya otakatik bingung soalnya pake javascript, saya ambil dr sini kak http://mdf-blog.blogspot.com/2012/12/memasukan-item-pada-koemntar-video.html

  • Anonim

    Mantep gan meskipun cari kodenya yg di bawah tu sulit
    tapi ada yg agak mirip mirip di cobak
    eee malah bisa makasih ya gan
    penjelasanya
    sukses selalu tu blognya :D

  • Unknown

    Oksip,sudah berhasil saya terapkan di blog saya,terimakasih gan. . \o/

  • Unknown

    ruarrrrrr biasa!! \o/ ane udah nyari-nyari ini. bingung, habis sebelumnya emoticon ane malah jatoh ke bawah klo ada komentar. makasi kk...

  • Anonim

    trimakasih ya mas tofik, masalah di blog saya sudah terpecahkan :)

  • Unknown

    udah liat kodenya aja udah puyeng :'(, apalagi pakenya 0:)
    Mas Taufik bisa ngatasi valid HTML5 gk, soalnya klo nambah widget di footer atau popular post atau arsiv jadi nambah errornya 4, jadi ada solusinya gk mas ?
    Mau tanya lagi mas taufik ini orang Sunda bukan ?, pengen main ke rumah mas Taufik, hehe B)
    http://yoga-tc.blogspot.com/

  • Unknown

    wah ternya mas Taufik ini memang masternya blogger, belajar dari mana ilmu sehebat itu mas ?, alhamdulilah berhasil mas, trimakasih ya, udah berbagi :-bd
    http://yoga-tc.blogspot.com/

  • Unknown

    terima kasih yahh mas, bermanfaat banget

  • Anonim

    Sudah dicoba dan berhasil terima kasih kang, cuma saya tidak bisa menerapkan background warna dan border di pesan tsb, bagaimana yang kang..?

    Kasusnya seperti ini, jika masih kosong atau tidak ada komentar background tidak muncul
    tapi sebaliknya jika ada komentar masuk maka background nya muncul. Mohon solusinya?

    • Taufik Nurrohman

      Saat komentar masih kosong, formulir komentar memiliki kelas .comment-form sedangkan saat komentar sudah muncul, formulir komentar berganti menjadi .threaded-comment-form. Setahu Saya begitu. Jadi gabungkan saja selektornya seperti ini:

      .comment-form p,
.threaded-comment-form p {
/* Kode CSS */
}

  • BOTmaz

    makasih mas :) sangat membantu dan kalau di perbolehkan di repost lagi yah dengan bahasa sendiri :) salam mas

  • Anonim

    makasih mas, cara terakhirnya yang terlihat simple, ternyata menyelesaikan masalah saya :)

Komentar telah ditutup.