Bundarkan Comments Avatar Image – Trik Membuat Icon Blogger Comment menjadi bentuk bundar sangatlah mudah diterapkan. Asalkan memiliki foto profile yang telah di-upload di account google (untuk login blogger), pasti bisa. Terkadang kita mengalami kesulitan dalam upload foto kedalam account google, hal ini bisa jadi dikarenakan foto yang akan kita upload memiliki resolusi dibawah 250 pixel. Karena itu, pilihlah foto yag ukurannya sesuai.
Bila dalam keadaan default Comments Avatar Image berbentuk kotak,
Untuk kali ini kita mencoba Membundarkan Gambar Avatar dikotak komentar. Sedikit terlihat rapih bukan?
Cara Membuat Bundar Comments Avatar Image ini sangatlah mudah. Sobat tinggal Login ke Akun Blogger sobat, lalu :
- Edit HTML
- Template › Edit HTML
- Lanjutkan dengan mencari kode : ]]></b:skin>
(Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian).
- Copy dan paste-kan kode CSS dalam Post Blockquote dibawah, di atas kode
]]></b:skin>
.comments .avatar-image-container{
max-height:50px;
max-width:50px;
height:50px;
width:50px;
border-radius:29px;
padding:2px;
border:2px solid #39E939;
box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
background:#1B3CFA;
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 #FE081C !important;
}
.comments .comment-block{
margin-left:75px;
}
]]></b:skin>
.comments .avatar-image-container{
max-height:50px;
max-width:50px;
height:50px;
width:50px;
border-radius:29px;
padding:2px;
border:2px solid #39E939;
box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
background:#1B3CFA;
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 #FE081C !important;
}
.comments .comment-block{
margin-left:75px;
}
- Kemudian Simpan Template/Save Template
Buka blog di halaman posting, kemudian buat sebuah komentar untuk melihat hasilnya. Untuk warna background dan warna border silahkan kreasikan sesuai dengan kesukaan sobat.
0 komentar:
Posting Komentar