Cara Mempercantik Kotak Komentar

Sungguh disesalkan jika kotak komentar yang ingin kita inginkan susah dibuat, karna kita belum ahli dalam bermain seperti ini. Tapi tidak usah khawatir, anda bisa saja googling, mencari terus dan terus sampai akhirnya menemukan cara yang tepat. Jika anda menemukan saya di mbah google berarti anda sangat beruntung. hehe
Saya sekarang akan membahas bagaimana Cara Mempercantik Kotak Komentar. Nah kalau masalah ini sebelumnya saya sudah membahas bagaimana Memasang Kotak Komentar yang Indah di Blog. Anda bisa baca di sini. Lupakan masalah itu karna yang sekarang menurut saya bagus dan simple buat blog. Yaudah langsung saja membahas caranya.

- Login dulu ke blog anda.
- Masuk ke Rancangan > Edit Html , Lalu centang Expand Template Widget.

#1 CSS
Kita rubah css kotak komentar yang lama dengan yang baru. Berikut Css nya.

/* Comments ----------------------------------------------- */
#comments{font:normal normal 100% Georgia,Serif}
#comments h4{margin:1em 0;color:#717171;font:bold 18px Serif,Arial,sans-serif,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica}
#comments h4 strong{font-size:110%}
#comments-block{margin:1em 0 1.5em;font:normal normal 100%/1.3em Georgia,Serif}
#comments-block dt{color:#000;border-top:1px solid #46c6f0;border-left:1px solid #46c6f0;border-right:1px solid #46c6f0;background:#ebf3fb;margin:20px 0 0 0;padding:10px;font:italic normal 12px Georgia,Serif}
#comments-block dt a{text-decoration:none;color:#000;font:italic normal 12px Georgia,Serif}
#comments-block dd{color:#000;border-left:1px solid #46c6f0;border-right:1px solid #46c6f0;background:#ebf3fb;margin:.0em 0 0;padding:10px;font:normal normal 12px Georgia,Serif}
#comments-block dd a{color:#000;text-decoration:none;font:normal normal 12px Georgia,Serif}
#comments-block dd.comment-footer{margin:0 0 0;border-left:1px solid #46c6f0;border-right:1px solid #46c6f0;border-bottom:1px solid #46c6f0;padding:10px;font:normal normal 100%/1.4em Georgia,Serif}
#comments-block dd p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
Hapus saja kode yang lama, dan ganti kode di atas ini.

#2 HTML
Sekarang masuk ke html nya, Cari kode 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>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>
Tips : Fokus saja sama yang teks di tebalkan, untuk memudahkan pencarian CTRL + F kalau mozilla pencet F3.

Jika sudah menemukan hapus saja semua kode yang di atas, lalu ganti dengan yang baru. Berikut kode yang baru nya.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<font style='font-size:14px;color:#000;font-family:Arial,Georgia, &quot;Times New Roman&quot;, Times, serif;font-weight:bold;'><data:post.numComments/> Responses So Far:</font>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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 expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>

<b:if cond='data:comment.author == data:post.author'>
<dd style='background-color:#ffffcc;'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</b:if>
</dd>
<dd class='comment-footer'>
<a expr:href='data:post.url + &quot;#comment-post-message&quot;' rel='nofollow' style='float:right;margin-right:10px;'>Reply</a>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

Simpan dan Lihat Hasilnya.

Semoga Bermanfaat!