Hakimtea Dot Com

Membuat Form Komentar di Bawah Postingan Blogger (Layaknya Wordpress)

02.17.2008 by Hakimtea in Tips, Tutorial

Membuat form komentar di bawah postingan blogger layaknya wordpress ini merupakan modifikasi dari Jacky Supit atau yang lebih kita kenal dengan Jackbook. Beberapa saat yang lalu saya mulai menggunakan form ini dan berhasil lalu laporannya saya posting disini. Kita tahu blogger memang belum menyediakan form komentar langsung di bawah postingan untuk memudahkan pembaca blog kita berkomentar ria . Kadang menjadi alasan tersendiri untuk tidak meninggalkan komentar karena mesti klik sana untuk membuka halaman baru atau klik sini keluar popup windows terlebih dulu.

Tutorial ini kan sudah ada di jackbook kenapa ga simple saja menunjukkan link kesana? Memang sudah ada tapi itu kan versinya bahasa inggris. Pertimbangan saya dua; Pertama, tadi itu mengingat tidak sedikit yang terjun ke dunia blogger dengan keterbatasan pemahaman bahasa inggris maka saya coba terjemahkan bebas dari Jackbook. Kedua, lumayan buat nambah isi blog, saya kan jarang posting Oke kita langsung saja,

LANGKAH PERTAMA:

login pada account blogger Anda pilih Layout >Edit HTML. Namun sebelum kita mulai lebih baik Anda membackup terlebih dulu template yang sudah ada, seandainya terjadi kesalahan Anda tinggal mengembalikan template Anda semula. Dan blogger memang baik hati selalu mengingatkan jika kita masuk menu Edit HTML,

Backup/Restore Template
Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut. Download Template Lengkap

Cara membackup mudah saja tinggal klik Download Template Lengkap simpan pada hard drive komputer Anda.

LANGKAH KEDUA:

Pada menu Edit HTML tersebut beri centang/ceklis pada Expand Template Widget Kemudian cari kode HTML berikut ini,

<b:includable id=’comments’ var=’post’><div class=’comments’ id=’comments’><a name=’comments’/><b:if cond=’data:post.allowComments’><h4><b:if cond=’data:post.numComments == 1′>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id=’comments-block’><b:loop values=’data:post.comments’ var=’comment’><dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’><a expr:name=’”comment-” + data:comment.id’/><b:if cond=’data:comment.authorUrl’><a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class=’comment-body’><b:if cond=’data:comment.isDeleted’><span class=’deleted-comment’><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class=’comment-footer’><span class=’comment-timestamp’><a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’><data:comment.timestamp/></a><b:include data=’comment’ name=’commentDeleteIcon’/></span></dd></b:loop></dl><p class=’comment-footer’><a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a></p></b:if><div id=’backlinks-container’><div expr:id=’data:widget.instanceId + “_backlinks-container”‘><b:if cond=’data:post.showBacklinks’><b:include data=’post’ name=’backlinks’/></b:if></div></div></div></b:includable>

LANGKAH KETIGA:
Ganti kode html tersebut dengan kode ini “Dapatkan kodenya klik disini“

Catatan: Karena kode htmlnya terlalu panjang dan bakal banyak makan tempat di postingan ini, maka saya simpan di googlepages. Untuk membukanya bisa dengan dua cara; pertama klik kanan di “Dapatkan kodenya klik disini” kemudian Save Target as atau Save Link as. Kedua, klik kanan open in new tab (jika Anda menggunakan firefox). Maka Anda akan melihat kode htmlnya yang begitu panjang.

LANGKAH KEEMPAT:

Copy kode html berikut pas berada di bawah </body> di atas </html>. Dengan kata lain diantara keduanya. Kode tersebut berada paling bawah.

<!– www.jackbook.com –><!– this to hide and show el –><script languange=’javascript’>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = ‘none’;jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = ‘block’;}</script><!– www.jackbook.com –>



LANGKAH KELIMA:

Temukan kode di bawah ini,

<span class=’post-comment-link’><b:if cond=’data:blog.pageType != “item”‘><b:if cond=’data:post.allowComments’><a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>
Hapus dan gantikan dengan kode di bawah ini,

<span class=’post-comment-link’><b:if cond=’data:blog.pageType != “item”‘><b:if cond=’data:post.allowComments’><a class=’comment-link’ expr:href=’data:post.url + “#comments”‘ ><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>


LANGKAH KEENAM:

Klik SIMPAN TEMPLATE (Save) dan “Meniru gaya Jack” Ucapkan terimakasih pada saya terutama pada Jack tentunya

LANGKAH KETUJUH:

Pindah ke menu PENGATURAN > KOMENTAR dan pastikan “Tampilkan komentar dalam sebuah window popup?” dalam keadaan contrengannya (ceklis) pada “YA”. Kalo sudah klik SIMPAN PENGATURAN.

Coba lihat hasilnya…! Bagaimana? Keren kan

____________

Gambar dari www.cartoonstock.com

Update: Saya coba petunjuk ini pada blog percobaan saya disini tanpa melihat tutorial aslinya dan…. Sukses! Silahkan Anda coba…

Popularity: 8% [?]

Related posts :

• Mimin, Template 4 in 3 Column Plus Form Komentar Yang "Super Sexy dan Telanjang"
Gila judul postingnya... ;-) Mo nyoba nyuri2 accidental SEO ya?
• Blog Directory and New Comment Form
No matter how hard I learn, no matter how frequent
• Kontak
Form kontak ini khusus digunakan untuk bersilaturahmi dan memasang iklan
• Highlighted Comment, Komentar Berbeda
Dulu saya sempat menggunakan plugin highlighted comment untuk membuat perbedaan
• Mengatasi Kerenggangan (Jarak) Ketika Membuat Table di Blogspot
Beberapa hari yang lalu ada pertanyaan masuk lewat form komentar

36 comments for “ Membuat Form Komentar di Bawah Postingan Blogger (Layaknya Wordpress) ” Thanks...!

1. # 1 lita uditomo :
   February 18th, 2008 at 12:33 am

   wah, kapan-kapan harus coba nih..tks sharingnya ya…

2. # 2 hakimtea :
   February 18th, 2008 at 6:10 am

   mba lita, pakabar gugus depannya ^_^

   Jangan kapan2 mba… sekarang aja dicoba

3. # 3 andi CIHUY :
   February 18th, 2008 at 9:17 am

   gw dulu sempet pake ginian kim, tapi ya berhubung gw dah ganti leot, ya males lagi gw ngatur HTML nya… yg ada aja lah gw terima….

   kim, roko loe yg dua bungkus kok ada dikamar gw ya… loe tinggalin buat gw ya… yah elu, gw sih ga lepel make roko dari j*mbut jagung… rasanya kurang mantaf…. wakakakak

   ok thanx eniweh…

   note : ga di link gw cium luh…

4. # 4 hakimtea :
   February 18th, 2008 at 9:43 am

   GANTI LAGI…!!! gw maksa…! *pake tutorial punya gw*

   Note: Gw dah link, daripada dicium ma lo *najis dah* ^_^

   ga link gw juga, ntar malem lilinnya ga gw tiup, biar lo kena *wakakak*

5. # 5 spypark.reborn :
   February 18th, 2008 at 11:55 pm

   tiup lilin ???
   ngepet ??
   hwkwkwkwkwk ….
   kamana wae atuch …

6. # 6 Novee :
   February 20th, 2008 at 5:19 am

   wah tau ajah neh kl eyke termasuk yg sering kendala bahasa… heheee… wajarlah, secara katrok gitu lho…
   drpd posting pk bhs inggris, saya lebih suka blogger yg posting pk bahasa Rusia. Sama2 ga ngerti maksud nya tp bahasa Rusia lebih njlimet dibaca nya. Jadi skaliyan ajalah bikin kram otak… wakakakkk
   *hihihiiii… kopi paste ajeh…*

7. # 7 Novee :
   February 20th, 2008 at 5:24 am

   btw koq mao2nya siy ngikutin saran buat ngapus verifikasi kata… jadi tersanjung enam neh…
   *gyahahaaa*

8. # 8 -tan :
   February 20th, 2008 at 8:18 am

   bagus nih… tapi sayang sekali saya telat menemukan tutorial yang bagus ini, saya udah keburu pindah ke wordpress.

   jadi makin gampang komen di blogspot

9. # 9 hakimtea :
   February 20th, 2008 at 11:10 am

   @ Novee
   Apa sih yang nggak buat costumer yg penting tidak menyalahi norma agama dan undang2 yg berlaku ^_^ biar puas; saya puas, Anda puas, mereka puas, semua puas… *apa sih* ^_^

   Note: Baru tau kalo Tersanjung udah nyampe enam ya

   @ -tan
   pindah lagi ajah, gitu aja kok repot

10. # 10 ichaAwe :
    February 20th, 2008 at 5:20 pm

    wah tengkyuh bgt nih … besok coba ah… biar nyaingin WP

11. # 11 hakimtea :
    February 20th, 2008 at 5:27 pm

    sama2… yo semangat qt brsaing ma wp… blogger juga lebih keren ^_^

12. # 12 anastasiarta :
    February 21st, 2008 at 5:28 pm

    …(clingak clinguk dulu…takut dibilang sok kenal)…tp ga tahan liat postingan ini..arrghhh kenapa baru liat yang beginian…terlanjur pindah ke wp ..*puyeng* =(

    *dadah*

13. # 13 hakimtea :
    February 22nd, 2008 at 3:08 am

    (siapa nih yg clingak clinguk… so kenal banget) pis ^_^

    yaaah… Anas…! Pindah lagi dong nas… ^_^

14. # 14 Reorid lyrics :
    February 25th, 2008 at 9:02 pm

    ikutan

15. # 15 d1ck'5 :
    March 3rd, 2008 at 11:05 pm

    makasih Om……………..

16. # 16 Hakimtea :
    March 4th, 2008 at 2:26 am

    yoi de’…….

17. # 17 Robbie Alca :
    March 7th, 2008 at 4:54 am

    salam bro, sorry udah lama gk silahturahmi,oh ya..mw nanya nih.saya sudah mengikuti semua intruksi yg anda berikan agar tampilan komentar saya seperti tampilan komentar anda.yang jadi masalah ko’ hasilnya gk sama dengan Form komentar anda sebagai contoh.jika form komentar di blog saya tidak bisa tampil langsung.

    kasih solusi dong bro….Please ya bro…

    Wslam

18. # 18 Hakimtea :
    March 7th, 2008 at 7:37 am

    salam juga, sama2 bro rob ^_^ saya juga dah lama ga silaturahim . Saya sudah kunjungi blog Anda, mungkin ada yang terlewat mas rob! Pastinya template di backup kan? Nah restore aja aja backup-annya dan coba lagi yg lebih teliti. Moga sukses!

19. # 19 Iman Fauzi :
    March 15th, 2008 at 10:16 am

    mas hakim cara ketengahinnya gmn? coba liat di blogku….

    makasih
    wassalam,

20. # 20 Hakimtea :
    March 15th, 2008 at 2:30 pm

    cara untuk ketengahin form komentar ya wa…? oke, pergi ke layout >Edit Html, click dulu “Expand Template Widget” cari kode berikut,

    <div id=’comment-parent’ onmouseover=’showcomment("hoverme", "comment-child");’ style=’margin-bottom: 50px;’>

    Tinggal selipkan kode ini, align=’center’ setelah kode <div jadi keseluruhan kodenya seperti ini,

    <div align=’center’ id=’comment-parent’ onmouseover=’showcomment("hoverme", "comment-child");’ style=’margin-bottom: 50px;’>

    Silahkan man di coba semoga berhasil

    PS: olah warna background formnya ya wa biar sesuai dengan template, caranya… otak-atik sendiri donks biar lebih pinter…

21. # 21 Iman Fauzi :
    March 16th, 2008 at 1:45 am

    trims mas hakim atas bantuannya…
    wassalam,

22. # 22 Hakimtea :
    March 16th, 2008 at 8:08 am

    sama2 wa… sukses ya

23. # 23 adi :
    April 2nd, 2008 at 3:39 am

    link ‘disini’ ama ’saya’ masih ke link lama

24. # 24 Hakimtea :
    April 2nd, 2008 at 7:02 am

    update sukses.. tengkiyu di…

25. # 25 Dede Ariyanto :
    May 3rd, 2008 at 10:55 am

    Mas aku kesulitan dalam menemukan kode yang harus dihapus di edit HTML ? mohon bantuannya…. bagaimana jika tidak ditemukan???? aku menggunakan templates asli blogger………
    tolongin aku ya………………..

26. # 26 hakimtea :
    May 3rd, 2008 at 7:52 pm

    Untuk mencarinya gunakan jalan pintas mas Dede, copy kode yg mesti direplace, gunakan Ctrl+F, paste kode yg dicopy tadi. Kalo juga tidak ketemu, cari-cari yg agak mirip seperti struktur kode yg mesti di replace.

    Selamat mencoba

    —————————–
    Update: Ada masukan dari Dede yang mencoba tips ini untuk langkah keempat, katanya:

    Mas kayaknya kalo boleh usul ditutorial ada kesalahan yang betul seh di taruh di atas kode java scrip bukan diantara dan tadi aku dah coba berhasil.

    Memang masing2 template berbeda strukturnya, silahkan Anda coba jika langkah di atas tidak berhasil. Terimakasih!

    PS.Tutorial ini diteliti dan dibuat oleh JACKBOOK. Anda BOLEH menghilangkan LINK menuju blog saya, tapi please…! Hargai kreatifitas JACKBOOK dengan tidak menghilangkan linknya!!!

27. # 27 Bintang Disurga :
    August 30th, 2008 at 12:23 am

    Selamat malam Mas Hakim
    Thanks ya
    karena saya sudah memakai template 3 kolom nya Mas hakim di layout blog saya.
    Tapi saya gagal di “Membuat Form Komentar di Bawah Postingan Blogger (Layaknya Wordpress)”
    Gagalnya di langkah kelima…karena saya tidak menemukan html yang sama seperti petunjuk mas saya coba yang mirip banget….eh gagal pesannya dari om blog “saya tidak menutup html dengan benar’
    Minta petunjuk Mas Hakim
    thanks sekali lagi.

28. # 28 Bintang Disurga :
    August 30th, 2008 at 12:38 am

    Mas Hakim kalau sudah online, jangan lupa petunjuknya
    Maklum Mas newbie

29. # 29 Bintang Disurga :
    September 1st, 2008 at 8:56 pm

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup.

    setelah selesai ikutin petunjuk Mas tuch ada pesan dari om htm bagaimana ini,salahnya dimana ya Mas

30. # 30 GEOFISIKA :
    December 29th, 2008 at 12:42 am

    kode yang pertama yang ini “<b:includable id=…” tidak ada kang! gimana ya?

31. # 31 Lazuardi :
    March 11th, 2009 at 6:48 pm

    Saya coba download kode penggantinya kok ga bisa ya Mas, muncul begini “internet explorer cannot download ……formkomenbawahpostblogger.txt from hakimtea.googlepages.com. The server returned an invalid or unrecognized respons” Kenapa ya, bisa bantu. Thanks

32. # 32 sadam :
    March 30th, 2009 at 5:04 pm

    mantaps bro…

33. # 33 herry :
    May 20th, 2009 at 9:31 am

    kang kode penggantinya masih nofollow yah???
    klo mau do follow cara nya sama kaya yang tutor merubah nofollow menjadi dofollow ngga?

34. # 34 Mr Ogo Oluwa :
    June 11th, 2009 at 9:36 am

    CELLULAR BUSINESS LIMITED is a registered and one of the best so far the world and legitimate company that offer the whole world access to buyer Electronic product at affordable prices. Our product are 1st factory condition with 2years factory waranty in brand new original box with complete accessories . We operate a 100% return policy guarantee . Our aim and objective is to make our customers a happy buyer. We allow 10% on the purchase of minimium order of 10units and 3 mobile phones free as you buy up to 10units . We sell in Unit and also sell in Bulk.

    Items purchased will be delivered at your door to beat the summer and city traffic.

    No more losing time running around the city, shop from the comfort of your home and office, select items, place your order and our team will bring the items right to your doorstep.

    Shopping made Easy.

    FULL NAME:::::::::::::::
    ADDRESS:::::::::::::::::
    CITY::::::::::::::::::::::::
    STATE::::::::::::::::::::::
    ZIP CODE:::::::::::::::::
    COUNTRY::::::::::::::::
    TELEPHONE NUMBER :::::

    Contact us for Price List of some products we have

    Do contact us via email for more enquries: cellularbusinessltd@hotmail.com

    Yahoo Messenger : cellularbusinessltd@yahoo.com

    ORDER INFORMATION :
    Minimum Order : 5/10 units
    Shipping Method : FedEx and UPS.
    Delivery Time : 2DAYS Delivery To Your Door Step.

    EMAIL: cellularbusinessltd@hotmail.com

    For MSN Contact : cellularbusinessltd@hotmail.com

    Mode Of Acceptive Payments:
    -Western Union Money Transfer:
    -Money Gram:
    -(T/T) Bank To Bank:

    Our phones are imported from Finland,Hungary and Singapore; they are factory sealed with original packets with complete accessory, e.g. charger, extra battery and software c d. The phones are sim free and it’s never lock to any network, specification: (europeans/usa-specifications) general network gsm 900/gsm 1800/gsm 1900 platform – tri band (gsm900 + 1800 + 1900 MHz: country of manufactured origin: Finland,Hungary and Singapore.

    1. Complete accessories(Well packed and sealed in original company box)
    2. Unlocked / sim free.
    3. Brand new (original manufacturer) box – no copies
    4. All phones have English language as default
    5. All material (software, manual) – car chargers – home chargers – usb
    data cables -holsters/belt clips – wireless headsets(bluetooth) -
    leather and non-leather carrying cases – batteries. if you are interested,
    forward your questions and inquires to us via email your order and
    shipping details.

    we give 1 year warranty for every product sold out to our costumers, our product are company class 1 tested and approved by global standard organization of wireless industries, Brand new merchandise with complete accessories, extra charger and battery.

    NOTE : Order 5 unit and get 2 free
    Shipping fees : Free shipping for bulk purchase : FedEx, DHL or UPS
    Delivery Time : 2 days maximum.

    Place of origin: Malaysia
    Payment Terms:Western union,bank transfer,T/T
    Minimum Order Quantity:50 Piece(s)
    Delivery Time: 1-3 working day

    Reviews
    Tell us what you think about this products,share your opinion with other people.
    If you have any question about this product, please use “Ask us”,or you can Contact Us directly.

    Email : cellularbusinessltd@hotmail.com

    come and enjoy Safe & Trustful Retail and Wholesale

    * Competitive price
    * Best Quality
    * Good Service

    Thanks
    Management.

35. # 35 demilord :
    July 29th, 2009 at 8:12 am

    masih gag bisa nih mas..
    ada error katanya.
    maklum masih newbie.
    

36. # 36 slip lingerie :
    November 28th, 2009 at 9:11 pm

    Great advice, we’re glad you like it. I should just give up and take lessons from you

Leave a Reply