Selasa, 11 September 2012

Kumpulan CSS Threaded Comments Blogger

CSS Threaded Comments Blogger - From Blog.Kangismet.net


Kumpulan CSS Threaded Comments Blogger

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

CSS Threaded Comments Blogger - From System of Blog

Kumpulan CSS Threaded Comments Blogger

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

CSS Threaded Comments Blogger - From DTE:]

Kumpulan CSS Threaded Comments Blogger


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

Kumpulan CSS Threaded Comments Blogger - From Obachti 95

Kumpulan CSS Threaded Comments Blogger


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

Kumpulan CSS Threaded Comments Blogger - Template Responsive Under-88

Kumpulan CSS Threaded Comments Blogger

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

[UPDATE ⇓ ⇓]

Kumpulan CSS Threaded Comments Blogger - Blog Bamz

Kumpulan CSS Threaded Comments Blogger


.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://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/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;
}}

Cara memasangnya mudah kok, masuk ke editor template. Cari kode kurang lebih kerangkanya begini :

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

..
....
.......
.........
............
<!-- Kode yang harus diganti -->
............
.........
......
...
.

</style>
</b:includable>

Ganti semua kode yang diapit seperti kerangka diatas, dan ganti pilihan CSS yang anda pilih diatas.

Kalau semisal tidak ada kode seperti kerangka diatas, copas CSS Threaded Comments pilihan agan diatas kode ]]></b:skin>.

Kalau tombol hapusnya hilang bisa copas css :
.item-control {display: inline;}

diatas kode
]]></b:skin>

Sumber
Agen Bola online Agen Bola online

5 komentar:

  1. wah mantab nih masbro ane ambil yang pertama aja deh, lebih simple hehe :D

    BalasHapus
  2. @Id BlogerGan kalo threaded comment mirip kotak komentar blog agan gimana ..??
    salam : http://tembokartikel.blogspot.com

    BalasHapus

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank