Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Membuat 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.

Baca juga:

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:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar