Thread Comment Sederhana Keren !!

  Oke sobat mummyz kali ini saya mau memberikan Thread Comment Sederhana ..
Sederhana bukan berarti jelek .. Thread Comment ini pas banget buat kalian yang suka dengan yang simple-simple .. untuk anda yang ingin melihat DEMO nya kalian bisa lihat gambar di bawah ini ..

Gimana simple kan ?? jika kalian ingin menerapkan nya pada blog sobat ,kalian bisa ikuti tutorial di bawah ini .

1. Masuk ke Blogger
2. Klik Template > Edit HTML .
3. Cari kode ]]</b:skin> gunakan CTRL+F untuk memudahkan pencarian kode!
4. Jika sudah ketemu letakan kode di bawah ini tepat di atas kode ]]</b:skin>

/*-- Mummz Threaded Comments  --*/ 
.comments {      clear: both;      margin-top: 10px;      margin-bottom: 0px;      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 0px;    }    .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: 0px;      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;      }    }
    /*------------- Mummyz Threaded Comments  -------------*/

      5.Simpan Template ..

Dan coba lihat hasil nya .. :D
Semoga artikel kali ini bermanfaat untuk kalian semua .. Ingat jika kalian ingin menyebar luaskan artikel ini sertakan sumber !

Share 'Thread Comment Sederhana Keren !!' On ...

Unknown di 02.34