Membuat Tombol Berkomentar Atau Hash Comment-Form

Dengan tombol ini maka akan memudahkan pengunjung yang akan berkomentar untuk menuju comment editor saat komentar pada postingan sudah banyak sehingga tidak perlu men-scroll halaman dengan mouse. Dengan mengklik tombolnya maka halaman akan eksklusif loncat ke comment-form atau comment editor.

Ini hanya memanfaatkan ulr hash untuk comment-form #comment-form atau default blogger yaitu expr:href='data:post.addCommentUrl'. Tinggal pilih salah satunya dan penempatannya biasanya di header komentar disamping jumlah komentar. Nah bagi yang ingin mencobanya silahkan ikuti triknya di bawah ini.

Silahkan cari kode <b:includable id='comments' var='post'> dan persis di bawahnya biasanya ada sekumpulan arahan untuk menampilkan jumlah komentar ibarat pola di bawah ini.

  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>

Silahkan tambahkan url hash comment-form, ada 2 macam dan silahkan pilih salah satunya.

<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Click here for <data:commentLabelPlural/></a>

atau

<a class='click-comment' expr:title='data:commentLabelPlural' expr:href='data:post.addCommentUrl'>Click here for <data:commentLabelPlural/></a>

Kode yang berwarna merah itulah yang aku maksud dengan url hash comment-form. Silahkan simpan di antara arahan penampil jumlah komentar di atas, ibarat penampakan di bawah ini.

  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Click here for <data:commentLabelPlural/></a>
  </b:if>

Atau

  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
<a class='click-comment' expr:title='data:commentLabelPlural' expr:href='data:post.addCommentUrl'>Click here for <data:commentLabelPlural/></a>
  </b:if>

Kemudian tambahkan arahan CSS untuk mengatur tampilannya pada class-nya.

#comments .click-comment{float:right;display:inline-block;background:#f1f1f1;margin-top:18px;padding:10px;font:bold 14px Arial;text-transform:none;border:1px solid #e5e5e5;border-radius:2px;position:relative;color:#555}

Kode CSS di atas hanya sebagai contoh, silahkan utak-atik lagi untuk menyesuaikan dengan tema blog masing-masing.

Nah biasanya untuk yang memakai Threaded Comment Hack, url hash comment-form ini tidak berjalan. Untuk solusinya silahkan tambahkan id='comment-form' pada class='comment_form' jadi penampakannya ibarat di bawah ini.

<div class='comment_form' id='comment-form'>

Selesai dan selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post