Membuat Form Komentar di Bawah Postingan Blogger (Layaknya Wordpress)

Membuat form komentar di bawah postingan blogger layaknya wordpress ini merupakan modifikasi dari Jacky Supit atau yang lebih kita kenal d...

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

Busby SEO Test SEO Test Age