Komentar Sehalaman Dengan Posting

Pernah gak sih kamu ngerasa bosen bahkan enggan untuk ninggalin komentar pada blog yang digawangi oleh blogger? Kalau kamu ngerasa begitu aku juga pernah ngerasain kok. Soalnya kita musti buka halaman baru hanya untuk meninggalkan sebuah komentar. Padahal, komentar ini sangat penting bagi kemajuan sebuah blog dan sebagai sarana interaksi antara sang pemilik dan pengunjung.
Karena pentingnya hal itu, aku pun berusaha belajar agar kotak komentar ini bisa berada dibawah postingan kita.
Berikut cara yang bisa ditempuh agar hal itu bisa terwujud.

# LAngkah pertama
1. Masuk ke blogger menggunakan id kamu.
2. Pilih Layout
3. KLik menu Pengaturan
4. Pilih menu Komentar dan cari tulisan Tampilkan komentar dalam sebuah window popup? Pastikan kamu memilih ya dan simpan pengaturan yang kamu buat
# Langkah kedua
1. Klik menu Edit HTML
2. Back Up template kamu
3. Beri tanda centang pada tulisan Expand Template Widget


4. Cari kode yang seperti ada 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 yang kamu temui tersebut dengan kode yang 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='Tinggalkan komentar kamu di sini.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Tinggalkan komentar kamu di sini.'/>

</h3>

<!-- ini adalah bagian iframe. kamu bisa mengganti panjang maupun lebarnya -->

<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.hidupbelajar.co.cc/2008/05/komentar-sehalaman-dengan-posting.html' title='Pengen yang seperti ini?'>Kotak komentar di bawah postingan</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>

6. Sisipkan kode berikut 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 -->

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

8. Ganti kode tersebut dengan yang 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>

9. Simpan template kamu dan lihat hasilnya

Mungkin Kamu Mau Baca Ini: