CSS threaded comments untuk blogger

Home CSS CSS threaded comments untuk blogger

CSS threaded comments untuk blogger

Diposting oleh: Dafin defandaky pada: 9 April 2013

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/AVvXsEj8DrezNZ7s1ZjDUwQOkBd1-7-ojQwtFShIdxfQQT9TXw-9VjFtnZ2z0xMZPYrQqhwuzP7_MabfFJdiiurf3drMLYhZa66HJ2tjjtB1lxGIPT_JH3-tFFS1tQigteePTSzQA5DzS5cVtwob/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

2 komentar

SOFTWARE DAN BLOG13 April 2013 pukul 15.15
tnks brooo artikelnya sanya berguna, klo ada di tambah lahi hihi
BalasHapus
Balasan

Kode klik emo:

$:\$

$\o/$

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT

Konversi Emo Oot

$:\$

$\o/$

Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

CSS threaded comments untuk blogger

Artikel Terkait

2 komentar