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

}

3. Simpan Template
Silahkan  anda sesuaikan sendiri, 
Selamat mencoba..  

Judul: Modifikasi Tampilan Pesan Komentar Versi 2; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts