Cara Menciptakan Kotak Komentar Keren Di Blog Dengan Css

Begitu banyak cara untuk mempercantik dan memper indah blog, mulai dari menciptakan artikel terkait, label UI dan masih banyak lagi. Tampilan Blog menjadi keren juga kita dapat mendesain pada kotak komentar.

Seperti hal nya, tentu semua ingin blognya terlihat lebih elok dan menarik. Disini saya akan sedikit membantu mewujudkannya ialah dengan menciptakan kotak komentar teman terlihat elok dan menarik..

Naah, apakah Anda sedang mencari kotak komentar keren? Disini tempatnya, pada kotak komentar yang saya sarankan ini mengunakan properti CSS. Kaprikornus Anda tidak perlu lagi merubah properti HTML serta ringan tidak memberatkan blog. Berikut screnshootnya :

Apabila teman tertarik untuk menerapkannya, berikut ini langkah mudahnya :

Cara Membuat Kotak Komentar Keren di Blog

1. Login ke akun Blogger sobat
2. Kemudian pilih template  (Jangan lupa backup dulu template, untuk jaga-jaga.) >> Edit HTML
3. Tahap selanjutnya, Anda copy isyarat di bawah ini terapkan sebelum ]]></b:skin>

/*----kotak komentar----*/
#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:#FFFFFF;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #0000AD;
border-left:4px solid #0000AD;
border-bottom:1px solid #0000AD;
border-right:1px solid #0000AD;
-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: #0000AD; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #0000AD; 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%}

4. Simpan Template

Note : Apabila pada template Anda sudah Anda isyarat kotak komentar lain, ganti dengan isyarat komentar di atas.

Mudah buka sobat, Demikian saya sampaikan,  saya ucapkan terima kasih sudah berkunjung. Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/