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 HTMLLetakkan 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%}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
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.