Posted by Aak
Aak-share.com Updated at: 9:04:00 PM

Cara Membuat Kotak Komentar Keren di Blog

19 comments:
Cara Membuat Kotak Komentar keren Di Blog - Berikut ini saya akan share tutorial membuat kotak komentar keren, untuk membuat kotak komentar ini hanya dengan menggunakan properti CSS loh sobat. Jadi tidak memberatkan loading blog.


Membuat tampilan kotak komentar menjadi menarik, tentunya bisa menambah nilai plus untuk blog Anda. Kabar baik lainnya adalah penerapannya sangat mudah, Anda tertarik berikut ini panduannya :

Pemasangan Kotak Komentar

1. Login keakun Blogger anda
2. Pilih Template  » Edit HTML
3. Dengan menggunakan Ctrl+F anda cari kode ]]></b:skin>
4. Selanjutanya anda copy kode dibawah ini dan anda terapkan sebelum kode ]]></b:skin>

#comments{margin:30px 30px 0;overflow:hidden}
#comments h4{display:block;padding:10px;line-height:10px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#4184aa}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #4184aa;border-right:20px solid transparent;width:0;height:0;line-height:0}
}
h4#comment-post-message {
display:none;
}
.comments .comments-content {
font-size:12px;
text-align:left;
}
#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;
letter-spacing:.1em
}
#comments-block .comment-body p {
margin:0 0 .75em
}
.deleted-comment {
font-style:italic;
color:gray
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif!important
}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child {
padding:0;
margin:0;
position:relative
}
.comments .avatar-image-container {
width:45px;
height:45px;
max-width:45px;
max-height:45px;
padding:2px;
border-radius:2px;
margin-right:5px;
margin-top:8px;
margin-left:8px;
position:relative;
background-color:white;
z-index: 2;
}
.comments .avatar-image-container img {
max-width:100%;
height:100%
}
.comments .inline-thread .avatar-image-container {
width:38px;
height:38px;
position:relative;
margin:0
}
.comments .comment-block {
margin-left:0;
padding:0 8px;
min-height:90px;
border:1px solid #4173af;
border-radius:2px
}
.comments .inline-thread .comment-block {
margin-left:45px;
padding:0;
border:0;
min-height:initial
}
.comments .comments-content .comment:hover .comment-block {
border:1px solid 4173af;
-moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
-webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21)
}
.comments .comments-content .comment:hover .inline-thread .comment-block {
border:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
.comments .comments-content .comment-replies {
margin-left:20px;
margin-top:5px
}
.comments .comments-content .comment-header,.comments .comments-content .comment-content {
margin:0 0 8px;
padding-left:58px;
text-align:left;
line-height:1.6em;
}
.comments .comments-content .comment-header {
margin-top:8px;
height:14px
}
.comments .comments-content .inline-thread .comment-header,.comments .comments-content .inline-thread .comment-content {
padding-left:8px;
margin-top:0;
text-align:left;
line-height:1.6em;
}
.comment-actions {
position:absolute;
top:64px;
left:10px;
z-index:2
}
.comments .comment .comment-actions a {
background:#0671A1;
border-radius:4px;
position:relative;
display:block;
padding:2px 7px;
color:white;
top:-1px;
font-family:Arial,Sans-serif;
font-weight:bold;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
text-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.comments .comment .comment-actions a:hover {
text-decoration:none;
background-color:#0057ae;
}
.comments .comment .comment-actions a:active {
top:0;
background-color:#0057ae;
}
.comments .comments-content .inline-thread li.comment,.comments .comments-content .inline-thread li.comment:first-child,.comments .comments-content .inline-thread li.comment:last-child {
padding:5px;
border:1px solid #4173af;
margin-bottom:5px;
}
.comments .comments-content .inline-thread {
padding:0
}
.comments .comments-content .comment-thread.inline-thread ol {
padding-top:8px
}
.comments .comments-content .comment-thread.inline-thread ol > div:first-child {
border-left:1px solid #4173af;
padding:10px
}
.comments .comments-content .inline-thread li.comment::before {
content:"";
position:absolute;
width:11px;
height:1px;
background-color:#4173af;
display:block;
left:-12px;
top:12px
}
.comments .comments-content .inline-thread li.comment:last-child {
margin-bottom:0
}
.comments .comments-content .inline-thread li.comment:last-child::after {
content:"";
height:100%;
width:5px;
display:block;
background-color:#FCFCFC;
position:absolute;
top:13px;
left:-13px
}
.comments .thread-toggle.thread-expanded {
position:relative
}
.comments .thread-toggle.thread-expanded::after {
content:"";
display:block;
width:1px;
height:32px;
position:absolute;
background:#4173af;
top:-8px;
left:0
}
.comments .comment .comment-actions .item-control a {
display:none;
background-color:#FCFCFC;
background-position:2px 50%;
background-repeat:no-repeat;
background-image:url(http://2.bp.blogspot.com/-qiWCKPMFp-Q/UMA9xcj59ZI/AAAAAAAAG9Y/dmS0sHqpwDE/s14/Trash.png);
border:1px solid #4173af;
position:absolute;
left:655px;
text-indent:-9999px;
padding:0;
width:19px;
height:20px;
top:-59px;
border-radius:2px
}
.comments .comments-content .comment:hover .comment-actions .item-control a {
display:block
}
.comments .comments-content .comment:hover .inline-thread .comment-actions .item-control a {
display:none
}
.comments .comments-content .inline-thread li.comment:hover .comment-actions .item-control a {
display:block
}
.comments .inline-thread .comment .comment-actions .item-control a {
left:-61px;top:-35px
}
#comments h4#comment-post-message {
border-bottom:0;
background-color:transparent;
font-size:130%
}
.comment-form {
max-width:100%
}
.comments .comments-content .icon.blog-author {
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-color:transparent  transparent;
position: absolute;
right: 0;bottom: 4px;
}
.comments .comments-content .inline-thread .icon.blog-author {
bottom:-9px;
right:-5px;
}
.comments .comments-content .user,.comments .comments-content .datetime {
display:inline-block;
float:left
}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png);
}

5. Simpan Template

Note :
Apabila didalam kode CSS terdapat kode komentar lainnya, sebaiknya anda menghilangkannya.

Demikian saya sampaikan cara membuat kotak komentar keren di Blog, terima kasih sudah berkunjung dan semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

19 comments

Semoga kode di atas tidak memberatkan loading blog ya gan..? Izin coba...
salam sukses selalu...

Balas

Tidak memberatkan gan, karena hanya menggunakan properti CSS

Balas

Mantap tipsnya mas bro ....., aku udah terapkan di blog aku, meski hasilnya belum maksimal

Balas

Agar maksimal perlu pengeditan css gan dan di sesuaikan dengan template agan..

Balas

Nice Info Gan, Terimkahasih Banyak

Balas

gak ada perubahannya gan

Balas

Kode yag sudah ada perlu di hapus gan dan diganting dengan kode css diatas,

Balas

thanks buat infonya, sangat bermanfaat

Balas

waahh gan sengat bermanfaat sekali..ngomong" agan ganti template ya?? dulu kan bukan ini...

Balas

iya gan ganti template, mencari suasana baru gan hehehe...

Balas

terima kasih infonya gan
izin nyoba di blog ane

Balas

Silahkan gan, terimakasih sudah berkunjung.

Balas

Sama-sama gan, terima kasih juga sudah berkunjung.

Balas