Membuat Kotak Komentar Dibawah Posting

1.     Login Blog Anda

2.     Klik pada Tata Letak / Layout

3.     Klik tab Edit HTML.

4.     Klik pada tulisan Download Template Lengkap / Download full template di bagian sebelah atas monitor sebelah kanan. 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 --> <!-- actually i almost do nothing with your template, just add that comment, you did it :) -->
<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'> <h3 id='hoverme' style='display:block;'> <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
13. Silahkan anda minum atau makan karna saya mau bikin teh dulu nih ...maklum tenggorokan kering karena bicara panjang lebar 

Sekarang saya sudah selesai minum teh dan topik pembahasan dimulai lagi.

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
<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 / Save Template
5. Akhirnya langkah 2 pun selesai juga,  saatnya saya santai lagi untuk minum segelas teh yang masih tersisa...jangan kepingin yaaa .....kalo kepingin bikin sendiri ya 

Akhirnya habis juga teh ini 

Langkah 3

1. 1. Klik tab Pengaturan / Setting
2. 2. Klik sub tab Komentar / Komments dan pilih Penempatan Formulis Komentar, Disemat di bawah entri / embedded below post
   
   
   
3. 3. Klik tombol Simpan save
4. 4. Selesai.

Posted in: Panduan Blog