Tambahkan Gaya Cool untuk Komentar Blogger

info-gamepc.blogspot.com - Jika Anda membutuhkan model terbaru untuk komentar yang ada ditemplate standar Blogger, inilah CSS sederhana yang akan membantu Anda untuk menerapkan latar belakang yang berbeda, membuat gambar avatar bulat, dengan sudut-sudut membulat sebenarnya hanya trik kode HTML, jadi pengunjung terlihat menggelembung pada komentar Anda.

Untuk merubah komentar dalam model ini, semua yang perlu Anda lakukan adalah menambahkan kode dibawah ini diatas kode ]]></b:skin> kemudian simpan template Anda.

Berikut Kodenya

.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;
}

Cara Mengubah Background Komentar, Border dan Warna

- Mengganti nilai # F9F9F9 untuk mengubah warna latar belakang dari komentar;
- # 555 untuk mengubah warna teks komentar;
- # Eeeeee untuk mengubah warna bayangan di sekitar komentar;
- 4px solid # eeeeee untuk mengubah lebar perbatasan (4px), gaya (padat) dan warna (# eeeeee) sekitar komentar;
- 1.190em untuk mengubah ukuran font komentar;
- Untuk mengubah warna panah, ganti nilai # eeeeee dari warna: # eeeeee;
- Untuk mengubah lebar perbatasan (7px), gaya (padat) dan warna (# eeeeee) sekitar
avatar, memodifikasi bagian ini: 7px solid # eeeeee;
- Untuk mengubah ukuran avatar 'dan kebulatan, mengubah nilai 60px;

Langkah 5. Terakhir, klik tombol Simpan ... dan selesai!

Contoh penampakan diKomentar Blog saya: