Posting ini sekaligus sebagai tanggapan dari beberapa pertanyaan mengenai kafe emotikon jQuery yang seringkali tampil pada daerah yang salah jikalau kita memakai template standar Blogger.
Masalah ini sangat sering ditanyakan di sini (kemunculan pertanyaan sejenis terbanyak sanggup ditemukan di posting Emotikon Blogger Otomatis dengan jQuery). Ini mengenai problem pesan formulir komentar yang akan jatuh/meletakkan diri di bawah formulir komentar tanpa kita inginkan pada saat-saat tertentu. Kita semua baiklah bahwa pesan untuk para komentator idealnya terletak sempurna di atas formulir komentar, tapi untuk beberapa perkara mereka biasanya akan turun ke bawah dengan cara yang aneh.
Pada awalnya Saya juga merasa galau dengan cara kerja fitur gres Blogger ini, hingga 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 ialah variabel. Jika Anda mengalihkan perhatian Anda sedikit ke sebelah atas maka Anda akan menemukan bahwa replybox ialah 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 bekerjsama ialah elemen <iframe> formulir komentar yang sama sekali tidak bekerjasama dengan pesan formulir komentar. Pesan formulir komentar bukanlah bab dari elemen formulir komentar. Dia hanya meletakkan diri di sebelah atas formulir ibarat 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 sanggup Anda pelajari di artikel Struktur Label dan Status Komentar.
Oleh alasannya ialah itu, dikala 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 ialah #comment-editor, bukan .comment-form:
Buat Elemen Pembungkus Baru untuk Mengangkat Formulir Komentar Beserta Kelengkapannya
Solusi untuk mengatasi problem ini ialah dengan cara menambahkan elemen pembungkus gres 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 menciptakan ia 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 isyarat 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 kemudian ketik 'threaded-comment-form' untuk mempermudah pencarian.
Ganti semua isyarat di atas dengan isyarat 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 isyarat 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 memakai 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 alasannya ialah itulah ke dua elemen tersebut (formulir dan pesan formulirnya) akan ikut terbawa seiring berpindahnya elemen #form-wrapper:
Terakhir, untuk memodifikasi script thread-commenting Blogger semoga tidak hanya mengangkat/memindah formulir komentarnya saja, lihatlah kembali pada bab ini:
document.getElementById(domId).insertBefore(replybox, null);Ganti dengan isyarat 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 ialah 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 ia berpindah.
Cara Lain
Cara yang satu ini lebih sederhana. Anda tidak perlu membaca tutorial di atas untuk memecahkan problem semacam ini.
Pertama-tama cari isyarat ini:
document.getElementById(domId).insertBefore(replybox, null);Ganti dengan isyarat ini kemudian simpan perubahan yang ada:
document.getElementById(domId).insertBefore(replybox.parentNode, null);Selesai!
Sumber https://www.dte.web.id/