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 &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/AVvXsEgzdXRXsLG4dEC0Ddec9IEGiwMmtWOf8_fvKTPKdmu74EXGse0yQjreiVV8bhfYOvDP9ucA-uyTRRdv_tbA90LPb2Zd3xq2RklB9VRlTNv7bxCWIO2LHiJrIlexffUbwTqqCDvmd_TSXnSk/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;
  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(&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/AVvXsEi80JyvCeyjpGoBuDKdqX71pkBzVBdxNicH8KHLQEyTsDEdKj9b3RU4TTX-8PA2NLLshw_lo8P1lRGDLAIV-oHUKHWgEiifk_fcx2pzUcr_dNLLz8o5VpASj6ve6omoVkguEyWHNncIxLCu/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;
  }
}

4. Simpan template kamu.

Mau liat demonya?? KLIK DISINI