
D E M O
Tarik halaman ke bawah hingga kotak komentar dan anda akan melihat bentuk icon komentar baru berbentuk bulat. Anda bisa mencobanya dengan membuat sebuah komentar agar bisa melihat apakah icon bulat ini sungguh-sungguh berfungsi tidak hanya pada icon author comment, namun juga pada semua icon pemberi komentar.
Kode CSS
.comments .avatar-image-container{
max-height:50px;
max-width:50px;
height:50px;
width:50px;
border-radius:29px;
padding:2px;
border:2px solid #ccc;
box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
background:#888;
margin:2px 4px 2px 2px;
}
.comments .avatar-image-container img{
width:50px;
max-width:50px;
height:50px;
max-height:50px;
border-radius:25px;
border:0 solid #fff !important;
}
.comments .comment-block{
margin-left:75px;
}
Cara merubah icon blogger comment menjadi bentuk bulat
- Login ke BloggerAnda bisa klik disini untuk login ke blogger!
- Template
- Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
- Edit HTML
Template › Edit HTML
- Procced (Lanjutkan)
- Cari Kode : ]]></b:skin>
- Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
- Copy dan paste-kan kode css di atas kode ]]></b:skin>
- Simpan Template/Save Template
- Selesai...
- Buka blog di halaman posting, kemudian buat sebuah komentar untuk melihat hasilnya.
Contoh posisi kode css terhadap ]]></b:skin>
.comments .avatar-image-container{
max-height:50px;
max-width:50px;
height:50px;
width:50px;
border-radius:29px;
padding:2px;
border:2px solid #ccc;
box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
background:#888;
margin:2px 4px 2px 2px;
}
.comments .avatar-image-container img{
width:50px;
max-width:50px;
height:50px;
max-height:50px;
border-radius:25px;
border:0 solid #fff !important;
}
.comments .comment-block{
margin-left:75px;
}
]]></b:skin>
saya jadi orang pertama nih,nyobain komen dengan avatar bulat....:)
BalasHapus#mantap sob
iya mas,trimaksih atas kunjungannya gan ...salam kenal
BalasHapuskeren juga ya
BalasHapus