Comment Box Inside Post

Update : Tulisan ini sudah tidak up to date, karena sekarang kotak komentar blogger sudah ada yang baru. Silahkan baca di sini!.





Setelah melihat-lihat beberapa pertanyaan yang di ajukan oleh
para sobat, rupanya banyak yang tertarik ingin mengetahui bagaimana
cara membuat kotak komentar langsung berada di bagian bawah postingan
tanpa harus membuka jendela baru seperti yang ada dalam blog ini.
Memang, sepertinya kotak komentar yang bisa langsung berada di bawah
postingan merupakan dambaan dari blogger yang menggunakan jasa di blogspot.




Dulu, saya pernah mengulas mengenai cara membuat kotak komentar yang bisa langsung
di bawah postingan dengan menggunakan fasilitas dari HaloScan yang saya posting
di sini,
akan tetapi entah mengapa katanya banyak yang tidak berhasil alias gatot (gagal total),

padahal saya pernah mempraktekan langsung tutorial yang saya tulis sendiri dan hasilnya
tidak ada masalah, tidak percaya? sok lah bisa di lihat contohnya di sini!
dan saya pun sering blogwalking ke para sobat setia blog ini dan banyak juga yang berhasil.



Udah ah, rasanya tidak terlalu penting membahas antara yang sukses dengan yang gagal, semuanya
tergantung kepada usaha sendiri-sendiri, mending kita langsung ke topik utama pembahasan kali
ini yaitu mengenai cara membuat kotak komentar seperti yang ada pada blog ini. Trik ini sebenarnya
telah lama di bahas di blognya jackbook, kalau mau baca langsung di sana silahkan saja, namun bahasa
yang di gunakan adalah dalam bahasa inggris. Mau yang bahasa indonesia? ya sudah baca saja di blog ini,
gitu aja ko repot *kata guspur* begitu biasanya. Yang berminat silahkan ikuti langkah-langkah berikut ini :

Langkah #1

1. Silahkan Sign in di blogger dengan id sobat





2. Klik Layout





3. Klim menu Pengaturan





4. Klik menu Komentar





5. Cari tulisan Tampilkan komentar dalam sebuah window popup?, pilih ya. Perhatikan gambar di bawah :












6. Klik tombol

Step #2

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











4. Tunggu beberapa saat sampai proses selesai.





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






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










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







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











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








10. Klik tombol simpan template





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



Untuk lebih mempermudah pencarian kode, sebaiknya sobat menggunakan mesin pencari pada masing-masing
browser. contoh pada Internet explorer, bila sobat mencari kode yang sebagiannya mengandung kode seperti ini : <span class='post-comment-link'>,
silahkan sobat klik menu Edit yang ada pada bar menu browser,
kemudian klik Find (on this page)..., lalu tulis <span class='post-comment-link'> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
Perhatikan gambar di bawah ini :











Karena langkah-langkah di atas banyak sekali mengubah kode-kode template yang ada di edit HTML,
maka sebaiknya jangan sampai lupa untuk membuatkan sebuah backup template, jika seandainya
sobat melakukan kesalahan, maka jangan panik. Upload kembali backup nya, nanti setelah itu kondisi
akan kembali seperti semula yaitu sebelum kode template di ubah-ubah.

Posted in: blog tutorial,Tutorial HTML