Membuat Tampilan Kolom Komentar Lebih Menarik

Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar, di mana saya hanya ingin menambahkan author commentnya beda style atau istilahnya komentar pemilik blog berbeda style dengan komentar pengunjung, seperti yang sobat lihat screenshoot di bawah ini :

Menurut saya perwajahan komentar tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat perwajahan komentar seperti screenshoot di atas silahkan ikuti langkah-langkah berikut :

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang Expand Widget Templates

3. Kemudian cari kode css untuk komentar :

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em; }

NB: setiap bagian code css komentar berbeda-beda pada setiap template

4. Ganti semua kode di atas dengan kode di bawah :

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}

.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px dotted #ddd;padding: 20px;}
.commentlist li.alt {background: #fff;}

.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}

.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

5. Setelah itu cari bagian di bawah ini :

<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>

Kemudian sobat ganti semua kode di atas dengan kode di bawah ini :

<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<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/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
 </ul>


6. Langkah terakhir adalah save template