Home » All Tutorials » CSS » Komentar » Modifikasi Tampilan Pesan Komentar Versi 2

Modifikasi Tampilan Pesan Komentar Versi 2

19.06

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 <data:blogCommentMessage/> ,
lalu ganti dengan kode <div id='pra-comment'><data:blogCommentMessage/></div> ,
"Biasanya kode <data:blogCommentMessage/> 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..

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag URL GAMBAR ANDA...
Untuk menyisipkan kode, gunakan tag KODE ANDA...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA...

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.