Ingin buat kotak komentar blogspot kita seperti gambar di atas ini. Gampang kok mengaplikasikannya. Ok langsung aja ya untuk cara pembuatan kotak komentar seperti di atas.
Langkah-langkah
- Masuk Blogger dengan login anda. Pilih Rancangan -> Edit HTML -> Centang Expand Template Widgets.
- Silahkan cari kode di bawah ini dengan menggunakan Ctrl + F.
]]></b:skin>
- Selanjutnya, letakan kode Css di bawah ini sebelum kode di atas atau kode yang sudah Anda temukan.
/* -- Comment -- */
#comments h4 {font-size: 18px; font-weight: normal; margin: 20px 0;}
.cm_wrap {clear: both;margin-bottom: 10px;float: right;width: 100%;}
.cm_head {margin: 0;width: 70px;float: left;}
.cm_avatar {margin: 0;vertical-align: middle;border: 1px solid #DDD;background-image: url(http://loker.nazuka.net/wp-content/uploads/2011/11/default_avatar.jpg);background-position: center;background-repeat: no-repeat;width: 35px;height: 35px;}
.cm_reply {padding-top: 5px;}
.cm_reply a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;}
.cm_reply a:hover {text-decoration: none !important;;background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;}
.cm_entry {padding: 16px;background: #F7F7F7;border: 1px solid #E4E4E4;overflow: hidden;}
.cm_arrow {display: block;width: 9px;height: 18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJN5usqI0f1ZGf1udxz-HZvHSfhzDyJOz6sdrykQy9yybfUXtMx4ozYgExjNEfSw0K_L6xRV0_CH_9fbHsLTBu-9N2aZlX5rHv5gg31uzJaqTLrdEiAoarxUIp-uisiZYzruiCAns67U/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px;}
.cm_info {margin-bottom: 5px;}
.cm_name {font-weight: bold;font-size: 12px;float: left;}
.cm_date {font-size: 10px;float: right;font-style: italic;color: #CCC;}
.cm_entry p {margin: 0;font-size: 13px;color: #666;}
.cm_pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold;}
.cm_pagenavi a {color: #666;text-decoration: none;padding:10px;}
.cm_pagenavi a:hover {text-decoration: underline}
.cm_pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0;}
.comment-body {padding: 0px;margin: 0px;}
.deleted-comment {font-style:italic;color:gray;}
- Selanjutnya, kalian cari kode html di bawah ini,
<b:includable id='comments' var='post'> (kode ini jangan dihapus)
Isi Kode Html Lama (hapus kode diantara kode diatas dan dibawah)
</b:includable> (kode ini jangan dihapus)
- Silahkan kalian ganti kode html lama pada template blog Anda yang berada di antara kode tersebut dan masukan kode html yang baru di bawah ini antara kode tersebut,
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=0000000&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b>
<data:comment.author/>
</b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p>
<data:comment.body/>
</p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<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>
</b:if>
</div>
Keterangan,
Silahkan Anda meletakan kode di atas antara kode atau meletakan kode diatas ditengan kode tersebut.
- Silahkan Anda ganti tulisan yang berwarna merah dengan blogid Anda.
- Selanjutnya, silahkan Anda cari kode di bawah ini,
</body>
- Silahkan Anda letakan script di bawah ini di atas atau sebelum kode yang sudah anda temukan,
<script src='http://koisine-blogspot.googlecode.com/files/comments.js' type='text/javascript'/>
Sekian postingan pada kesempatan kali ini tentang Pasang Comment Style WP Untuk Blogspot/Blogger, semoga dengan artikel dan panduan ini dapat bermanfaat bagi Anda yang telah membaca dan menemukan artikel ini.
Tapi mohon untuk tidak menghapus link credit dibagian footer. Kita, Blogger Indonesia punya kode etik jugakan? 
.