Cara Mempercantik Kotak Komentar

kalian semua pasti sudah tidak asing lagi klo nge denger yang namanya kotak komentar,di sini ane akan nge bahas bagaimna mempercantik kotak komentar agan2 di blog.
oke.. bagi yang blom tau ane kasih cara nya yach..hihihih :D langsung zach yach..!!!

• login dulu ke blog kalian
• selanjutnya klik tata letak
• klik tab edit HTML
• Pada kotak kecil di atas tulisan Expan widget di beri tanda centang
• Cari kode CSS yang seperti ini (untuk mempermudak pencarian tekan (CTRL + F atau F3)

#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; }

• Hapus kode di atas, lalu ganti dengan kode yang ada di bawah ini.

#comments h4 { margin:0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: #000; } #bg_commentblock { width: 548px; background: #ffffff; float: left; padding:20px; margin:0 0 10px 0; border:1px solid #C0C0C0; } #commentblock { width: 510px; background: #E8E8E8; text-align:left; padding: 20px 20px 10px 20px; margin: 10px 0px 0px 0px; border-top: 2px solid #333333; border-bottom: 1px solid #333333; } #commentblock ol { list-style-type: square; margin: 0px 0px 0px 10px; padding: 0px 0px 10px 0px; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p { margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 3px 0px 10px 0px; padding: 20px 10px 5px 10px; width: 490px; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEvzwknghtufC2MFgW9GgiUHWzNTd4Na1rWT52ZBBT_0hb6B57nrP3vVhWqb4l7CWCPhijoY2XUjXX_RDM_uW2VO8co_GcJiBmO3waZ-0YMaIzu8D88TkECq42yUDGADkir8UO3VUIy56/s320-r/comment.gif) no-repeat top left; } .commenttext-admin { clear: both; margin: 3px 0px 10px 0px; padding: 20px 10px 5px 10px; width: 490px; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEvzwknghtufC2MFgW9GgiUHWzNTd4Na1rWT52ZBBT_0hb6B57nrP3vVhWqb4l7CWCPhijoY2XUjXX_RDM_uW2VO8co_GcJiBmO3waZ-0YMaIzu8D88TkECq42yUDGADkir8UO3VUIy56/s320-r/comment.gif) no-repeat top left; } Lihat lagi ke bagian bawah dan lihat 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> <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>   <data:post.commentRangeText/>   <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> <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + 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>   <data:post.commentRangeText/>   <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> hapus kode di atas, dan ganti dengan kode di bawah ini. <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <div id='bg_commentblock'> <h4> Komentar : </h4> <div id='commentblock'> <!--commentblock--> <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1 <b:else/> <strong><data:post.numComments/> <data:commentLabelPlural/> ke “<data:post.title/>”</strong> </b:if> <dl class='commentlist'> <b:loop values='data:post.comments' var='comment'> <span> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'> <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> pada hari <dd class='comment-footer' style='display:inline; margin:0px'> <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></span> <dd class='commenttext'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/></p> </b:if> </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>   <data:post.commentRangeText/>   <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> </div> <!--end commentblock--> </div> </b:if>

• klik tombol simpan template
• dan lihat hasilnya.

Kotak komentar anda sudah lumayan bagus kan,hihihihihihi
selamat mencoba.

Nb : jangan lupa kalo mengedit HTML usahakan di copy dulu ke notepad,ntar kalo ada script yang salah,gak perlu repot!! :D

Share on Google Plus

About Dadan Pauzan

Kami merupakan salah satu komunitas yang hobi menulis artikel di blog, main game, ngoding, edit musik dan membuat video.