Beranda » CSS » CSS threaded comments untuk blogger

CSS threaded comments untuk blogger

Threaded comment adalah tampilan komentar bertingkat untuk blogger, seperti yang dimiliki oleh wordpress. lebih ringan gaya dan terlihat bagus di blogger dan tanpa popup. berikut ini jika sobat sudah memilikinya dan ingin mencoba merubah tampilan atau gaya threaded commen.

untuk memasang cari saja kode

<b:includable id='threaded_comment_css'>
<style>

</style>
</b:includable>

untuk lebih mudah gunakan Ctrl + F lalu sisipkan kode dan simpan peruahan.
Pilih mana gaya yang sobat suka

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  margin-bottom:16px;
  font-weight:normal;
  text-align:left;
  line-height:1.4em;
}

.comments .comment .comment-actions a {
  display:inline-block;
  margin:0;
  padding:1px 6px;
  border:1px solid #C4C4C4;
  border-top-color:#E4E4E4;
  border-left-color:#E4E4E4;
  color:#424242 !important;
  text-align:center;
  text-shadow:0 -1px 0 white;
  text-decoration:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  background:#EDEDED;
  background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );
  background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );
  font:11px/18px sans-serif;
  padding:2px 8px;
  margin-right:10px;
}

.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#fff;
  border:1px solid #5AB1E2;
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
  background:#EBF5FE;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.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 .user a {
  color:#2D5E7B;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
}

.comments .comments-content .icon.blog-author {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  color:#999999;
  float:right;
  font-size:11px;
  text-decoration:none;
}

.comments .comments-content,.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {
  background-color:#F4F4F4;
  border:thin solid #E6E6E6;
  margin-bottom:5px;
  padding:5px;
}

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

.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 {
  cursor:pointer;
}

.comments .continue a {
  display:inline-block;
  margin:0;
  padding:1px 6px;
  border:1px solid #C4C4C4;
  border-top-color:#E4E4E4;
  border-left-color:#E4E4E4;
  color:#424242 !important;
  text-align:center;
  text-shadow:0 -1px 0 white;
  text-decoration:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  background:#EDEDED;
  background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );
  background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );
  font:11px/18px sans-serif;
  padding:2px 8px;
  margin-right:10px;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  background-image:url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");
  background-position:center center;
  background-repeat:no-repeat;
  float:left;
  width:36px;
  max-height:36px;
  margin:0;
  outline:1px solid #FFFFFF;
  padding:3px;
  vertical-align:middle;
  overflow:hidden;
  border:1px solid #DDDDDD;
}

.comments .avatar-image-container img {
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
}

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

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:13px;
  margin-bottom:16px;
  overflow:auto;
}

.comments .comment .comment-actions a {
  float:right;
  display:inline-block;
  margin:5px 0 0 5px;
  padding:1px 6px;
  border:1px solid;
  color:black !important;
  text-align:center;
  text-decoration:none;
  background:#DD0;
  font:11px/18px sans-serif;
  border-color:transparent black black black;
}

.item-control {
  display:inline;
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:left;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:36px;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.comments .comments-content .comment:last-child {
  padding-bottom:0;
}

.comments .comments-content .comment-body {
  position:relative;
}

.comments .comments-content .user {
  font-size:14px;
  color:#666666 !important;
  text-decoration:none;
}

/* Style Komentar Author */
.comments .comments-content .icon.blog-author {
  display:inline-block;
  margin:0 0 -4px 6px;
  position:absolute;
  top:0;
  right:0;
  background-color:#39A;
  width:100%;
  height:100%;
  z-index:-1;
}

/* AKhir style Komentar Author */
.comments .comments-content .datetime {
  font-size:10px;
  color:#999;
  text-decoration:none;
}

.comments .comments-content .datetime a {
  float:right;
}

.comments .comments-content .comment-header {
  margin:0 0 8px;
  border:thin solid #E6E6E6;
  background-color:#dff0fa;
  background-color:rgba(223,240,250,0.3);
  padding:5px;
}

.comments .comments-content .comment-content {
  margin:0 0 8px;
  padding:5px;
  border:thin solid #E6E6E6;
  background-color:#F4F4F4;
  background-color:rgba(244,244,244,0.5);
  line-height:21px;
}

.comments .comments-content .comment-content {
  text-align:justify;
  line-height:1.5;
}

.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 {
  cursor:pointer;
  border:1px solid #666;
  color:#424242 !important;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  font:normal 11px/18px sans-serif;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  background:rgb(196,191,39);
  background:-webkit-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-moz-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-o-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:-ms-linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  background:linear-gradient(top,rgba(196,191,39,1) 0%,rgba(237,233,128,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27',endColorstr='#ede980',GradientType=0 );
}

.comments .continue a {
  display:block;
  color:black;
  padding:2px 5px;
}

.comments .continue a:hover {
  text-decoration:none !important;
  background:#ccc;
  background:-webkit-gradient(linear,left top,left bottom,color-stop(.2,#eeeeee),color-stop(1,#cccccc));
  background:-webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:-ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  background:linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  width:36px;
  max-height:36px;
  overflow:hidden;
  padding:0;
  margin-left:10px;
  margin-top:2px;
}

.comments .avatar-image-container img {
  width:36px;
}

img[src$="http://img1.blogblog.com/img/anon36.png"] {
  display:none;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
  padding:5px;
  background:#68F;
  border:1px solid #E4E4E4;
  z-index:99;
}

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

.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;
}

.comments .comments-content .icon.blog-author {
  background-repeat:no-repeat;
  background-image:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURh1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

.comments .comment-thread.inline-thread {
  background-color:transparent;
}

.comments .continue {
  border-top:2px solid #000000;
}

.comments {
  clear:both;
  margin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  largin-bottom:16px;
  font-family:Verdana;
  font-weight:normal;
  text-align:left;
  $0D
line-height:1.4em;
}

.comments .continue a,.comments .comment .comment-actions a {
  display:inline;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  padding:2px 5px;
  text-decoration:none;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  color:#FFF;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  margin-right:10px;
  border:1px solid #3079ED;
  background:#0066FF;
  background:-webkit-gradient(linear,left top,left bottom,from(#0099FF),to(#009999));
  background:-moz-linear-gradient(top,#0099FF,#009999);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF',endColorstr='#009999');
}

.comments .continue a:hover,.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#0099FF;
  background:-webkit-gradient(linear,left top,left bottom,from(#009999),to(#0099FF));
  background:-moz-linear-gradient(top,#009999,#0099FF);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999',endColorstr='#0099FF');
}

.comments .continue a:active,.comments .comment .comment-actions a:active {
  position:relative;
  top:1px;
  background:-webkit-gradient(linear,left top,left bottom,from(#0066FF),to(#0099CC));
  background:-moz-linear-gradient(top,#0066FF,#0099CC);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF',endColorstr='#0099CC');
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em 0 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0 0 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
}

.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom:0;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}

.comments .comments-content .comment-body {
  position:rel`tive;
}

.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color:#444;
}

.comments .comments-content .user a:hover {
  text-decoration:none;
  color:#555;
}

.comments .comments-content .icon.blog-author {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  largin-left:6px;
  color:#999;
  font-style:italic;
  font-size:11px;
  float:right;
}

.comments .comments-content .comment-content {
  font-family:Arial,sans-serif;
  font-size:12.5px;
  line-height:19px;
}

.comments .comments-content .comment-content {
  font-family:Arial,sans-serif;
  font-size:12.5px;
  line-height:19px;
  text-align:none;
  margin:15px 0 15px;
}

.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}

.comments .comments-replybox {
  border:nnne;
  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 .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.colments .thread-toggle {
  display:inline-block;
}

.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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  overflow:hidden;
  backgrnund:#fefefe;
  -webkit-box-shadow:0 1px 1px #ccc;
  -moz-box-shadow:0 1px 1px #ccc;
  box-shadow:0 1px 1px #ccc;
}

.comments .avatar-image-container img {
  -moz-border-radius:125px;
  -webkit-border-radius:125px;
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
  padding:15px 20px 15px 20px;
  background:#F7F7F7;
  border:1px solid #E4E4E4;
  overflow:hidden;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-image:initial;
}

.comment-form {
  clear:both;
  max-width:100%;
}

.comments {
  clear:both;
  margin:10px !important;
}

.comments a:link,.comments a:hover,.comments a:visited {
  color:#4F97BD!important;
}

.comment-actions a,#blog-pager a,.jump-link a {
  margin:0 5px;
  cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
  color:#444;
  font:bold 11px Arial,Sans-Serif;
  text-decoration:none;
  outline:none;
  vertical-align:middle;
}

.comments .avatar-image-container {
  float:left;
  overflow:visible !important;
  width:auto !important;
}

.comments .avatar-image-container img {
  border:4px solid transparent !important;
  border-radius:4px !important;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  box-shadow:0 0 2px rgb(0,0,0,0);
  -moz-box-shadow:0 0 2px rgb(0,0,0,0);
  -webkitbox-shadow:0 0 2px rgb(0,0,0,0);
  margin:0;
  max-width:40px;
  padding:0;
}

.comments .thread-toggle {
  margin-bottom:10px;
}

.comments .comment-block {
  background:#FFF !important;
  border:1px dotted #CCC !important;
  margin-left:60px;
  padding:10px 15px;
  position:relative;
}

.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:60px;
}

.comments .comment-thread.inline-thread .comment {
  margin:0 0 5px 30%; /* Level 6+ */
padding:10px 15px;
  color:#000;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {
  margin:0 0 5px 25%;
}

/* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {
  margin:0 0 5px 20%;
}

/* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {
  margin:0 0 5px 15%;
}

/* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {
  margin:0 0 5px 10%;
}

/* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {
  margin:0 0 5px 5%;
}

/* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {
  margin:0 0 5px 0%;
}

/* Level 1 */
.icon.blog-author {
  background:transparent;
  border-width:8px;
  border-color:transparent transparent transparent seaGreen;
  border-style:solid;
  width:0!important;
  height:0!important;
  position:relative;
}

.comments {
  clear:both;
  marfin-top:10px;
  margin-bottom:0;
  line-height:1em;
}

.comments .comments-content {
  font-size:12px;
  margin-bottom:16px;
  font-family:Verdana;
  font-weight:normal;
  text-align:left;
  line-height:1.4em;
}

.comments .comment .comment-actions a {
  background:#1F9EE5;
  cursor:pointer;
  color:#ffffff;
  padding:2px 3px;
  margin-right:10px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  font:9px sans-serif;
  border:1px solid #1F9EE5;
}

.comments .comment .comment-actions a:hover {
  text-decoration:none;
  background:#5AB1E2;
  border:1px solid #5AB1E2;
}

.comments .comments-content .comment-thread ol {
  list-style-type:none;
  padding:0;
  text-align:none;
}

.comments .comments-content .inline-thread {
  padding:0.5em 1em;
}

.comments .comments-content .comment-thread {
  margin:8px 0;
}

.comments .comments-content .comment-thread:empty {
  display:none;
}

.comments .comments-content .comment-replies {
  margin-top:1em;
  margin-left:40px;
  font-size:12px;
  background:#EBF5FE;
  border:1px dotted #DDD;
}

.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}

.comments .comments-content .comment:first-child {
  padding-top:16px;
}

.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 {
  width:18px;
  height:18px;
  display:inline-block;
  margin:0 0 -4px 6px;
}

.comments .comments-content .datetime {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnl2DDvHTBe16xS8qh7AokRDTx2Y8WeF2bIUmXBWb-39dKzGZGyvvvnd4pu3n5x300lIFIAPOrpzgxyH74B3AsFDMBWRNvFWO0B-lvWBSRSnfo0scFpZmgy1depO1EOG61ESLxjWXQT-tw/h80/icon_clock.gif) no-repeat;
  margin-left:6px;
  padding-left:20px;
  font-size:10px;
  float:right;
}

.comments .comments-content .comment-header,.comments .comments-content .comment-content {
  margin:0 0 8px;
}

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

.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 .commdnt-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 {
  cursor:pointer;
}

.comments .continue a {
  display:block;
  padding:0.5em;
  font-weight:bold;
}

.comments .comments-content .loadmore {
  cursor:pointer;
  max-height:3em;
  margin-top:3em;
}

.comments .comments-content .loadmore.loaded {
  max-height:0;
  opacity:0;
  overflow:hidden;
}

.comments .thread-chrome.thread-collapsed {
  display:none;
}

.comments .thread-toggle {
  display:inline-block;
}

.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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC"
  ) no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow {
  background:url("
  data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg=="
  ) no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
  float:left;
  width:36px;
  max-height:36px;
  overflow:hidden;
}

.comments .avatar-image-container img {
  width:36px;
}

.comments .comment-block {
  margin-left:48px;
  position:relative;
}

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

Selamat mencoba

CSS threaded comments untuk blogger

Belum ada tanggapan untuk "CSS threaded comments untuk blogger"

Post a Comment