Setting Kotak Komentar Dibawah Posting

Akhirnya sekarang pengguna blogspot boleh untuk sedikit berbangga hati karena pihak blogger.com sudah meluncurkan fitur-fitur barunya walaupun masih dalam tahap uji coba seperti yang telah saya tulis . Kini anda tidak perlu lagi minder karena sering mendapat cemoohan di sebabkan urusan kotak komentar di sini Blogspot yang konon katanya sangat ribet, kini anda bisa membuat backup blog hanya dengan satu kali klik saja, tidak perlu lagi khawatir tidak akan terindeks di google karena Webmaster Tools sudah terintegrasi dengan blogger.
kita mulai aja biar cepat-cepat merasakan kotak komentar langsung di bawah posting.

Langkah #1

1. Silahkan Login ke http://draft.blo gger.com dengan ID blogger anda, ini di maksudkan agar nanti memasang kotak komentarnya langsung bisa di lakukan.
2. Tuju pada blog yang akan anda ubah kodenya. Klik pada Tata Letak
3. Klik tab Edit HTML.
4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.


6. Tunggu beberapa saat sampai proses selesai.
7. Cari kode yang seperti 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>
8. Gantilah kode di atas 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.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>
9. Cari kode seperti di bawah ini, lalu hapus / delete saja :
<!-- 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 -->
10. Cari kode yang seperti di bawah ini :
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <!-- jackbook.com part 1 start --> <!-- <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> --> <div class='onepx'> <dl id='comments-block' style='height: 1px;overflow:hidden;'> <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> div> <!-- <p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> --> <!-- jackbook.com part 1 ends --> <div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'> <img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/> </h3> <!-- this iframe below is your comment form. you can change the height, or add more style property into it --> <div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'> <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/> <br/> <a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a> div> <!-- end of iframe --> div> </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>  
11. Ganti kode di atas dengan kode di bawah 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>
12. Langkah( 1 )Selesai, silahkan sejenak beristirahat dulu agar suasana menjadi tambah rileks.

mulai lagi jika sudah siap.

Langkah  2

1. Masih dalam posisi Edit HTML dan pastikan kotak kecil di samping tulisan Expand Template Widget masih dalam keadaan tercentang.
2. Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda, kalau kata saya "focus saja ke kode yang warna mirah
<p class='comment-footer'>         <b:if cond='data:post.allowComments'>         <a expr:href='data:post.addCommentUrl'             expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>     </b:if> </p>
3. Hapus / delete semua kode di atas lalu ganti dengan kode di bawah ini :
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
4. Klik tombol Simpan Template.
5. Akhirnya langkah (2) pun selesai juga......silahkan santai sejenak kembali untuk menghapai ujian yang terakhir.

ni yang terakhir bro..................


Langkah (3)

1. Klik tab Pengaturan.
2. Klik sub tab Komentar. Tuju Penempatan Formulis Komentar, pilih untuk pilihan Disemat di bawah entri.
   
   
   
   
3. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.
4. Selesai. Silahkan lihat hasilnya, mudah-mudahan langsung sukses.