Membuat Tombol Berkomentar Atau Hash Comment-Form

Membuat Tombol Berkomentar Atau Hash Comment-Form

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

83 Comments Add Comment

nah.. sudah luncur rupanya hehehe.. thankyu mas adhy :)

Balas

Sudah saya cek di blognya :-bd tinggal modif tampilannya saja :D

Balas

udah siap modif mas.. hehehehe... :-bd

Balas

Pantesan saya lihat-lihat dipasar ko kang teh gak ada hehe ternyata datang dengan polesan baru .. mantap kang " Lanjutkaaaaaaaaaannnnnnnnnnnn"

Balas

lo-lo ko tampilannya jadi kacau kang adhy sidebar pada melorot'y gak rapi .. saya pake 1024 x 768 untuk screnshotnya nanti ya hehe

Balas

Iya kang belum fix nih :D

Balas

Sekarang bagaimana kang? :)

Balas
This comment has been removed by the author.

selesai kang, tolong dikasih pendapat ya :) :D

http://dbunggul-site.blogspot.com/

Balas

Keren mas cocok sama temanya... plus icon...kreatif ;-bd

Balas

sip sudah rapi sekarang ...

Balas

Hatur nuhun koreksina kang hehehehe :D

Balas

wah..templatenya baru ya mas? lebih bagusan yang dulu malah tampilannya.. :D

Balas

Hehehehe hanya mindahin menu ke samping kiri jadi statis....

Balas
This comment has been removed by the author.

kunjungan dari malaysia...mas mau nanya ,boleh ngak request tutorial gimana mau tukar tampilan blog post..main wrapper ,post list...

Balas

biasanya pakai tag kondisional

Balas

Untuk tampilan di homepage ya? Betul kata sis Leony, pakai tag conditional untuk mengatur tampilan post di homepage dan simpan kode tag conditionalnya di bawah skin atau ]]></b:skin> seperti ini misalnya

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post h1,.post h2{font-family:Arial;font-weight:400;font-size:16px;line-height:1em;margin:0 0 8px;padding:0;text-transform:uppercase}
.post{background:#fff;border-bottom:1px solid #ccc;margin:10px 0;padding:0 0 10px}
.post-body{width:74%;margin:7px 0 0 0;float:right;border-top:none;padding-top:0px;background:none;text-align:justify}
</style>
</b:if></b:if>

Balas

wahhh.. keren nih.. bisa main gelongsor2 sebelum ngomen :D

Balas

udah menjadi... makasih mas :) LEONY LI

Balas

di pelajari dulu ,script nya mau d simpan di kulkas hehe....nuhun kang

Balas

jadi lebih mudah + ngga usah scrolldown nih, cukup klik tombol berkomentar langung auto ke kotak komentar :)

Balas

dan paling tepat ialah tag conditional, anda harus benar2 memahaminya. dimana elemen yang mau disembunyikan dan mana mau dimunculkan.

Balas

Heheheh sosorodotan kalau bahasa Sunda mah :D

Balas

Kade nging dina Freezer-na kang bilih beku :D

Balas

Ya betul mas itu maksudnya :)

Balas

Trima kasih mas atas penjelasanya salam kenal

Balas

mas kompi, bagaimana kalau back to top digumpetin saja pada halaman home? menurut saya lebih rapi gitu, lagipula tampilan juga tidak panjangkan hehehhe....

Balas

oh ya satu lagi mas, mengapa tidak diatur jarak saja setelah di skoll kebawah dan melewati Blog's Stats baru dimunculin back to topnya? paling tidak tidak menghalangi bagian sidebar hehehe :)

Balas

Siipp sarannya diterima sis :D makasih

Balas

Salam kenal juga :D

Balas

Wah kalau saya perhatikan step by step nih modifikasinya ..
btw kang tombol submit yg ada fhoto akang menghalangi social ikon'y

Balas

kalau blognya kang adhy mah pakai ini cocok dan pantas aja, soalnya yg komen mesti banyak....beda cerita dah sama blogku, heheheh
Tapi saya save lg dah, soalnya infonya bermanfaat bgt

Balas

wew..wew...wew.... baru niyee templatenya :D :D

baru buka blog lagi ini,,eh jalan2 ke blog nya om udah beda :D mantap

Balas

Mantap mas ANdi Keren banget nie..
selaras sama blognya yang makin keren saja.

Balas

lama gk berkunjung,, berubah tampilan nih blognya... semoga makin jaya kang blognya

Balas

bukan masalah banyak dan gaknya sob tapi masalah memberi kemudhan hehe

Balas

baru main blog lagi udah pada residesign. Mantappp :-d

Balas

Ribet buat responsivenya kang hehehehe....

Balas

Hehheheehe... :D biasalah mas suasana baru

Balas

Hanya belajar aja mas :)

Balas

Iya kang cari suasana baru :)

Balas

wih re-design lagi :D, makin seger aja tampilannya :D

Balas

Bisa dicoba nih..

Templatenya keren euy :D

Balas

Iya yang kemarin size blog jadi meleber heheheh :D

Balas

Heheheehe warna-warni :D

Balas

hehhe ternyata telah menggunakan font PT Sans Narrow :-bd

Balas

Hehhehe dengan terpaksa untuk menunjang tampilan hhehehe :D

Balas

beueuuh.. dangsos wae ieu blog.. keren lah :-d
nyuhunkeun hiji deui.. tambih menu HOME ah diluhur :) sok lieur ngeklik sok sanaos tiasa di header

Balas

Muhun kang nu kamari gendut teuing size-na hehehe :D siap kang :D

Balas

wah...berubah lg kang, 1 kolom di homepage warna-warni lg :) keren...
jd penasaran pengen tau cara bikin judul blog berubah warna hehe.....

Balas

Kalau yang ini memang sedikit berkarakter dibanding yg kemaren kang ... ditambah sentuhan oswald .. maaf kang bukan mendahului yg punya widget most populer dan recent post kurang kuat karakternya ...

Balas

Cara ini akan memudahkan pengunjung untuk berkomentar dengan cepat ya mas andhy ?
keren banget saya akan terapkan di blog saya nih

Balas

Iya jadi warna-warni :D itu hanya memberikan warna pada header h1 :)

Balas

makasi kang tutornya, mau dicoba nich... kmrn masalah reply akhirnya mau ngk mau sy pakai alternatif dr pd ngk ada. kang maap oot, utk mengatasi masalah antara page name dan page title yg menyatu gmana ya kang soalnya judul blog sy menyatu antara artikel sama blog namenya... mohon solusi atau di check kak di avanoustic.blogspot.com

Balas
This comment has been removed by the author.

Okedeh, tar ane cb cari :)

Balas

Tampilannya baru lagi :D :-d

Balas

Sip kang saya coba yang lain hehhehe.... :D

Balas

Ya...maksudnya seperti itu mas :D

Balas

Sepertinya sekarang sudah enggak yaa :) tema blognya enak adem :-bd

Balas

Iya mas yang kemarin agak gendutan hehehe :D

Balas

yg bales lebih adem ayem hehehe. hatur nuhun kang... :) :) :)

Balas

Mas Kompi Boleh tahu, gi mana mahu hilangkan "Post A comment" seperti komentar dalam blog mas. Seperti dalam gambar ini: http://3.bp.blogspot.com/-NDjl3ps6QEw/Un84NQTOp1I/AAAAAAAAARA/uk3tfaon4zM/s640/hide.JPG

Balas

Silahkan hapus kode ini

<h3 id='comment-post-message'><data:postCommentMsg/></h3>

Balas

Perlu dicoba ini mas,
jadi lebih mudah jika ada berkomentar.

Balas

Wis udah saaya pasang nih Om.
hehe makasih udah share :)

Balas
This comment has been removed by the author.

Kang tutorial ini di pasang pada blog saya tombol click here for comments nya
Koq merosot ke bawah menghalangi komentar pengunjung apa nya yang
Salah yah Kang. mohon pencerahanya. terima kasih

Balas

ea berhasil kang. Sip deh :-d

Balas

Kang tolong bantu saya ya, pada ikon komentar saya pasang #comment-form
Bisa bekerja bila menggunakan <a name='comment-form'> tapi tidak valid HTML5. Kalau saya ganti menjadi <a href='#comment-form'> valid HTML5 tapi tidak bekerja bila di klik

Balas

Solusinya yaitu pada kode yang saya kasih terakhir di atas mas yaitu kode ini <div class='comment_form' id='comment-form'> (simak bagian terakhir postingan).

Untuk kode <a name='comment-form'> silahkan dihapus saja.

Balas

Terima kasih Kang sudah fix :)

Satu lagi yang ini, hehe
http://html5.validator.nu/?doc=http%3A%2F%2Fasalblitar.blogspot.com%2F2014%2F04%2Fpemilu-tanggal-9-april-2014.html

Pada template kodenya ini Kang
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Balas

Ganti semua kode tadi (kalau ga salah ada 4) ganti dengan kode ini
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

Balas

Oke sudah fix semuanya :) :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×