Masalah Pesan Formulir Komentar Blogger yang Jatuh ke Bawah
Tabel Konten
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.

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
:

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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</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
:

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-wrapper
nya belum ada Al. Coba edit elemen<div class='comment-form'>
menjadi seperti ini: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:
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 :WUnknown
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
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 :'(
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?
azewBz
ganti template aja om..!! :D
Taufik Nurrohman
Coba set ulang JavaScript ke mode normal (jangan lupa di-backup dulu templatenya) ⇒ /2012/05/fitur-thread-comment-berhasil-tampil.html
Diki
Sip, masalah udah kelar \o/ sekarang udah gak setress lagi. :D saya mengucapkan banyak terimakasih buat mas Taufik. :-bd
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
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
: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: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 :)