CSS Komentar Reply Blogger Desain Facebook

Membuat Thread Comment/Repy Comment Bergaya Facebook. Pagi ini posting sederhana, memenuhi permintaan teman-teman yang menginginkan komentar reply di blognya lebih sylish. Saya sendiri lebih suka menggunakan gaya facebook yang simple dengan warna soft yang tidak membuat mata lelah. (Tapi, bagi custom template mesti baca dulu artikel berikut: Aktifkan Thread Comments di Custom Template)

Berikut ini saya bagikan kodenya. Silahkan login ke Blogger, masuk ke Template, pilih edit HTML (jika ada pesan, hanya untuk tingkat lanjut, PD aja klik Lanjutkan!) dan jangan lupa centang Expand Template Widget.

Berikut ini adalah CSSnya: (CSS yang mirip seperti di bawah ini sudah ada, jadi css di bawah ini berfungsi menggantikan CSS standart, cari css nya di bawah kode <b:includable id='threaded_comment_css'><style>, kemudian ganti dengan css di bawah ini)

.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 &quot;lucida grande&quot;,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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3frVUJYpV8nR-GiLQok2cZqaqZmPjEUtEu5XhvRqhequitrwrxId75M6xmC_8NXnXOCxjvEHoSzbR8PTZ7Yx5F5ecd8zO3wPtN_rRvekwiD5Zrhzd-JP7ihZ5AZVypNPIlScBfjFcXMUf/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif&quot;) 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: &quot;lucida grande&quot;,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;
  }
.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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqx31zzhx1jidfJDgup0JfX22_eNSTAvj9cuMq9G2rnXiPDwAowdvtdnHF6fkHEooQ5y4_dOiHO628YjwX0O1IE9uyjQMd_M6Z6jfh-0dFUhk__aex2oZbPPXr_nGd9sL0XlZENE1nzAk0/s1600/avatar.png&quot;);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;
  }
}

Cari kode berikut https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3frVUJYpV8nR-GiLQok2cZqaqZmPjEUtEu5XhvRqhequitrwrxId75M6xmC_8NXnXOCxjvEHoSzbR8PTZ7Yx5F5ecd8zO3wPtN_rRvekwiD5Zrhzd-JP7ihZ5AZVypNPIlScBfjFcXMUf/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif, kemudian ganti dengan alamat gambar Anda (itu gambar saya, kalau ndak diganti ntar eksis melulu deh...). Dan silahkan modifikasi CSS ini sesuai keinginan Anda, seperti lebar dan warnanya. Semoga bermanfaat ya....

Article Information:
Deskripsi: Menerapakan gaya facebook pada sistem komentar baru Blogger (Threaded Comments)