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
- Silahkan Sign in di blogger dengan id sobat
- Klik Layout
- Klim menu Pengaturan
- Klik menu Komentar
- Cari tulisan Tampilkan komentar dalam sebuah window popup?, pilih ya. Perhatikan gambar di bawah :
- Klik tombol
Step #2
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap. Silahkan save dulu, biar aman dari marabahaya yang mengancam.
- Centang kotak kecil yang berada di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai.
- Cari kode yang seperti di bawah ini :
- ganti kode di atas dengan kode di bawah ini :
- Simpan kode ini di atas kode </body>
- Cari kode seperti di bawah ini :
- gantilah kode di atas dengan kode di bawah ini :
- Klik tombol simpan template
- Selesai. Silahkan lihat hasilnya.
<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>
<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>
<!-- 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 -->
<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>
<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>
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.
