Membuat Style Comment Author/Admin tampil Berbeda

Ketika anda blogwalking dan memberi komentar, seringkali atau pernah melihat sesuatu yang berbeda pada komentar author/admin blog tersebut. Menurut saya ini menarik dan perlu untuk dibuat. Awalnya saya menggunakan trik dari blogger indonesia yang cukup terkenal (off the record aja namanya) namun sudah tidak bisa digunakan lagi. Kali ini saya juga dapat dari Blogger asing yang hebat.

Ah, langsung aja ke Blog Tips nya ya..

Sekarang masuk ke Layout >> Edit HTML. Sebelum mengedit saran saya untuk membackup style css template blog anda
And than Click on the “Expand Widget Templates” option.

Tekan Ctrl + F dan cari kode ini "comments-block" dan tambahkan kode yang berwarna Merah

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

<b:if cond='data:comment.author == data:post.author'>

<dd class='blog-author-comment'>

<p><data:comment.body/></p>

</dd>

<b:else/>

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kemudian Cari kode berikut ini "comment-body"
Kebetulan kode saya seperti ini

.comment-body{
    color:#4d4d4d;
    padding: 5px;
    background:#f2f2f2;
    border-bottom: 1px solid #dcdbd7;
    list-style:none;
    }

Jika punya anda berbeda tidak apa apa, silahkan cari kode "comment-body" dan tambahkan kode berikut ini:

.blog-author-comment {
    margin:0 0 1.25em;
    padding:0 0 0 20px;
    }
.blog-author-comment p {
    margin:0 0 .5em;
    padding:0 0 0 20px;
    color:#FFFFFF;
    background:#000000;
    border-bottom: 1px solid #dcdbd7;
    font-style: bold;
    }

Sehinggu menjadi seperti ini:

.comment-body{
    color:#4d4d4d;
    padding: 5px;
    background:#f2f2f2;
    border-bottom: 1px solid #dcdbd7;
    list-style:none;
    }
.blog-author-comment {
    margin:0 0 1.25em;
    padding:0 0 0 20px;
    }
.blog-author-comment p {
    margin:0 0 .5em;
    padding:0 0 0 20px;
    color:#FFFFFF;
    background:#000000;
    border-bottom: 1px solid #dcdbd7;
    font-style: bold;
    }

Silahkan ganti warna nya pada bagian Background dan Color dengan warna pilihan anda:
Anda bisa melihat kode warna disini http://www.dankerizer.com/2008/12/kode-dasar-warna.html

Kemudian save dan lihat hasilnya.
Semoga Tutorial blog ini bermanfaat.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com