• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Tuesday, July 2, 2013

Cara Agar Pesan Komentar Selalu diatas Form Komentar



                Pesan komentar adalah sebuah pesan pendek yang biasanya berisi tentang aturan-aturan berkomentar di suatu blog. Seharusnya, pesan komentar tersebut berada di atas form komentar. Namun pada threaded comment dan beberapa keadaan tertentu, pesan komentar tersebut tidak berada di tempatnya. Terkadang pesan komentar tersebut berada dibawah form komentar. Hal ini membuat isi dari pesan komentar tersebut tidak selalu terbaca oleh pengunjung yang ingin berkomentar.

                Pada threaded comment atau komentar berbalas, ketika kita akan melakukan reply komentar maka form komentar itu akan berpindah berada tepat di bawah komentar yang akan kita balas komentarnya. Hal itu terjadi karena variable replybox yang memanggil form komentar tersebut kebawah komentar. Secara default, variable replybox tersebut hanya memanggil form komentar nya saja. Sedangkan pesan komentar nya tidak ikut terbawa karena form komentar dan pesan komentar nya adalah elemen yang berbeda. Itulah penyebab mengapa pesan komentar nya terkadang berada di bawah.
                Variable replybox secara default:

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

                                         
                Perhatikan, bahwa perintah insert before memanggil variable replybox yang perintah nya memanggil elemen form komentar saja. Untuk mengatasi nya, kita harus membuat tag <div> yang menyatukan elemen pesan komentar dan form komentar tersebut lalu mengubah perintah pada variable replybox agar tidak hanya memanggil form komentar nya saja tetapi juga memanggil pesan dari komentar nya juga. Dengan begitu ketika kita mereply komentar, yang berpindah kebawah komentar induk adalah form dan pesan komentar nya.
                Caranya silahkan masuk ke template editor masing-masing, kemudian carilah kode dibawah 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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>


Kemudian ganti kode yang berwarna hijau dengan kode dibawah ini :

<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%'/>
<p style=”text-align:right; font-size:5px; color:”><a href=http://www.misterdhi.net>Misterdhi.net</a></p>
    </b:if>
</div>

            Pada kode diatas, kita lihat bahwa comment-editor (kode form komentar) dan kode <p><data:blogCommentMessage/></p>(pesan komentar) telah disatukan dalam tag div dengan id form-wrapper. Nah, tag div dengan id tersebut akan menjadi elemen yang akan di panggil oleh variable replybox.
                Sekarang, untuk mengatur perintah replybox nya silahkan cari kode

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

                kemudian ganti kode tersebut dengan kode dibawah ini :

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


                Terakhir klik Save Template.
                Sekarang, pesan komentar akan selalu berada di atas form komentarnya dan ketika kita klik tombol reply di komentar pun maka form dan pesan komentar akan berpindah ke bawah komentar induk.
                #semoga bermangfaat
                #salam terhangat dari Misterdhi.


Tulisan ini terinspirasi dari:http://www.dte.web.id/2012/05/masalah-pesan-formulir-komentar-yang.html

32 comments:

  1. I Always be the First Comment..!!! hee :D

    ReplyDelete
  2. wah keren nih tipsnya cocok diterapin di blog ane

    ReplyDelete
  3. kalau pasang google adsense dibawah nya kotak komentar bisa nanti ?

    ReplyDelete
    Replies
    1. tentu bisa dong,, tinggal pasang kode iklan nya dibawah iframe komentar nya saja.

      Delete
  4. jadi seperti kotak komentar punya agan ini

    ReplyDelete
  5. makasih om ntar bisa di coba,,
    makasih om udah share

    ReplyDelete
  6. sip..tutorialnya asyik,,sederhana tapi mudah dipahami :-)

    ReplyDelete
  7. Jadi lebih menarik ini mas pesan komentar selalu diatas akan terlihat kalau mau berkomentar gitu.

    ReplyDelete
  8. alhamdulillah sob,,, form komentar blog saya aman2 saja :D

    ReplyDelete
  9. Bw malam gan di lapaknya sobat,,

    ReplyDelete
  10. hehe... pinter banget sihh..
    saya mengangguk2 aja

    ReplyDelete
  11. Saya malah tidak memberikan aturan kepada pembaca blog saya dalam berkomentar.

    ReplyDelete
  12. ntar saya baca lagi, menarik nihh

    ReplyDelete
  13. BW pagi di lapaknya om ed dolo, hehehe

    ReplyDelete
  14. terimakasih buat tutornya gan, ini memang sangat membantu para blogger

    ReplyDelete
  15. wuidih..ilmu yang keren banget nih, kebetulan pesan komentar ku juga bermasalah...cing saya simpendulu ilmunya kapan2 tak pasang

    ReplyDelete
  16. Wahhh ini masalah yg sedang melanda blogku, hahahaha.. komentar dulu, habis itu baru belajar, wkwkwkwk

    ReplyDelete
  17. wah ini mantap sekali tutorialnya mister. sangat bermanfaat dan berguna sekali untuk membantu mengatasi masalah pada pesan form komentar. terimakasih sudah berbagi :)

    ReplyDelete
  18. nah ini yang ane cari gan, pesan komentar ane kadang turun ke bawah

    ReplyDelete
  19. punya gw sudah bagus sob.. thanks ya..
    visir me back ya.

    ReplyDelete
  20. BW malam dulu om,
    happy blogging

    ReplyDelete
  21. mantep, saya juga pernah memperaktekan cara di atas dan memang hasilnya begitu...sippp.

    ReplyDelete
  22. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    ReplyDelete
  23. komisifb.com/?id=ariefsaiful53@gmail.com kunjungi website tersebut

    ReplyDelete

Anda diwajibkan membaca Privacy Policy terlebih dahulu sebelum berkomentar.

Contact

Get in touch with me


Adress/Street

12 Street West Victoria 1234 Australia

Phone number

+(12) 3456 789

Website

www.johnsmith.com