css keren untuk Threaded Comments

Threaded Comments memang sangant hyperaktif untuk blog kita karena blog anda sepertinya bisa lebih hidup dengan adanya reply untuk tiap komentar
jika blog sobat sudah menggunakan Threaded Comments dan ingin gati tampilan disini saya share CSS untuk  Threaded Comments yang dulu saya pernah mendapatkan di blog luar negri tapi lupa blognya dan saya sempet tidak pakai karena dulu saya seneng pakai platform dari disqus. lihat screen shotnya di bawah untuk css  Threaded Comments.

jika Threaded Comments sudah anda pasang anda tinggal tambahkan kode css di bawah ini tepat di atas ]]></b:skin>

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

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

.comments .comments-content .inline-thread{padding:0}

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

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

.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-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:relative}

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

.comments .comments-content .user a{color:#0E6284;font-weight:normal;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 a{color:#0E6284;font-size:12px;float:right;text-decoration:none}

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

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

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

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.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:0}

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

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjka0cFA6CgAU0hc_c9BILMwCnhrS8FZCvYqiPzoF4PBFEviS4OOGDCm_yJAFVfAh6C0LrBXo873Xa1DsvFkXO3-S7ebaku0IXL0RC6lMzkjAOApjOP27XN_Wkbht31nylt9LbP-eu2j5Y/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

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

lihat demo