Tips dan Trik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded Coment

Tips dan Trik membuat Icon Blogger Comments berbentuk bulat di Blogger Threaded Coment, Menampilkan setiap icon pemberi komentar dalam bentuk bulat yang diberi border ternyata membuat tampilan semakin menarik. Dengan menambah sedikit kode css yang diletakkan di atas kode ]]></b:skin>, maka icon di blogger comments yang sebelumnya berbentuk kotak (bujur sangkar) akan terlihat berbeda dengan bentuk barunya. Akan lebih manis jika anda juga menambahkan efek shadow melalui kode css box-shadow property.

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

1. Login ke BloggerAnda bisa klik disini untuk login ke blogger!
2. Template
3. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
4. 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
5. Selesai...
6. 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>