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 sebagianscript 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 bahwareplybox adalah variabel yang 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):
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' frameborder='0' 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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></b:if><data:post.friendConnectJs/><data:post.cmtfpIframe/><script type='text/javascript'>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' frameborder='0' 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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></b:if></div><data:post.friendConnectJs/><data:post.cmtfpIframe/><script type='text/javascript'>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
Nah, kita akan menggunakan elemen pembungkus tersebut sebagai PEGANGAN bagi
<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 komentar, 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.Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Masalah Pesan Formulir Komentar Blogger yang Jatuh ke Bawah. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment