Menuliskan komentar pada blogspot harus membuka jendela baru. Berikut cara praktis  membuat kotak komentar di bawah postingan :

1. Silahkan Sign in di blogger dengan id ANDA
2. Klik Layout
3. Klim menu Pengaturan
4. Klik menu Komentar
5. Cari tulisan Tampilkan komentar dalam sebuah window popup?, pilih ya.
6. Klik tombol   Simpan pengaturan

Selaunjutnya klik menu LAYOUT

 

 

1. Klik menu Edit HTML
2. Klik tulisan Download Template Lengkap. Silahkan save dulu, biar aman dari marabahaya yang mengancam.
3. Centang kotak kecil yang berada di samping tulisan Expand Template Widget Tunggu beberapa saat sampai proses selesai.

    

    

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

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

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

<!– 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>

 

1. Simpan kode ini di atas kode </body>
   
   

<!– 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 –>

 

1. Cari kode 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.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>

 

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

 

1. Klik tombol simpan template
2. Selesai. Silahkan lihat hasilnya.

Pada langkah yang ke 5 ada kode yang seperti ini :

 

<div style=’height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;’>

Kode width: 440px;, angka 440px menandakan bahwa lebar kotak komentar adalah sebesar 440 pixel, saran saya agar tampil lebih menarik sebaiknya nilai ini di ganti sesuai dengan lebar kolom posting pada template yang sobat pakai, contoh pada blog saya yaitu width:520px