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
Unknown
Manis, berhasil..
makasi..
btw, blognya maknyus
http://begitusudah.blogspot.com
BKE
mas saya mau tanya, untuk menonaktifkan kode Pre italic bold di formulir komentar gimana mas. Mohon bantuannya