Cara Membuat Kotak Komentar Author Blog Berbeda

Tutorial Blog Pemula

Rabu, 01 Februari 2012

1 Komentar

Jalan- jalan ke blog sahabat atau blogwalking memang membawa berkah ya. Nah kali ini Tutorial Blog Pemula akan share ilmu yang dulu pernah diperoleh dari seorang sahabat blogger, Sampeweweh. Tips Cara Membuat Kotak Komentar Author Blog Berbeda ini akan mengajak sahabat blogger untuk memiliki kotak komentar author yang berbeda dari kotak komentar dari pengunjung. Tujuannya sederhana, yaitu agar kotak komentar kita terlihat lebih menarik sekaligus mempermudah pengunjung untuk membaca balasan komentar dari pemilik blog.

Coba sobat perhatikan kotak komentar pengunjung sekaligus balasan komentar dari saya di postingan Definisi Pagerank. Nah, ketika saya yang me- reply maka pada kotak komentar akan muncul garis sebelah kiri berwarna biru, dengan background komentar yang bentuknya juga berbeda dengan komentar pengunjung. Nah gimana cara buatnya, simak langsung yuk tutorialnya :

1.      Login ke akun blogger masing- masing

2.      Pilih Rancangan --- > Edit HTML, jangan lupa untuk memberi tanda centang pada Expand Template Widget

3.      Cari kode ]]></b:skin> dan pastekan kode di bawah ini tepat di atas kode tadi :
.author-comments {
Color: #000000;
background:A1C1D9;
border-bottom:1px solid #7700FF;
border-top:1px solid #7700FF;
border-left: 3px solid #7700FF;;
border-right:1px solid #7700FF;
padding: 3px;
}

Keterangan :

Color: #000000;  =-=-==-=-=> Warna tulisan komentar, bisa diganti sesuai keinginan

background:A1C1D9; =-=-=-=-=> Warna background, bisa diganti sesuai keinginan
solid #7700FF; =-=-=-=-=-=> Warna border, bisa diganti sesuai keinginan

4.      Kemudian sobat cari kode di bawah ini :
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' 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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<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'>
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/></a>
<b:else/>

tulisan berwarna merah di atas adalah kode yang harus sobat tambahkan pada html blog sobat agar template tidak error.

5.      Selesai! Maka kotak komentar author pada blog sobat sudah berbeda dengan kotak komentar pengunjung blog sobat.

Selamat Mencoba!

Source : Sampeweweh Blog