Menganti Perwajahan Halaman Komentar

Mempercantik blog bagi kita pelaku ngeblog mungkin merupakan pekerjaan kedua setelah membuat/mengupdate postingan, namun dalam meredesain blog ada salah satu komponen yang sering kita abaikan yakni layout komentar/desain komentar. Untuk itu dalam postingan kali ini saya ingin sedikit berbagi cara mendesain ulang perwajahan pada bagian komentar ini. Template yang saya rubah pada layout komentarnya template “ minima “ , sedangkan Desain dan kodingnya yang saya gunakan untuk desain komentarnya saya ambil dari template “ True Elegan By hajunik “.

* red : jadi jika anda mengunakan template lain untuk di ganti pada desain komentarnya, cari dan sesuaikan dengan kode comment pada template anda.

Langkah pertama :

Buka tab Edit Html. dan tandai/centang di samping tulisan Expand Widget Templates.

Kemudian cari kode css untuk comment, seperti di bawah ini.

/* 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; }

Setelah itu ganti css commnet di atas dengan kode css ini.

/* 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;}

* Red : atau bisa juga anda memasukan/menyimpan langsung kode di atas, sebelum kode ini.

]]></b:skin>

Langkah Kedua :

Kemudian cari kode html 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>

Setelah itu ganti kode Html di atas dengan kode 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> <div class='pane_r'> <data:comment.body/> </div> <div class=' clear'/></li> </b:loop> </ul>

Setelah beres Save Template.