Threaded Comments Untuk Komentar Blogger

Banyak dari teman Blogger bertanya-tanya kepada saya. Bagaimana sih cara membuat tampilan komentar Blogger seperti pada Wordpress? Tentu saja ini membuat saya berkeinginan untuk mencari tahu bagaimana caranya. Nah, ketika saya dapatkan tutorialnya di salah satu teman Blogger saya, Dody Farial dalam postingannya yang berjudul sama, yakni: Threaded Comments Untuk Komentar Blogger, saya berniat untuk mempostingnya kembali disini (tentunya dengan persetujuan beliau terlebih dahulu).

Tampilan komentar bagaimana yang dimaksud? Jika Anda melihat screenshot di atas, maka Anda akan tahu maksudnya. Atau Anda juga bisa melihat Demo-nya langsung di blog ini: www.miscah.blogspot.com. Nah, penasaran bagaimana cara membuatnya? Ikuti tutorialnya di bawah ini.

• Masuk ke Rancangan  
• Klik tab Edit HTML 
• Jangan lupa backup template terlebih dahulu
• Klik Expand Template Widget
• Kemudian copy kode berikut sebelum ]]></b:skin>

 #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;outline: 1px solid #fff;border: 1px solid #ddd;padding: 3px;background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);background-position:center;background-repeat: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;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}
.cm_entry_a {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}
.cm_arrow {display: block;width: 9px;height: 18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpGvng6KtBL9sMI6vl20rA6q7NqzRWFvSZxZVQWH5Bqwufllb5ZifSUlWvXBHw_GEtzNnF2TXwBQTz-fJdpWZTZPIoIqOq63sKz-G2ibqXAHFXMAt8265ibUGSfa-o-ZsbBbtedGcue3I/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: 13px;color: #666666 !important;text-decoration:none;font-weight: bold;float: left}
.cm_name_a {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: 250;float: left}
.cm_date {font-size: 10px;color: #999;text-decoration:none;float: right}
.cm_date_a {font-size: 10px;color: #2D5E7B;text-decoration:none;float: right;
padding-top:5px}
.cm_entry p {padding: 5px;line-height:1.4em;clear: both;border: thin solid #E6E6E6;background-color: #F4F4F4;font-size: 13px;color: #333;word-wrap:break-word}
.cm_entry_a p {padding: 5px;clear: both;border: thin solid #E6E6E6;background-color:  #dff0fa;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}
.owner-Body p{margin-bottom: 5px;border: thin solid #E6E6E6;background:#EFF5FB;padding: 5px}

• Kemudian cari kode seperti di bawah ini : 

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

• Hapus kode tersebut 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'>
<h4>
<b:if cond='data:post.numComments &gt; 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='&quot;https://www.blogger.com/comment.g?blogID=90113338580645433&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>

<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>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div 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>
</div>
</b:if>

</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>
</b:includable>

• Ganti tulisan yang berwarna merah dengan BlogID sobat (lihat di browser)
• Kemudian Simpan

Semoga berhasil, kawan!