Memberi Sentuhan Style pada Komentar

Bagian komentar merupakan salah satu yang perlu mendapat penekanan, karena bagian ini mampu menarik pengunjung untuk memberikan komentarnya. Seringkali, webmaster tidak menghiraukan bagian ini, lebih-lebih pemula yang baru mengenal css dan html. Bisa jadi karena bagian komentar ini berada dalam halaman single bukan di halaman utama (homepage).

Aku mencoba mempercantik tampilan komentar dengan memberikan style warna latar dan garis tepi (border) kolom komentar lewat pengaturan di css. Jika anda tertarik untuk mencobanya, aku sarankan terlebih dahulu anda membackup template asal, khawatir ada kejadian yang tidak diinginkan sehingga dapat merusak tampilan blog anda.

Berikut tutorial mempercantik tampilan kolom komentar dengan pengaturan css

01. Masuk ke dashboard, pilih tab Template > Edit Html (beri centang Expand Widget Template).

02. Cari kode berikut.

]]></b:skin>

03. Tambahkan kode ini di atasnya.

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#000 !important;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #191919;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #191919;
border-right: 1px solid #191919;
margin-top: -5px; /*position*/
padding: 5px;
}
#comments-block .comment-footer{
margin:0;
font-size: 10px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #191919;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#39cb43 !important;
}

Untuk menghindari kekacauan tampilan atau tampilan style yang tidak kita inginkan, aku mengganti kode asal template untuk pengaturan komentar (biasanya diberi tanda <!--komentar--> atau sejenisnya) dengan kode ini.

04. Cari kode ini.

<dl id='comments-block'>

05. Jika kode dibawahnya sama dengan kode berikut, abaikan saja, tapi jika berbeda, ganti dengan kode berikut.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author" + 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>

05. Simpan.

Keterangan:
1. Ganti tulisan berwarna merah dengan kode warna untuk background komentator.
2. Ganti tulisan warna biru dengan kode warna untuk garis tepi (border) sesuai keinginan.
3. Ganti tulisan warna orange dengan kode warna untuk tulisan komentator
4. Ganti tulisan warna hiaju dengan kode warna untuk link sesuai keinginan.