Canda Blogs: Komentar Blogger Seperti Facebook dengan CSS

Sabtu, 07 Juli 2012

Komentar Blogger Seperti Facebook dengan CSS

Komentar Blogger Seperti Facebook dengan CSS - Kali ini saya akan membahas bagaimana cara membuat komentar blogger seperti facebook dengan CSS. Banyak tutorial CSS untuk merubah tampilan standart blogger Thread comments yang dipersembahkan oleh rekan-rekan blogger. dikarenakan tampilan komentar standart blogger kurang menarik, atau bisa dikatakan biasa-biasa saja.

Tutorial CSS kali ini saya akan berbagi tentang Komentar Blogger seperti facebook, dengan tambahan kode CSS. Contoh Komentar Blogger Seperti Facebook, seperti gambar dibawah ini :

Berikut Tutorialnya :

1. Sign in ke blogger kamu

2. Masuk ke Template, Edit HTML, Ceklis "expand template widget"

3. Cari kode ]]></b:skin>, bila sudah letakkan kode berikut tepat diatas kode tadi

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding-top: 5px;padding-right: 5px;font: 11px/1.4 "lucida grande",tahoma,verdana,arial,sans-serif;padding-top: 3px;
}
.comments .comment .comment-actions a:hover {

}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 5px 0 5px 5px;
}
.comments .comments-content .comment-thread {
margin: 0 0 -12px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -4px;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:0px;
}
.comments .comments-content .comment:first-child {
padding-top:2px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1x9Xvs2rfArkN2MhbWieH5el_ZWTma98g7seND339bXH7gHJcuAJ5EAcGHINmwBeA0Bh8h9iC5S8w5xjqppf-GaB8V9OOkmxWHviNNUMFTFjDsSpAClj2yo1jOUEGxTBC14iYn1_MNSl/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif") repeat scroll 0 0 transparent;display: inline-block;height: 15px;margin: 0 0 -4px 6px;width: 15px;
border: 1px solid #3B5998;}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 5px;
color: #555555;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-size: 11px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: none repeat scroll 0 0 #EDEFF4;cursor: pointer;padding: 3px;text-align: right;
}
.comments .continue a {
font-weight: normal
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
background: none repeat scroll 0 0 #EDEFF4;isplay: inline-block;padding-bottom: 3px;width: 100%;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;margin: 5px;max-height: 36px;overflow: hidden;position: absolute;width: 36px;z-index: 1000;
}
.comments .avatar-image-container img {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFN5DEfgYDM482DrdCGx7E74ZnmwIVklv8yPLXJaTs4n-Ic-t7YlfkghqsLFkUMqH4LMcaxiNmkL-bPTZiTW1Fsrhern14FloIH22KfHExmUjCP8GL29Mnm3_IBh3y-mxLMjF9GCdo9-L2/s1600/avatar.png");height: 35px;width: 35px;}
.comments {
position: relative;
}
.comment-block {
    position: relative;
background: none repeat scroll 0 0 #EDEFF4;
    padding: 5px;
padding-left:50px;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
    margin-left: 0;
}
}