Membuat Komentar Bertema Facebook

Diposkan oleh Imron fhatoniLabel: Komentardi 08.03

pada kesempatan ini saya akan membagi sedikit tips yang mungkin bisa dicoba oleh para blogger yaitu membuat tampilan komentar seperti tampilan komentar di facebook tidak terlalu sulit untuk melakukan hal ini cukup dngan beberapa kode css tema komentar tersebut akan bisa dinikmati..
lansung saja kepada pokok permasalahannya..

Masuk blog anda
pilih template/edit html
kemudian cari kode ]]></b:skin> gunakalanlah ctrl + f untuk memudahkan pencarian anda
jika sudah ketemu copas kode dibawah ini dan letakan diatas tag ]]></b:skin>

/* CSS Komentar Blogspot - Tema Facebook
* Selengkapnya: https://plus.google.com/108949996304093815163/posts
*/

.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
color:rgb(51,51,51);
}

.comments .comments-content a {
color:#3B5998 !important;
}

.comments h2,
.comments h3,
.comments h4 {
font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
font-size:16px;
}

.comments .comments-content .comment {
margin:0 0 0;
padding:10px 10px;
border-top:1px solid #e9e9e9;
border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
margin:0 0 0;
padding:0 0 0;
border:none;
background:transparent;
}

.comments .comment .comment-header {
margin-bottom:4px;
}

.comments .comment .comment-header .datetime a {
color:#808080 !important;
}

.comments .comment .comment-actions a {
padding-right:5px;
}

.comments .thread-toggle .thread-arrow {
width:7px;
height:7px;
padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
width:50px;
height:50px;
max-width:none;
max-height:none;
border:none;
padding:0;
margin:0;
outline:none;
}

.comments .comment .comment-block {
margin:0 0 0 60px !important;
}

.comments .comment .comment-thread.inline-thread {
margin:7px 0 0 22px;
}

.comments .comment .comment-thread.inline-thread ol {
margin:7px 0 10px !important;
}

.comments .comment .comment-thread.inline-thread .comment {
background-color:#EDEFF4;
padding:5px 5px 0;
margin:1px 0 0;
border:none;
border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
width:32px;
height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
margin:0 0 0 40px !important;
}

.comments .comment .comment-content {
text-align:left;
}

.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 .comment .comment-thread.inline-thread .comment:last-child {
border-left:2px solid #A8B2CE !important;
}