Busby SEO Test

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: 5% [?]

Possibly related posts: (automatically generated) :

• Mimin, Template 4 in 3 Column Plus Form Komentar Yang "Super Sexy dan Telanjang"
Gila judul postingnya... ;-) Mo nyoba nyuri2 accidental SEO ya? Ga juga, tapi ya bisa dibilang begitu ^_^ mungkin karena
• Blog Directory and New Comment Form
No matter how hard I learn, no matter how frequent I practise, I'm still beginner. Terasakan...? Semakin dalam ilmu kita
• Kontak
Form kontak ini khusus digunakan untuk bersilaturahmi dan memasang iklan banner pada blog www.hakimtea.com ini. Silahkan gunakan form komentar ini
• Highlighted Comment, Komentar Berbeda
Dulu saya sempat menggunakan plugin highlighted comment untuk membuat perbedaan antara komentar yang masuk dan komentar saya pribadi (di blog
• Selamat Datang!
Welcome to Hakimtea.Com. This is my first post! Dear... Sahabat Blogger dimana saja berada... Selamat datang di blog Hakimtea.Com. Blog ini

29 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

Leave a Reply