Haduw…udah lama nggak ngutak-ngatik script HTML, tangan jadi gatel…hehehe..Oh ya, beberapa jam yang lalu , sobat blogger Boedak (jangan baca b*dak ya, ntar yg nanyain marah )menanyakan cara membuat kotak komentar yang berada di dalam postingan.

boss, mw nanya neh, gmn caranya bwt kotak komentar kayak punya boss ini?
kasih pencerahan donk!

Biasanya, kalau kotak komentar di Blogspot dapat muncul bila mengklik link “Post A Comment” atau apalah namanya…tapi seringkali para pengunjung ogah mengkomen di blog Blogspot. Dikarenakan mau-tidak-mau harus membuka window baru. Hal ini berbeda 180 derajat dengan musuh bebuyutan platform blog ini, Wordpress.Kotak komentar dalam blog Wordpress sudah ada tanpa harus membuka sebuah window baru.
Alhasil….

Para blogger Blogspot lebih sedikit menerima komentar ketimbang para blogger Wordpress.

Nggak usah bercuap-cuap lagi, langsung saja ikuti trik ini

Step #1
1.Masuk ke Panel Kontrol anda dengan ID anda.
2.Pilih Pengaturan/Komentar.
3.Cari tulisan Tampilkan Komentar dalam Sebuah Window Pop-Up?Pilih Ya. Lalu Simpan Perubahan yg anda buat.

Step #2
1.Klik Submenu Edit-HTML pada Menu Tata Letak.
2.Silahkan back-up dulu Template anda supaya kalau trik ini gagal, anda bisa memakai template salinan. Bisa juga dengan cara tanpa mendownload template salinan, namun bila gatot, klik tombol Bersihkan Edit.
3.Centangi kotak Expand Template Widget.
4.Cari kode yang seperti 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.Hapus semuanya, sebagai gantinya….ganti dengan kode 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?’>Kotak Komentar di Bawah Posting pada 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>

Catatan:
Di sela-sela script itu, ada kode <div style=’height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;’> . Silahkan anda kustomisasikan sesuai keinginan anda.
Penting!Jangan hilangkan kode berwarna merah. Kode itu adalah backlink dari yang empunya tutorialnya (jackbook.com).Saya hanya bertugas untuk meng-alih bahasakan tutorialnya saja…
6.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 –>

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

Lalu, ganti dengan script 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>

Fiuuhh :f, simpan template dan lihat hasilnya…

Sumber: jackbook.com
Dialih-bahasakan oleh: akuh sendirih…