41 Menambahkan Reply Button Pada Komentar Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

  Kali ini saya ingin mengetengahkan sebuah trik sederhana hasil pengembangan seorang blogger luar Chen asal china, yaitu bagaimana cara menambahkan reply comment atau tombol reply pada form comment blogger. Karena opsi komentar blogger memang masih nampak kaku dibanding blog dengan platfrom lainnya seperti wordpress yang diantaranya telah tersedianya opsi reply comment hanya dengan sekali klik.

Bagi yang ingin mengetahui cara memasang tombol reply comment silahkan ikuti tutorial berikut:

Menambahkan Reply Button Pada Komentar Blogger

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> centang kotak kecil bertuliskan Expand Template Widget

2. Kemudian cari kode berikut jika ingin memasang reply comment seperti contoh gambar pertama:

<data:commentPostedByMsg/>

Jika ingin memasang hanya reply comment seperti gambar kedua, cari kode berikut:

<b:includable id='commentDeleteIcon' var='comment'>

3. Selanjutnya letakkan kode berikut setelah kode pada point nomor 2

Jika hanya menggunakan tulisan reply comment seperti gambar pertama:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

Jika ingin menggunakan image tombol reply comment seperti gambar kedua:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='URL image sobat disini'/></a></span>

Catatan: Tulisan yang berwarna merah (Letakkan blog ID sobat disini) ganti dengan ID blog sobat. Cara mengetahui ID blog, pada saat log in pada account sobat dan hendak menulis postingan baru, perhatikan tampilan kotak atas tempat URL pada browser:

image 

Tulisan warna merah URL image sobat disini: Bisa sobat isi dengan URL berikut atau URL image sendiri, ingat URL image harus diawali dan ditutp dengan tanda " atau '

reply-blue_thumb[1]

http://sites.google.com/site/amatullah83/background/reply-blue_thumb%5B1%5D.png

reply-gray_thumb[1]

http://sites.google.com/site/amatullah83/background/reply-gray_thumb%5B1%5D.png

 reply-green_thumb[1]

http://sites.google.com/site/amatullah83/background/reply-green_thumb%5B1%5D.png

reply-pink_thumb[1]

http://sites.google.com/site/amatullah83/background/reply-pink_thumb%5B1%5D.png

 reply-red_thumb[1]

http://sites.google.com/site/amatullah83/background/reply-red_thumb%5B1%5D.png

4. Simpan template, lihat hasilnya diblog sobat.

Semoga bermanfaat. Ingin melihat live demo reply comment disini, untuk live demo reply comment dengan menggunakan image lihat disini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

41 komentar :

  1. Wah trick menarik lagi nih..., emang sudah lama saya mencari tombol reply seperti ini buat Blogspot. (kalau WP dan Joomla emang cukup mudah).

    O ya Ukhti, kenapa setelah saya coba reply pada live demo muncul tulisan seperti ini "@el-taufiq89.net"?
    maksudnya apa, apa jangan dihapus?.

    Terima kasih ukhti, saya coba dulu pada salah satu blog saya sambil di utak-atik sedikit.

    BalasHapus
  2. ihh kereen,,, pada saat bw udah pernah ketemu kayak gini pada sobat blogger, dan baru tau caranya sekarang.. ntr aja ah dibookmark dulu :)

    syukron atas ilmu2nya ukhti..!

    BalasHapus
  3. wew,,,,tips yg menarik skali...
    dicoba ah...

    BalasHapus
  4. haduuuuh...kok aku coba gagal ya???
    hehehehe

    BalasHapus
  5. @ Yuda: Terserah, bisa dihapus bisa juga tidak. Tp klu mau jawab komentar el-taufiq khn berarti lbh mudah krn langsung aja khn?

    @ Ducky: Postingan ini mmg trinspirasi dari prtanyaan anda. Makasih

    @ Riesta: Knpa? Coba lg yuk dgn sdkt ketelitian dan kesabara! Moga berhasil!

    BalasHapus
  6. @riesti: pada kode Comment' src='URL image sobat disini'> tambahkan kode penutup (/) EX: URL image sobat disini'/>

    BalasHapus
  7. oya kenapa fungsi reply-nya gak seperti pada wordpress dll.. untuk reply komentar nomer 1 kok tetep reply-nya ada dipaling bawah..

    BalasHapus
  8. @ Anonim: Pakai / atau tidak gpp kok. Coba aja deh!.

    Fungsi reply ini hanya memudahkan kita biar g' nulis secara manual tuk menjawab komentar exp: @ anonim. Silahkan cek dan tes dulu bro!

    Sdngkn klu pgn yg mirip wordpress dimana komentar jawaban tepat berada dibawah kolom komentar yg ingin dijawab, Itu ada trik sendiri yg berbeda dan lumayan panjang dan ribet. InsyaAllah sy posting pada kesempatan yang lain.

    Kok jd person misterius? Gpp kok sy terima saran dan kritik membangun.

    Thanks apresiasinya.

    BalasHapus
  9. betul tuh harus ditambahkan "/" pada
    thanks buat anonim yang telah menjelaskan... ^^

    BalasHapus
  10. @ Vincent: Klu URL diawali dan ditutup dgn tanda " memang harus tapi ditutup dgn tanda / tidak harus ttp bekerja kok klu ada atau tdkx tanda / diakhir url.

    Ini bukan postingan pertama dan tutorial pertama yg menyisipkan URL baik link atau image yg telah sy terapkan.

    BalasHapus
  11. makasih untuk tipsnya,emang mempermudah sih, cuman dikiranya tampilannya sama kaya wp, hohoho ternyata tetep di bawah,:)

    BalasHapus
  12. @ Naila: Iya mmg tetap dipaling akhir tampilnya hanya yg mempermudah kita g' nulis manual balas komentarx lg dgn contoh seperti awal tanggapan sy tuk komentar anda @ Naila

    Klu yg mirip wordpress nanti sy posting pada kesempatan yg lain. Krn kodex sdkt panjang dan jg mungkin ngedit HTMLx rumit bg sebbagian blogger pemula.

    Makasih jg apresiasinya.

    BalasHapus
  13. mantap om artikelnya
    membentu banget buat newbie spt ane

    ditunggu kunjungan baliknya ya

    BalasHapus
  14. makasi ya,,. ni artikel sangat mendukung buat aku. makasi.. jangan lupa follow balik ya

    BalasHapus
  15. it doesn't work for my blog
    hiks..
    udah coba 22nya
    yg pertama, muncul, tapi pas dicobain ngomen di sana, eh not found page
    trus pake yg kedua ga bs di save
    katanya gini:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "img" must be terminated by the matching end-tag "".

    kenapa ya? udah ngikutin dg bener kok..

    oia, ngeletakin yang dibawah kode yg dicari itu pake enter ga ke bawahnya?atau diletakin aja di samping?

    BalasHapus
  16. @ Micelia Amalia Sari: Setelah membaca permasalah yg anda temukan mk sy sampaikan ke anda. Tutorial ini bisa diterapkan pada blog anda. Maaf anda hanya sedikit kurang teliti menerapkanx.

    Untuk yg pertama anda berhasil membuatx tp stlh mau reply comment page not found. Coba cek kembali blog ID anda!

    Untuk yang kedua: Coba pahami pesan error yang disampaikan! Nah artinya anda tidak mengawali dan menutup URL image dengan tanda "

    Silahkan coba lagi, perbaiki sedikit kesalahan yg ada. InsyaAllah berhasil.

    Terimakasih apresiasinya.

    BalasHapus
  17. kalau kita misalkan sudah masang nie
    pada saat melakukan reply URLnya kemana???ke blog si pengomentar atau bisa berkomentar secara otomatis ke blog si pengomentar??
    maaf ya bawel maklum newbie hehehe

    BalasHapus
  18. @ Gudang Ilmu: Untuk lebih jelasnya bagaimana tutorial ini bekerja, lihat aja langsung demonya! Oke?! Makasih apresiasinya.

    BalasHapus
  19. salam..bisa diambil contoh button nya ya..

    p/s semalam sudah tinggal pesan..tapi tak nampak komen nya di mana..

    BalasHapus
  20. @ cikmin: Iya, mmg ditawarkan khn tuk pengunjung. Silahkan. Makasih apresiasinya.

    BalasHapus
  21. sedikit koreksi mbak... di kode <img alt='Reply To This Comment' src='URL image sobat disini'>

    kurang tanda /
    jadi nya harusnya

    <img alt='Reply To This Comment' src='URL image sobat disini'/>


    tapi di pasang di blogku kok nggak bisa yah..

    BalasHapus
  22. @ Ali Mas'adi: Terimakasih Koreksinya, sudah sy update.

    BalasHapus
  23. *Saran :
    klo mo reply yg gampang pake kolom komentar intensedebate.com aja, contohnya bisa dilihat di blog saya yg ini http://aura-beninghati.blogspot.com/

    n tutornya bisa dilihat disini http://aura2506.blogspot.com/2010/01/kolom-komentar-dengan-intensedebate.html

    ^
    ^
    Salam kenal ya.... ^__^

    BalasHapus
  24. @ Haura: iya, mmg mudah pakai kolom komentar intensedebate.com selain tampilanx juga memukau, tapi sbg blogger tdk berkenan memasang kolom komentar dari pihak ketiga karena selain ingin memudahkan pengunjung berkomentar tanpa log in juga krn kolom komentar trsbt tdk memberikn backlink bg visitor dan mempengaruhi widget jumlah komentar blog.

    Salam kenak kembali.
    Makasih kunjungan dan apresiasinya.

    BalasHapus
  25. Thak's tutornya... tapi pijam dulu ya url imagenya...

    BalasHapus
  26. hahaahahhah masih tetep aja gag bisa padahal waktu di save gag ada kesalahan tp koq gag ada perubahan ya tolong dong...

    BalasHapus
  27. wah, info yg berguna nih biar bisa mereply komentar yg masuk, trims ya. salam kenal

    BalasHapus
  28. salam ya Ukhti... makasih...udah bisa pasang reply di blog ana... alhamdulillah...
    btw, main2 dong ke blog saya http://muxlimo.blogspot.com/

    :)

    BalasHapus
  29. Thank's .....
    sangat membantu sekali gan...
    please visit me back....

    http://ilalanghilang.blogspot.com/

    BalasHapus
  30. Alhamdulillah bisa, syukron ya ukh, pinjem dl link button reply nya...jazaakillaahukhoyr..

    BalasHapus
  31. mantepp gan,.,gw udh coba,.,awalnya gw tkut gagal,.,tpi stlah dcba,tyrnyta sukses,.,ssSSIIIppp,.THanks gan,.,.

    BalasHapus
  32. wah bagus juga mbak,wah blog sobat bagus banget nih aku iri jadinya,.,.,..,,.!!

    BalasHapus
  33. keren posting ini, boleh aku coba yaa


    salam kenal

    BalasHapus
  34. gan terima kasih banyak ya infonya :)

    BalasHapus
  35. makasih buat trik2nya..udah dicoba dan berhasil..:)

    BalasHapus
    Balasan
    1. Sama-sama, terima kasih juga tuk apresiasinya Dwi.

      Hapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!