Modifikasi ke-2 Css Thread Comments

Setelah sebelumnya saya memposting tentang Thread Comment Seperti Komentar Gaya FB dan Cara Memodifikasi Css Thread Comment, begitu juga dengan Cara Praktis Tampilkan Thread Comment, yang tampilannya masih standar, karena Css yang akan dimodifikasi tersebut sekarang sudah tidak ada lagi di Template Blog, dan karena ada beberapa Komentar menanyakan masalah ini, sayapun tak bisa menjawabnya hehehe :z
Kawan tahu apa sebabnya ? karena Thread Comment datang tanpa diundang dan hilangpun tanpa permisi hihihi memangnya Jaelangkung :O 
Okey cukup sekian intermesonya, karena sekarang saya akan mencoba berbagi dengan kawan Cara Memodifikasi Thread Comment yang hasilnya seperti Gambar disamping atau pada Komentar Blog ini :D 

  • Caranya :
  • Masuk ke Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTMl - Lanjutkan 
  • Beri tanda cek pada  disamping 
  • Cari  <b:include data='post' name='comments'/>  yang biasanya ada 4 pada 2 tempat, seandainya ada 3 tambahkan biar menjadi 4.   
  • Ganti semuanya dengan : 
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

  •  Selanjutnya Copas Script berikut diatas ]]></b:skin>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
}
.comments .comment .comment-actions a {
  padding: 5px  5px 0 0;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
}
.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: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: -2px;
  margin-left: 36px;
width: 501px;
}
.comments .comments-content .comment {
  margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
  padding-top:1px;
}
.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;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0;
}
.comments .comments-content .datetime {
float: right;
  margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin: 0 0 8px;
}
.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: transparent;
  cursor: pointer;
text-align: center;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
margin: 0 340px 0 48px;
  font-weight: bold;
background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#7CA9C0');background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;
border: 1px solid #ccc;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
color: #FFF;
}
.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: inline-block;
}
.comments .thread-toggle {
background: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006400');background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;
border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
  display: inline-block;
padding: 3px 0;
width: 80px;
height: 20px;
text-align: center;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 0;
}
.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;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
background: rgb(99,147,193) none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(99,147,193)', endColorstr='rgb(207,231,250)');background:-moz-radial-gradient(top, rgb(99,147,193), rgb(207,231,250));background:-webkit-gradient(linear, left top, left bottom, from(rgb(99,147,193)), to( rgb(207,231,250))) no-repeat left top;
border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;
  margin-left: 48px;
padding: 5px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}


  • Jangan lupa simpan Template kawan 
  • Text yang berwarna merah adalah lebar kotak Komentar, silahkan disesuaikan
Tambahan Penjelasan :
  1. Komentar Blog lama yang ada akan kelihatan sejajar dipinggir kiri 
  2. Untuk mendapatkan hasil yang sesuai dengan Gambar diatas silahkan kawan mencoba memberikan Komentar dengan Account lain [Anonim] yang selanjutnya kawan balas dengan Nama Admin Blog :r
  3. Selamat memcoba dan berkreasi 


Description: Modifikasi ke-2 Css Thread Comments - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Modifikasi ke-2 Css Thread Comments


Kawan sedang berada pada Artikel
» Modifikasi ke-2 Css Thread Comments
di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
asal kawan menyertakan Link / Sumber Artikelnya

Artikel Menarik Lainnya :


Comments
1 Comments

1 komentar:


KOMENTAR MENCERMINKAN KEPRIBADIAN KAWAN BLOGGER
EKSPRESIKAN KOMENTAR DENGAN EMOTICON :

:a :b :c :d :e :f :g :h :i :j :k :l :m
:n :o :p :q :r :s :t :u :v :w :x :y :z