Cara mengubah tampilan komentar pada blogger

• Login Ke Blogger
• Pergi ke Template >> Edit HTML >> Centang Expand Template Widget
• Cari kode ]]></b:skin> Untuk Mempermudah Gunakan F3 atau Ctrl+F
• Setelah itu copy lalu pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Comments
----------------------------------------------- */
#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:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXixG0AzhvlNgDiwmK-FQA2V9UqeTO6IlFloEBMzoi6i4yhLiJQ7WSKWWaYH_3pVI8ghJ6UqbT42rkzsYQoNsTHsrxkgqVoJZm6T5CYRYBVbhxgYbr1n3dZdu_fgfjePpCn1CIMcYedwU/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
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 !important;
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: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZrGCXe7f8NbLtDOozWM1oLicvPnUiEhRW1e9aUnZw8FzWDNs2rdsUKZcXFmHGnSP_uTnsDzDN8h9se_Nef99u7W5YOgcM2GneXWhDIET2Luo3x-Y3e49VGn36aA0oeZi6r92GnzC_mE/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.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 Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

• Setelah itu  taruh kode dibawah ini diatas kode /* Comments
  ----------------------------------------------- */
  #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:60px;
  float: left;
  }
  .cm_avatar {
  margin: 0;
  vertical-align: middle;
  border: 1px solid #DDD;
  padding: 3px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXixG0AzhvlNgDiwmK-FQA2V9UqeTO6IlFloEBMzoi6i4yhLiJQ7WSKWWaYH_3pVI8ghJ6UqbT42rkzsYQoNsTHsrxkgqVoJZm6T5CYRYBVbhxgYbr1n3dZdu_fgfjePpCn1CIMcYedwU/s1600/takdikenal.jpg) center no-repeat;
  width: 35px;
  height: 35px;
  }
  .cm_avatar_a {
  margin: 0;
  vertical-align: middle;
  border: 1px solid #DDD;
  padding: 3px;
  background:#c6e5f7;
  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 !important;
  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: #fcfcfc;
  border: 1px solid #E4E4E4;
  overflow: hidden;
  }
  .cm_arrow {
  display: block;
  width: 9px;
  height: 18px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRZrGCXe7f8NbLtDOozWM1oLicvPnUiEhRW1e9aUnZw8FzWDNs2rdsUKZcXFmHGnSP_uTnsDzDN8h9se_Nef99u7W5YOgcM2GneXWhDIET2Luo3x-Y3e49VGn36aA0oeZi6r92GnzC_mE/s1600/comment-arrow.gif) no-repeat;
  position: absolute;
  margin-left: -25px;
  }
  .cm_info {
  margin-bottom: 5px;
  border: thin solid #E6E6E6;
  background-color: #F4F4F4;
  padding: 5px;
  }
  .cm_info_a {
  margin-bottom: 5px;
  border: thin solid #E6E6E6;
  background-color: #dff0fa;
  padding: 5px;
  }
  .cm_name {
  font-size: 14px;
  color: #666666 !important;
  text-decoration:none;
  float: left;
  }
  .cm_name_a {
  font-family:"Comic Sans MS", cursive;
  font-size: 14px;
  color: #666666 !important;
  text-decoration:none;
  font-weight: bold;
  float: left;
  }
  .cm_date {
  font-size: 10px;
  color: #999;
  text-decoration:none;
  float: right;
  }
  .cm_date_a {
  font-family:"Comic Sans MS", cursive;
  font-size: 10px;
  color: #2D5E7B;
  text-decoration:none;
  float: right;
  padding-top:5px;
  }
  .cm_entry p {
  padding: 5px;
  clear: both;
  border: thin solid #E6E6E6;
  background-color: #ffffff;
  font-size: 13px;
  color: #333;
  word-wrap:break-word;
  }
  .cm_entry_a p {
  padding: 5px;
  clear: both;
  border: thin solid #E6E6E6;
  background-color: #ffffff;
  font-size: 13px;
  color: #333;
  word-wrap:break-word;
  }
  .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 Admin */
  .comment-body-author {
  font-family:"Comic Sans MS", cursive;
  font-weight: 300;
  }
  
  

• • Setelah itu  taruh kode dibawah ini diatas kode </body>

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://koderator.googlecode.com/files/comment.js' type='text/javascript'/>
  <script src='http://koderator.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
  </b:if>

  
  
• Cari Kode

<b:includable id='comments' var='post'>
Kode yang harus di ganti
</b:includable>

• Di antara kode 

<b:includable id='comments' var='post'>

Dan

</b:includable>

Biasanya akan ada kode yg relatif panjang, ganti kode tersebut denagn kode di bawah ini.

<div class='comments' id='comments'>

<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</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='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&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#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyrvx78ExLuxqUsJbRylxRtKeR1PlurC28ngaukl7HcMMxCKyhgGMCL29gIaP7YGkJr4Kj3ZBjtMMMGnHlCwogmOoxjeoy2LsITXS-j-u0E01r5yrAbMe4XhBscqAu60iJj9HQ-LFlDA/s1600/adminstar.png' title='Admin' width='20px'/>
<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_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd 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>
<span style='text-align:center; font-size:9px; color:#C0C0C0;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</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>

Ganti tulisan __BlogID__  dengan BlogID sobat

• Setelah itu cari kode di bawah ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

• Biasanya akan ada beberapa kode di atas di template blog sobat. Ganti semua kode seperti itu di template blog sobat dengan kode di bwah ini.

<b:include data='post' name='comments'/>

• Simpan dan lihat hasilnya.