Pesan Komentar Melorot ke Bawah

Solusi pesan komentar yang berpindah ke bawah kotak form komentar setelah ada komentar.

Aslinya (default) isi pesan komentar blog (blogspot.com) akan berada di atas formulir (form) komentar bila sebuah postingan belum memiliki komentar, namun bila sebuah postingan telah memiliki komentar maka pesan tadi akan pindah ke bawah form komentar. Bagi sebagian blogger situasi ini bukanlah masalah berarti namun bagi blogger yang lain ini sangat tidak elok, bagi mereka ini pesan untuk para komentator idealnya terletak tepat di atas formulir komentar. Bagaimana Cara Mengatasi Pesan Komentar yang Berada dibawah Form Komentar? Mari kita pelajari.


Caranya sebagai berikut :

1. Temukan kode dibawah :

<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(&#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.


2. Ganti semua dengan kode berikut,

<b:includable id='threaded-comment-form' var='post'>
       <div class='comment-form'>
         <a name='comment-form'/>
         <b:if cond='data:mobile'>
     <div id='form-wrapper'>
           <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%'/>
     </div>
         <b:else/>
     <div id='form-wrapper'><!--elemen pembungkus-->
           <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%'/>
     </div><!--tutup elemen pembungkus-->
         </b:if>
         <data:post.friendConnectJs/>
         <data:post.cmtfpIframe/>
         <script type='text/javascript'>
           BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
         </script>
       </div>
     </b:includable>

Nah, pada kode diatas bahwa elemen <p><data:blogCommentMessage/></p> dan <iframe> telah dibungkus oleh elemen baru, <div id='form-wrapper'>. Artinya, kita telah memasukkan elemen formulir komentar dan pesan formulir komentar ke dalam elemen #form-wrapper. Intinya kita hanya perlu menambahkan <div id='form-wrapper'> dan </div>.


Selanjutnya, kita harus mengatur perintah .insertBefore(), perintah untuk mengatur elemen #form-wrapper. Cara menagaturnya dijelaskan pada langkah nomer 3 dan nomer 4.

3. Temukan kode ini,

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

4. Ganti dengan kode,

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

5. Simpan Template. Selesai.


Penjelasannya
Mari kita amati script dibawah ini,

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;
    }
};


Replybox merupakan variabel yang menyatakan elemen #comment-editor, yaitu,

replybox = document.getElementById('comment-editor')

Padahal #comment-editor ini sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan 'pesan' formulir komentar.

Mari kita amati lagi script dibawah :

<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%'/>

<p><data:blogCommentMessage/></p> adalah pesan formulir komentar, dan elemen <iframe> (yaitu <iframe allowtransparancy='true'>....</iframe>) yang terletak di bawahnya adalah formulir komentar. Jelas terlihat bahwa pesan formulir komentar tidak menjadi bagian dari elemen formulir komentar, pesan formulir komentar berada di atas sedangkan formulir komentar berada terpisah di bawahnya, tidak berada dalam satu elemen.

Oleh karena itu, saat kita mengklik tombol 'Balas' atau 'poskan komentar', maka yang akan terangkat hanya formulir komentarnya saja, sedangkan pesan formulir komentar ditinggalkan padahal seharusnya yang seharusnya ikut dibawa. Perilaku ini diatur oleh perintah, .insertBefore(), yang hanya akan membawa replybox saja dan meninggalkan <iframe allowtransparancy='true'>....</iframe>.

Solusinya?
Solusi untuk mengatasi masalah seperti ini adalah dengan cara menambahkan elemen baru yang membungkus elemen formulir dan elemen pesan formulir komentar. Elemen baru tersebut kita beri nama 'form-wrapper', ini boleh diganti dengan kata apa saja, misalnya 'pembungkus-formulir'.


Kemudian, kita tidak lagi menugaskan .insertBefore() untuk mengangkat elemen replybox saja tapi kita akan membuat .insertBefore() mengangkat elemen pembungkusnya, yaitu elemen baru yang kita buat tadi,

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

sehingga formulir komentar dan pesan formulir komentar akan ikut terbawa ke mana saja elemen baru yang telah kita buat tadi bergeser.

Nah, sekarang setiap kali kita mengelik tombol 'Balas' atau 'poskan komentar', maka yang akan bergeser adalah elemen #form-wrapper. Karena Elemen #comment-editor dan pesan formulir komentar berada di dalam #form-wrapper maka kedua elemen tersebut akan mengikuti ke mana saja elemen #form-wrapper bergeser.

Selamat belajar.

COMMENTS

BLOGGER: 4
  1. This comment has been removed by the author.

    ReplyDelete
  2. Tambah bagus aja nih tampilan templatenya... \o/

    ReplyDelete
  3. @fika zhafirah, ngintip blog sebelah, soalnya penasaran redirect terus kalau diclone. Tapi akhirnya ketemu juga kuncinya, hehe..

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Pesan Komentar Melorot ke Bawah
Pesan Komentar Melorot ke Bawah
Solusi pesan komentar yang berpindah ke bawah kotak form komentar setelah ada komentar.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6EJb_2r5ULNd-5QV1adrYO1dgHfnNcdrMxGTM2_N8zefK5aCyLVmJ-GRAqbaAxQuud-sw4_je-UztsrEL1xpl6ILKhOr3im8K4HKl-74dMIkMVdeMYNuYFHFOYVdoH8SlIv8ObklP-M/s1600/pesan+komentar+di+bawah.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6EJb_2r5ULNd-5QV1adrYO1dgHfnNcdrMxGTM2_N8zefK5aCyLVmJ-GRAqbaAxQuud-sw4_je-UztsrEL1xpl6ILKhOr3im8K4HKl-74dMIkMVdeMYNuYFHFOYVdoH8SlIv8ObklP-M/s72-c/pesan+komentar+di+bawah.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2013/12/mengatasi-pesan-komentar-yang-berada.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2013/12/mengatasi-pesan-komentar-yang-berada.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content