Memodifikasi Threaded Comment dengan CSS

Update - Sebenarnya cara modifikasi threaded comment dengan css sama saja dengan tutorial merubah threaded comment dengan css. Namun di sini saya akan memberikan tampilan yang beda dan saya lengkapi dengan mouse over, sehingga tampilannya lebih atraktif. Sekarang ikuti langkah berikut.


Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan CSS berikut di atas kode ]]></b:skin>

.comments{clear:both;margin-top:10px;margin-bottom:0px;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 .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:#06F;background:-webkit-gradient(linear,left top,left bottom,from(#09F),to(#099));background:-moz-linear-gradient(top,#09F,#099);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#09F',endColorstr='#099')}
.comments .continue a:hover, .comments .comment .comment-actions a:hover{text-decoration:none;background:#09F;background:-webkit-gradient(linear,left top,left bottom,from(#099),to(#09F));background:-moz-linear-gradient(top,#099,#09F); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#099',endColorstr='#09F')}
.comments .continue a:active, .comments .comment .comment-actions a:active{position:relative; top:1px;background:-webkit-gradient(linear,left top,left bottom,from(#06F),to(#09C));background:-moz-linear-gradient(top,#06F,#09C); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#06F',endColorstr='#09C')}
.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 0px 0px 0px}
.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:0px}
.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:#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{margin-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: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 .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{ float:left;overflow:hidden}
.comments .avatar-image-container img{ 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}

Atau anda ingin menggunakan kode singkat seperti di bawah ini. Simpan kode berikut di atas kode </head>

<link href='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-newthreadcomments.css" rel='stylesheet' type='text/css'/>

Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"