November 30, 2011

Komentar Admin Berbeda Dengan Pengunjung Blog

Situseo Blog : Komentar admin berbeda dengan pengunjung, sebelumnya pernah dibahas mengenai cara mempercantik tampilan komentar dengan menambahkan garis dan background warna, sekarang kita modifikasi lagi dengan merubah tampilan komentar admin berbeda dengan komentar para pengunjung blog.

Untuk merubah tampilan komentar admin berbeda dengan tampilan komentar pengunjung blog, kita perlu menambahkan kode CSS tambahan, cara menambahkanya sebagai berikut :

1. Login ke akun blogger - pilih Design/Rancangan - Edit HTML
2. Ceklist Expand Widget Template, dan jangan lupa untuk membuat backup template terlebih dahulu.
3. Cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini diatasnya

.author-comments {
background: #f5f5f5;
border-left: 5px solid #4c4c4c;
border-bottom:1px dashed #4c4c4c;
padding: 20px 50px 20px 10px;
text-align:justify;
}

kode CSS tersebut yang akan membedakan tampilan komentar admin dan pengunjung, bila jaraknya tidak sesuai, kalian bisa merubah bagian padding-nya. Background bisa diganti dengan gambar, bila kalian ingin dengan gambar, kalian bisa memakai kode CSS dibawah ini :

.author-comments { 
background: url("http://1.bp.blogspot.com/-MRyBieRNlPU/Tpbez92HmsI/AAAAAAAAABI/cQIrBUEtTmE/s1600/24c60yc.jpg") no-repeat scroll right top #FFF;
border-left: 5px solid #C33F00;
border-bottom:1px dashed #C33F00;
padding: 20px 50px 20px 10px;
text-align:justify;
}

Dengan 2 contoh tersebut bisa kalian pakai salah satunya, atau kalian ingin menggunakan keduanya bisa dengan menggunakan kode :hover

4. Selanjutnya cari kode <data:comment.author/> dan sisipkan script yang berwarna merah diantara kode tersebut, untuk jelasnya menjadi seperti ini :

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

kemudian Save template kalian, untuk melihat hasilnya, coba berkomentar di blog sendiri.

Semoga bermanfaat,

9 Diskusi untuk Komentar Admin Berbeda Dengan Pengunjung Blog

1 Desember 2011 16.44  

wah mantp nih boleh copas donk hehehe

2 Desember 2011 00.43  

@universal testing machine: silahkan dicoba semoga bermanfaat

10 Februari 2012 17.49  

Mas kalo pasang hover contoh nya kek gimana

10 Februari 2012 18.19  

mas kalo masang over nya kayak gimana

11 Februari 2012 00.05  

Ambo Aieza : contoh hovernya, buat kode css tambahan seperti ini :

.author-comments:hover {
background: url("http://1.bp.blogspot.com/-MRyBieRNlPU/Tpbez92HmsI/AAAAAAAAABI/cQIrBUEtTmE/s1600/24c60yc.jpg") no-repeat scroll right top #FFF;

jika pada

.author-comments {
background: #f5f5f5;

atau sebaliknya

semoga membantu,

6 Maret 2012 12.14  

terima kasih banyak mas

waah... keren gan//
berlaku jg utk blogspot ya?

19 Juni 2012 16.40  

mantep masbro atas info nya..

blog nya juga menarik.. hehehe..

29 Desember 2012 21.11  

kok gak work ya mas???

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top