Friday, January 18, 2013

Membuat Komentar Admin Tampil Berbeda di Blog

Hallo sobat semua. Bosen gak tau mau ngapain, mending share tutorial aja deh..hehe. Tutorial kali ini, Hilmawan mau ngasih tutorial nie bagaimana cara membuat komentar admin blog tampil berbada dari komentar-komentar pengunjung lainnya. Ya, fungsinya sih cuma buat nambah keren penampilan blog kita aja sob..hehe. Emmh, lihat dulu aja deh screenshotnya dibawah ini (yang aku beri linkaran kuning)

komentar admin

Ok, dah lihat kan ? ya kurang lebih nya kayak gitu sob. Langsung aja deh tancap gas ke langkah-langkah cara bikinnya

1. Login ke akun blogger sobat

2. Masuk ke halaman Template - Edit HTML (tapi jangan lupa unduh dulu template sobat biar lok ada kesalahan bisa langsung kembali seperti semua. Udah tau kan caranya..hehe)

3. Sekarang, cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah menemukan kodenya) Setelah ketemu, letakkan kode berkitu ini tepat diatasnya
.author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
border-radius:20px 0px 0px 20px;
}
 keterangan : ganti kode yang saya beri warna merah sesuai keinginan sobat
4. Kemudian cari kode ini sob
 <data:commentPostedByMsg/>
    </dt>
Kalau udah ketemu, taruh kode ini dibawahnya
<b:if cond='data:comment.author == data:post.author'>
        <dd class='author-comments'>
        <p><data:comment.body/></p>
        </dd>
        <b:else/>
5. Lanjut, cari kode berikut <dd class='comment-footer'>
kalau udah ketemu, tampahkan kode </b:if> tepat diatasnya

Jadi keseluruhannya jadi kayak gini sob
 <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
                      <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'>
6. Simpan Template dan lihat hasilnya

No comments:

Post a Comment