Membuat Tombol Berkomentar Atau Hash Comment-Form

Tombol Berkomentar Atau Hash Comment-Form
Dengan tombol ini maka akan memudahkan pengunjung yang akan berkomentar untuk menuju comment editor ketika komentar pada postingan sudah banyak sehingga tidak perlu men-scroll halaman dengan mouse. Dengan mengklik tombolnya maka halaman akan langsung 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 kode untuk menampilkan jumlah komentar seperti contoh 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 saya maksud dengan url hash comment-form. Silahkan simpan di antara kode penampil jumlah komentar di atas, seperti 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 kode 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 menggunakan Threaded Comment Hack, url hash comment-form ini tidak berjalan. Untuk solusinya silahkan tambahkan id='comment-form' pada class='comment_form' jadi penampakannya seperti di bawah ini.

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

Selesai dan selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments