DTE :]

Friday, March 23, 2012

Format Formulir Komentar di Atas Daftar Komentar

Posting ini sudah kadaluarsa

Format Formulir Komentar di Atas Daftar Komentar
Membuat formulir komentar blog terletak di bagian atas dimana semua daftar komentar berada di bawahnya.

Saya sudah mencoba ini pada salah satu tema Blogger standar dan berhasil melakukanya dengan lancar.

Pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan. Cek Expand Tema Widget agar seluruh elemen pembangun posting tampil:

Edit HTML Blogger
Mengedit HTML

Temukan kode yang kurang lebih tampak seperti ini:

<p class='comment-footer'>
  <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
  <b:else/>
    <data:post.noNewCommentsText/>
  </b:if>
</p>

Potong semua kode itu lalu gulung editor HTML tema Anda ke atas perlahan-lahan sampai Anda menemukan kode ini:

<div class='comments' id='comments'>

Letakkan kode yang baru saja Anda potong tepat di bawahnya dan simpan perubahan yang Anda lakukan.

Jika tidak berhasil atau tidak menemukan kode yang terlihat di atas, mungkin itu karena Anda sedang memakai tema versi lama. Untuk tema versi lama, kodenya akan tampak kurang lebih seperti ini:

<p class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
    <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</p>

Potong semua kode itu lalu gulung editor HTML tema Anda ke atas perlahan-lahan sampai Anda menemukan kode ini:

<div class='comments' id='comments'>

Letakkan kode yang baru saja Anda potong tepat di bawahnya dan simpan perubahan yang Anda lakukan.

Seharusnya ini berhasil.

Labels: ,

26 Comments:

  • wih kayaknya ini req nya langsung di share, mancaaap :D
    pengen coba ah, tp kok malah doble yah 7:(
    http://1.bp.blogspot.com/-SGrmKEu1-8o/T2xCWMWmc4I/AAAAAAAAAPo/_zVzaJfmzYk/s1600/class-comments.jpg

    By Blogger Putra, at Friday, March 23, 2012 at 4:31:00 PM GMT+7  

  • @Alam Perwira Untuk versi thread comment sepertinya memang harus melakukan dua kali. Ada formulir untuk template klasik dan baru di tempat yang sama. Coba lakukan dua langkah itu untuk satu template karena di dalam template itu biasanya akan ditemukan dua buah elemen dengan kelas 'comment-footer'.

    By Blogger Taufik Nurrohman, at Friday, March 23, 2012 at 5:02:00 PM GMT+7  

  • @Taufik Nurrohmanbingung mas 7:(
    dari tadi saya utekutek sendiri malah gak bisa2, tp saya temuin kode dr treaded yg coment form (<b:include data='post' name='threaded-comment-form'/>) tp waktu saya pindah dibawah <div class='comments' id='comments'> malah ilang postingannya :'(
    yaudah saya kembaliin semula aja, apakah bisa dirubah seperti tutorial diatas mas?? :)

    By Blogger Putra, at Friday, March 23, 2012 at 7:42:00 PM GMT+7  

  • @Alam Perwira Sebenarnya Saya tahu masalahnya mengenai template yang kamu pakai, cuma masih kurang yakin saja.
    Ini perkiraan Saya: mengenai tutorial-tutorial mengaktifkan thread comment pada custom template mungkin belum sepenuhnya sempurna karena hanya berdasarkan metode menyalin kode dan menambahkannya, namun Saya tidak melihat bahwa ada pernyataan untuk membuang kode tertentu yang harus dibuang pada tutorial tersebut, padahal mungkin ada beberapa kode yang seharusnya sudah tidak berguna lagi. Saran Saya sih, coba buat satu blog baru lagi dengan template yang masih standar, dicoba lagi tutorial ini apakah hasilnya jadi atau tidak. Jika tidak, mungkin ada satu kesalahan Saya dalam menjelaskan tutorial di halaman ini.
    Ngomong-ngomong, tadi kamu bukan menyalin elemen yang ditemukan kemudian meletakkannya di bawah elemen <div class='comments' id='comments'> kan?
    Di atas Saya mengatakan memotong kemudian memindahkannya, bukan menyalin dan meletakkan kode yang sama :\

    By Blogger Taufik Nurrohman, at Friday, March 23, 2012 at 8:00:00 PM GMT+7  

  • @Taufik NurrohmanInsyaallah saya coba mas :)
    saya CUT kemudian saya PASTE dibawah kode <div class='comments' id='comments'> begitu saya mas, bukan saya gandakan :)

    By Blogger Putra, at Saturday, March 24, 2012 at 9:53:00 AM GMT+7  

  • Alhamdulillah...terima kasih banyak sob..., langsung sy coba.., sekali lg makasih yaa :D

    By Blogger Rohis Facebook, at Saturday, March 24, 2012 at 6:17:00 PM GMT+7  

  • berhasil Sob..!, emank harus dilakukan dua kali, cz taq class=comments id=comments ada di dua tempat...

    terima kasih banyak sob :D

    By Blogger Rohis Facebook, at Saturday, March 24, 2012 at 6:56:00 PM GMT+7  

  • heheh..,aq baru perhatikan trnyata berhasil tp ko' jd dobel ya.., ada diatas dan jg ada dibawah.... :) :(

    By Blogger Rohis Facebook, at Saturday, March 24, 2012 at 7:54:00 PM GMT+7  

  • @Rohis Facebook Iya hehe... :p Saya coba lagi di blog Huatchuuu!!! jadinya dobel, satu di atas dan satu di bawah. Tapi setelah Saya cek kembali ternyata Blogger secara otomatis menyisipkan formulir komentar yang sama di bagian bawah tepat di tempat lama formulir komentar berasal. Coba dicek pada bagian atas apakah hasil pengeditannya masih ada atau tidak (tepatnya di bagian bawah kode <div class='comments' id='comments'>). Jika masih, cukup hapus kode yang tampil kembali di bawah. Nanti akan tersisa satu saja seperti ini:
    Demo: http://huatchuuu.blogspot.com/2009/01/huatchuuu.html

    Tambahan:
    Kode yang Saya temukan dalam template ini juga sedikit berbeda:

    <div class='post-info2'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:postCommentMsg/>
    </a>
    </b:if>
    </b:if>
    </div>

    By Blogger Taufik Nurrohman, at Saturday, March 24, 2012 at 8:30:00 PM GMT+7  

  • msh blom bisa sob..., langkah pertama dan kedua itu dah betul ya...??? trus kode yg sobat kasi dlm komentar itu langkah ketiga ya..?? dan kode itu harus dihapus..???, terima kasih... :)

    By Blogger Rohis Facebook, at Saturday, April 7, 2012 at 12:07:00 PM GMT+7  

  • @Rohis Facebook Bukan, itu cuma sebagai dokumentasi saja bahwa ada beberapa template yang menggunakan kerangka formulir komentar yang berbeda seperti itu. Blogger memang terlalu banyak sistem otomatisasinya. Di satu sisi itu sangat memudahkan kita dan menghindarkan kita dari kesalahan fatal, namun di sisi lain juga membuat kita sedikit kerepotan. Posting ini memang masih dalam tahap eksperimen. Setidaknya Saya sudah berhasil melakukannya :)
    Dicoba-coba saja (kalau bisa di blog percobaan)

    By Blogger Taufik Nurrohman, at Saturday, April 7, 2012 at 4:49:00 PM GMT+7  

  • wahahahaha...
    aku berhasil memindahkan kotak komentar di atas, makasih kang
    tapi gimana caranya memberi kotak roll, agar di komentarnya tidak terlalu panjang, bagi tipnya kang..

    By Blogger Budhi Insan, at Monday, April 9, 2012 at 1:27:00 PM GMT+7  

  • @Insan Robbanihehe ko' aq gk bisa ya..??

    By Blogger Rohis Facebook, at Monday, April 9, 2012 at 1:57:00 PM GMT+7  

  • @Insan Robbanituk membuat scroll aq tau sob.., tp gmn klo kita saling tukar ilmu.., hehehe.., tau kan maksud sy *smile lebar..

    By Blogger Rohis Facebook, at Monday, April 9, 2012 at 1:58:00 PM GMT+7  

  • @Insan Robbani Susunan kerangkanya bermacam-macam, tapi biasanya menggunakan elemen #comment-block atau #commentlist. Nah, dengan modal ID tersebut kita bisa buat seperti ini:

    #comment-block,
    #commentlist {
    max-height:300px;
    overflow:auto;
    }


    Tapi setahu Saya pak Insan Robbani sudah menggunakan model thread comments seperti blog Saya. Karena elemennya menggunakan ID yang tidak standar, maka bisa mencoba menggunakan ID dari elemen pembungkus daftar komentar pada model komentar ini:

    #cm_block {
    max-height:300px;
    overflow:auto;
    }


    NB: Kang Rohis mulai horror nih haha! (-.-,)

    By Blogger Taufik Nurrohman, at Monday, April 9, 2012 at 4:15:00 PM GMT+7  

  • mas, kan saya make fungsi scroll di komentar blog saya.. masalahnya, kok formulir komentarnya juga ikut masuk ke area scroll? padahal biasanya kan yang masuk area scroll cuma komentarnya doang, tidak dgn formulir komentarnya..
    http://3.bp.blogspot.com/-neE4PQOPyXs/T-VTBYbNk3I/AAAAAAAABA0/l0L6_zxzU8E/s1600/hhh.png

    By Blogger Farid Wajdi Kardbri, at Saturday, June 23, 2012 at 12:25:00 PM GMT+7  

  • @Farid Wajdi Kardbri Coba ganti selektornya jadi #comment-editor

    By Blogger Taufik Nurrohman, at Sunday, July 8, 2012 at 3:09:00 PM GMT+7  

  • Terima kasih atas bantuannya

    By Anonymous Anonymous, at Monday, February 11, 2013 at 6:09:00 AM GMT+7  

  • gan, gimana caranya pindahin comment aslinya blogger ke halaman multi tab??
    http://xclab.blogspot.com/2012/05/kartu-as.html

    By Anonymous Anonymous, at Sunday, March 31, 2013 at 10:20:00 PM GMT+7  

  • untuk yang kedua apa memang beda code yang harus di cut... mohon bantuannya

    By Blogger Unknown, at Wednesday, April 3, 2013 at 7:47:00 PM GMT+7  

  • sudah saya pindah kedua kode, masih ada dua kotak komentar. satu diatas dan satu lagi di bawah komentar. mohon bantuan mas.. ini web saya www.tbstsystem.com

    By Blogger Unknown, at Wednesday, April 3, 2013 at 8:11:00 PM GMT+7  

  • Kalau untuk versi sekarang biasanya ada lagi kode seperti ini:

    <p class='comment-footer'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    </p>


    Tapi percuma saja dipindah, karena hasil akhirnya nanti akan tetap muncul formulir baru yang akan disisipkan secara otomatis ke bagian bawah oleh JavaScript. Saya akan mengategorikan posting ini sebagai posting kadaluarsa.

    By Blogger Taufik Nurrohman, at Thursday, April 4, 2013 at 8:15:00 AM GMT+7  

  • solusinya supaya kotak komentar cuman 1 bagaimana mas

    By Blogger Unknown, at Saturday, April 6, 2013 at 6:37:00 PM GMT+7  

  • yaaaaahh..... kadaluarsa ckck.....

    By Blogger budkalon, at Friday, April 12, 2013 at 1:16:00 PM GMT+7  

  • Kang, saya mencoba beberapa cara untuk melakukan hal ini, dan memang Blogger secara otomatis akan langsung menyisipkan kembali formulir komentar pada tempat semula yang membuat formulir komentarnya menjadi ganda. :( Tapi setelah beberapa cara dilakukan, saya berhasil melakukannya, cukup membungkus bagian <div class='comment_form'> dengan komentar HTML, kemudian menyalin bagian <div class='comment_form'> ke atas bagian daftar komentar, maka Blogger tidak akan menyadarinya... :yaya:

    Ahhh... saya memang tidak pintar menjelaskan :p Untuk lebih jelasnya, ini kode yang saya pakai:
    <div id='comment_block'>
    ========FORMULIR KOMENTAR BARU DIMULAI=======
    <div class='comment_form'>
    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </div>
    =============FORMULIR KOMENTAR BARU SELESAI==========

    <b:loop values='data:post.comments' var='comment'>
    ================================
    LOOP DAFTAR KOMENTAR
    ================================
    </b:loop>
    </div>
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
    ============================
    PAGINASI KOMENTAR
    ============================
    </b:if>
    <div class='clear'/>

    ==============FORMULIR KOMENTAR LAMA============
    <!--<div class='comment_form'>

    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>

    <b:include data='post' name='threaded-comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </div>-->

    By Blogger budkalon, at Saturday, June 18, 2016 at 6:30:00 PM GMT+7  

  • Sip mas.

    By Blogger Taufik Nurrohman, at Tuesday, June 21, 2016 at 6:00:00 AM GMT+7  

Post a Comment



<< Home