Record The Journey and Thoughts

Thursday 27 September 2007

How to Make Comment Form Under Post



Lady mau ngasih oleh2 dari blogwalking, jadi jalan2 tadi tidak hanya sekedar menyapa di SB teman yang sedang kita kunjungi, maupun memberi komentar di postingan yang kita kehendaki. Oleh2 yang didapat dari Pak AbiBakar ini cukup seru Awalnya tertarik ngeklik judul posingan tentang kolom komentar di setiap postingan. Seru nih, serasa wordpress

Di Blogger jika ingin memberi komentar pada posting mengharuskan untuk membuka window baru. Hal ini kadang membuat malas untuk memberikan komentar meskipun ingin sekali mengomentari postingan blog tersebut. Lain halnya jika anda ngeblog pada wordpress, kendala seperti ini tidak akan anda jumpai. Karena layanan komentar rss mereka memudahkan pengunjung untuk memberi komentar pada window dan lembaran yang sama, tanpa harus membuka lembaran baru seperti pada Blogger.

Tips ini hanya bisa di aplikasikan pada Blogger beta dengan xml blogger template, artinya tidak bisa diterapkan pada classic template/ template klasik. Blog ini sudah mempraktekkan dan ternyata berhasil, bisa lihat bentuknya di bawah posting ini. Berminat?

Inilah 10 langkah untuk memasang kolom komentar di setiap posting Blogger:

1. Ke dashboard -> control panel -> edit html
2. Tick the Expand Widget Templates dicentang
3. Sebelum memulai back-up dulu html anda, dengan men-savenya jaga2 melakukan kesalahan dengan salah taruh kode
4. Kemudian temukan HTML kode dibawah 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'>
<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'>
</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. Lantas ganti kode html diatas dengan kode dibawah 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>

<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>
-->
<!-- jackbook.com part 1 ends -->
<!-- actually i almost do nothing with your template, just add that comment, you did it :) -->

<div id='comment-parent' style='padding-bottom: 20px;' onmouseover='showcomment("hoverme", "comment-child");'>
<h3 id='hoverme' style='display:block;'>
<img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://lifewg.googlepages.com/html-code-leave-comment.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: 420px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
<iframe style='border:none;' expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' width='100%'/>
<br/>
</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. Kemudian copy semua html kode dibawah ini dan letakan diatas tag: </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. Dan temukan kode html dibawah 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. Gantilah dengan kode dibawah 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>

Catatan: Jika template tidak ada ini . contohnya begini saja bentuknya:

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

maka tetap masukkan saja kode dilangkah no 8 diawali dari:
<b:if cond='data:blog.pageType != "item"'> sampai </b:if>

9. Lantas klik "Save Template".

10. Kemudian lihat blog, kalo langkahnya tepat pastinya sudah mempunyai sistem komentar dibawah setiap posting seperti pada Wordpress.

Langkah selanjutnya memodifikasi bentuk komentar. Ada 2 bentuk komentar yang bisa terapkan tergantung kebutuhan dan selera.

1. Pertama dengan bentuk menurun kebawah seperti pada blog ini, bisa lihat dibawah posting ini.
caranya: --> Setting --> Comments --> Show comments in a popup window? Klik 'YES'.

2. Atau dengan bentuk menyamping.
caranya: --> Setting --> Comments --> Show comments in a popup window? Klik 'No'.

Selamat mencoba

tautan:
http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html
http://abibakar.blogspot.com/2007/08/kolom-komentar-disetiap-posting-blogger.html

7 Comments:

  1. Lady Elen Emang TOP BGT DEHH :)

    ReplyDelete
  2. hohoho., jadi lebih mudah neh ;)

    ReplyDelete
  3. Jebule Jadi to ;)

    Mantep mantep

    ReplyDelete
  4. weitss berhasil komennya ya keren!...selamat ya mba' dan maaf telat ucapinnya.

    ReplyDelete
  5. Makasih banget dah sharing ya
    Sukses selalu

    ReplyDelete

Silakan isi kolom komentar dengan mencantumkan ID Anda
(Twitter, FB, IG, eMAIL). Terimakasih