Cara Membuat Kotak Komentar Keren Dengan Round Corner dan Shadow Gaya Gecok

Maaf sebelumnya karna saya jarang ngisi tutorial blog lagi, karna ada kesibukan lain. Jadi mungkin sekarang saya akan memberikan tutorial "Cara Membuat Kotak Komentar Keren Dengan Round Corner dan Shadow Gaya Gecok". Anda pasti heran seperti apa ? bagaimana bentuknya ? Sebelumnya juga saya sudah membuat tutorial tentang "Memasang Kotak Komentar Yang Indah di Blog" dan "Cara Mempercantik Kotak Komentar".
Untuk contohnya anda bisa lihat bagian komentar di bawah, kira kira seperti itu, anda bisa mengedit edit nya lagi.

Perhatikan bagian CSS, hapus kode css "comments" yang lama dengan yang baru.
Dari  :

/* Comments ----------------------------------------------- */  sampai .deleted-comment{blablabla}

Berikut CSS komen yang baru:

---

/*COMMENTS*/
.comments {
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
-moz-border-radius: 0 0 10px;
-webkit-border-radius: 0 0 10px;
background:#fff;
float: left;
width: 570px;
margin-bottom:5px;
padding: 10px;
overflow:hidden;
border:1px solid #cfcfcf;
}
#comments h4 {
color: #000;
font-size: 20px;
font-family: Georgia,trebuchet ms, tahoma, Verdana, Arial, Sans-Serif;
font-weight: normal;
margin: 0 0 5px;
padding: 0 0 10px 0;
}
#comments-block {
width: 500px;
float: left;
padding: 0;
margin: 0;
}
#comments-block .comment-author {
margin: 0em 0;
font-weight: bold;
}
#comments-block .comment-body {
margin: .25em 0 10px;
padding-left: 20px;
font-size:12px;
text-align:justify;
}
#comments-block .comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: .1em;
border-bottom:1px solid #cfcfcf;
}
#comments-block .comment-body p {
margin: 0 0 .75em;
}
.deleted-comment {
color: gray;
}

---

Jika sudah di ganti, sekarang masuk ke Html nya.
Cari kode berikut :

<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'>
<div class='bawahpost'>
Commenting is well and do not offend others. And also do not forget to spam here. Your comment is very valuable for me. So was the comment below:<img alt='yahoo' border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/></div>
<br/>
<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 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'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a> on <data:comment.timestamp/>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=9010539091474445390&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; '>[Reply]</a></span>
</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'>

<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'>
<h4>This comment box</h4> by <a href='http://gecokk.blogspot.com' target='_blank'>Angga Pradipta</a>
<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>

---

Perhatikan no yang berwarna merah. Itu adalah no ID blog, mohon segera diganti dengan BlogIDanda.
Bagaimana mengetahuinya ? Coba lihat di address bar, atau lebih jelasnya lihat gambar di bawah ini :

Lalu save, dan lihat hasilnya.