Postingan kali ini saya akan menjelaskan bagaimana cara membuat kotak komentar di blog simple tapi menarik, dan kotak add comentpun bisa memenuhi area komentar blog anda dengan tertata rapi sehingga kotak komentar blog saudara terlinhat ringkas dan simple tetapi menarik,
Pada dasarnya kotak komentar memang sangat di perlukan untuk blog karena pengunjung bisa bertanya langsung kepada kita dan memberikan saran kritik yang sifatnya bisa membangun pembloger indonesia lebih kreatif dalam membuat artikel. Langsung saja untuk membuat kotak komentar seperti di bawah ini ikuti langkah-langkahnya sebagai berikut:
1. Masuk Akun Blogger Sobat
2. Pilih Template > Edit HTML
3. Cari Kode ]]></b:skin>
4. Copy Kode Di Bawah ini Diatas 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%}
5. Simpan Template Dan Lihat Hasilnya . Semoga anda berhasil dalam menyelesaikan tahap tersebut dan bisa menikmati hasilnya. sekian terima kasih
Posts
