Modifikasi Thread Comments blogger dengan CSS

Bismillah, menlanjutkan postingan yang sbelumnya yang membahas tentang caa Mengganti Avatar Anonim Pada Komentar dengan jQuery, kali ini saya akan membahas tentang modifikasi Thread Comment bawaan blogger dengan CSS, seperti gambar diatas. avatar berputar dan membesar saat tersorot mouse.

langsung saja masuk tahap pemasangan, berikut cara pemasangannya:

Masuk ke Template » Edit HTML

Letakkan kode berikut ini di atas kode ]]></b:skin>.

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments-block .avatar-image-container img {width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author{width:16px;height:16px;display:inline-block;vertical-align:top;background:transparent url('/favicon.ico') no-repeat 50% 50%}
.comments .comments-content .loadmore a {
border-top: 1px solid #AD3000;
border-bottom: 1px solid #AD3000;
}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
}
.comment-block .comment-footer a:link, a:visited {
}
.comments .avatar-image-container {
    margin-left:-5px;
}
.comments .continue a{ display:inline;font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comments .continue a:hover {background:#860000;}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fff;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #AD3000;
border-left:4px solid #AD3000;
border-bottom:1px solid #AD3000;
border-right:1px solid #AD3000;
-webkit-border-radius: 0px 0px 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comment-actions a {font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
.comment-actions a:hover { background: #860000; color:#fff;}
.avatar-image-container {
-webkit-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {transform:scale(1.5) rotate(3600deg) translate(0px);-moz-transform:scale(1.5) rotate(3600deg) translate(0px);-webkit-transform:scale(1.5) rotate(3600deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 2.5s ease;-webkit-transition:all 2.5s ease
}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Terakhir Simpan template

Silahkan anda modifikasi lagi dan sesuaikan dengan warna template anda. Jika bingung dalam menentukan warna silahkan lihat Kode Warna.

Catatan:

Apabila thread comments anda sebelumnya sudah di modifikasi, lebih baik hapus thread comment sebelumnya kemudian ganti dengan yang ini agar tidak terjadi error/acak-acakan pada thread comment.

Silahkan tanyakan jika ada yang tidak di mengerti.

Selamat mencoba dan semoga berhasil.

Baca juga » Membuat Thread Comment Bertingkat

Judul: Modifikasi Thread Comments blogger dengan CSS; Ditulis oleh Unknown; Rating Blog: 5 dari 5