Monday, January 21, 2013

Modifikasi Tampilan Pesan Komentar Versi 2

Pada kesempatan kali ini saya akan membahas tentang cara memodifikasi tampilan pesan komentar. Sebelumnya sudah pernah saya bahas "Modifikasi Tampilan Pesan Komenta"dan kali ini saya akan merilis versi duanya, contohnya seperti gambar diatas. Kode CSS-nya saya dapatkan dari http://blog.duypham.info.

Berikut langkah-langkah pemasanganya:

1. Pada dasboard, Masuk ke Template pilih Edit HTML lalu Centang Expand template widget Cari kode <p><data:blogCommentMessage/></p> ,
lalu ganti dengan kode <div id='pra-comment'><data:blogCommentMessage/></div> ,
"Biasanya kode <p><data:blogCommentMessage/></p> jumlahnya lebih dari 2 jadi ganti semua kode tersebut"
2. Kemudian letakkan kode berikut ini diatas kode ]]></b:skin>

#pra-comment{

position:relative;

background-color:#fff;

border-radius:20px;

padding:10px;

font-size:13px;

line-height:1.6em;

color:#111;

width:100%;

}
#pra-comment,#pra-comment:after,#pra-comment:before{

border:4px solid #ff4e47;

background-color:#fff

}
#pra-comment:after{

bottom:-20px;

right:30px;

width:20px;

height:20px

}
#pra-comment:after,#pra-comment:before{

content:"";position:absolute;

border-radius:50%

}
#pra-comment:before{

bottom:-30px;

right:60px;

width:10px;

height:10px

}