cara merubah tampilan komentar dengan thumbnail bulat

moonroemoort

15 February 2014

2 Komentar

kali ini saya akan coba share cara merubah tampilan komentar dengan thumbnail bulat demonya bisa langsung di lihat di komentar blog saya ini ...
untuk merubah tampilan komentar kita hanya perlu menambahkan kode css pada kode antara <b:skin> dan </ b:skin> ikuti langkah pemasangannya

CARA PEMASANGAN

1. masuk dashboard
2. klik template pada menu
3. klik edit HTML
4. cari kode </ b:skin> 
5. paste kan kode di bawah ini tepat di atas kode </ b:skin>
6.  klik simpan template

.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

 CUSTOM

1. ganti kode #F9F9F9 untuk mengganti background komentar
2. ganti kode #555 untuk mengganti warna teks komentar
3. ganti kode # EEEEEE untuk mengubah warna bayangan di sekitar komentar;
4. 4px solid # eeeeee untuk mengubah lebar perbatasan (4px), gaya (padat) dan warna (# eeeeee) sekitar komentar;
5. 1.190em untuk mengubah ukuran font komentar;
6. Untuk mengubah warna panah, ganti nilai # eeeeee dari warna: # eeeeee;
7. Untuk mengubah lebar perbatasan (7px), gaya (padat) dan warna (# eeeeee) sekitar avatar, memodifikasi bagian ini: 7px solid # eeeeee;
8. Untuk mengubah ukuran avatar 'dan kebulatan, mengubah nilai 60px;