Mengubah Komentar Blogger Menjadi Seperti WordPress

Dialog komentar secara default tampil sebagai popup pada Blogger, sedangkan pada WordPress, mereka tertampil langsung di halaman tersebut. Itu adalah kelebihan WordPress.

Tapi dengan trik yang satu ini, kita bisa mengubah agar dialog komentar tidak tampil lagi sebagai popup, tetapi tampil langsung seperti gaya WordPress, di bawah halaman artikel. Bagaimana melakukannya? Seperti biasa, ini adalah trick untuk template dan diwajibkan untuk mem-backup template terlebih dahulu sebelum memulai trik ini.

Jika sudah, kalau begitu langsung saja kita klik checkbox Expand Widget Templates. Selanjutnya cari code </head> Setelah itu, copy code berikut tepat di bawahnya:

<!-- www.jackbook.com -->
<!-- this to hide and show el -->
<script language='javascript'>function showcomment(a,b){var jackbookdotcom =document.getElementById(a);jackbookdotcom.style.display ='none';jackbookdotcom =document.getElementById(b);jackbookdot.com.style.display ='block';}</script>
<!-- www.jackbook.com -->

Selanjutnya cari kode berikut:

<b:includable id='comments' var='post'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cound='data:post.numComments == 1'>
1 <data:commentLabel1/>:
<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:includable 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>

Jika Sudah, kita harus mengubah semua code di atas menjadi seperti berikut:

<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:else/>:
<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='commentDeletedIcon'/>
</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- 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='display:none; background:#edf5fa; height:400px border: 1px solid #FCO; height:700px;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' width='100%'/>
</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:includable data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Selesai, sekarang komentar blog kita sama dengan yang ada pada WordPress, dan jangan lupa untuk menyimpan template.

Print This Page

Masukkan Email Kalian Untuk Mendapatkan Artikel-Artikel Seperti Di Atas:

Delivered by FeedBurner