Membuat Kotak Komentar Berbeda Dengan Yang Lain

Sungguh disesalkan jika kotak komentar yang ingin kita inginkan susah dibuat, karena 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.
Dan Jika Perlu Download dahulu tamplate klik  Download Template Lengkap

#1 CSS Kita rubah css kotak komentar yang lama dengan yang baru. Berikut Css nya.Hapus saja kode yang lama, dan ganti kode di bawah ini.

/* 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}

#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 : Fokuskan 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.
Dan Untuk Anda Yang memasang Emotion setelah <p class='comment-footer'> dicopy paste terlebih dahulu ke Note Pad Atau M.Word

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

Habis Baca Dan Lihat jangan lupa Komentarnya... Thanks Jika Anda Suka Silahkan Share...

Artikel Terkait