Cara Merubah Tampilan Komentar Blogger

Thread Comments, atau komentar yang bisa di reply / balas seperti WordPress adalah merupakan fitur baru dari Blogger. Hal ini tentunya sangat ditunggu-tunggu oleh sobat blogger, nah pada kesempatan kali ini Saya akan memberikan tutorial termudahnya Cara Merubah Tampilan Komentar Blogger, yang hasilnya seperti gambar berikut ini

Cara Merubah Tampilan Komentar Blogger

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Demi keamanan silahkan backup dulu template anda ---> Download Template Lengkap
3. Letakan kode dibawah ini sebelum kode: ]]></b:skin> untuk lebih muda tekan CTRL + F

/* 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/AVvXsEhXcH_jnlfvy4W4rf4-4TIeySYeB_HJl1zooiwvqdzHaEMT4Si0aso_lmBGTsskzo23Pv3pXi7lUrAIKtG_sXGjJqE4n8RJaTNtNrY3GaePuDjiaxLEG_8eOPFruOFMQgHKHYWZuU1uU5c/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/AVvXsEgJ99g_4q6R8kWkfGfgavSXz1Lt9U5iI9S1cB9jqvkD4QacEUgrLMI4hnhoMhZ8_yWZBPPcf8kVczSEIYS4Ns2B3U18pCWRzmHmDfB5g9-9FuvlFG1m8MH2kIzRgL5rvjR-gdMGgF2o1ew/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;
}

4. kemudian cari kode di bawah ini

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

Jadi tugas sobat adlah menghapus kode di antara <b:includable id='comments' var='post'> dan kode </b:includable> nah di antara kode tersebut ada kode yg relatif panjang, kode itulah yg wajib sobat ganti,

5. Ganti kode diantar <b:includable id='comments' var='post'> dan kode </b:includable> dengan 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 > 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='"https://www.blogger.com/comment.g?blogID=XXXXXXXX&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>
<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/AVvXsEjqpU7PtLhUugeT3suLjV8OUcc2vAjndqzJcxRSeGLQRTsT2bCq1RLFzDMODOlHC5FkTpXnlHKFdHVTPqTVK9z-B8YPZGrTZXsK9Tr10FnrTYw9_y2sLum8XFxXsJwDmP_kQHc6WP65L7Q/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;'>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>

Pada kode di atas cari tulisan XXXXXXXX dan ganti tulisan tersebut dengan BlogID sobat
Oiya kode di atas juga terdapat tulisan Reply yg dapat di ganti dengan tulisan Balas dll...

6. Langkah terakhir adalh mencari 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>

Jika kode di atas tidak ada di template sobat, berarti sobat tinggal Klik Simpan Template
Jika di template sobat terdapat kode di atas, maka sobat wajib menggantiny. Ganti semua kode yg sama dengan kode diatas dengan kode di bawah ini,

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

7. langkah ini adalh lngkah terakhir, yaitu Klik Simpan Template. hehehehee,,,,,
selamat mencoba dan semoga berhasil sobat blogger, do'a Q selalu menyertaimu,,, :P