Namun Kali ini saya tidak akan memberikan tutorial bagaimana cara mengedit CSS threaded komentar blogspot. Saya hanya akan memberikan kode CSS nya yang sudah jadi. Sobat tinggal memasangnya saja. Untuk DEMO nsorri lagi gak sempet ngasi tau.
langsung aja dah sobat kita mulai :
Langkah pertama copy kode CSS threaded komentar editan Saya di bawah ini
.comments { clear: both; margin:0; } .comments .comments-content {font-size:13px; margin-bottom:8px; } /*tulisan balas dan hapus*/ .comments .comment .comment-actions a{margin-right:6px; } .comments .comments-content .comment-thread ol { list-style-type: none; padding:0; text-align: left; } .comments .comments-content .inline-thread {padding:0; margin:0; } .comments .comments-content .comment-thread { margin:0; padding:0; } .comments .comments-content .comment-thread:empty { display: none; } /*kotak komentar yang menjorok ke dalam (bisa diubah margin left 20px dengan jarak yang sesuai selera) */ .comments .comments-content .comment-replies {margin-top:8px; margin-left:20px; } .comments .comments-content .comment {margin-bottom:6px; padding:0; } .comments .comments-content .comment:first-child {padding:0; margin:0; } .comments .comments-content .comment:last-child { padding:0; margin:0; } /*nama pemberi komentar*/ .comments .comments-content .user { font-style:normal; font-weight:bold; } /*icon penanda author*/ .comments .comments-content .icon.blog-author { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3hQ5zwuu7SLUhi9eeCtG4Wep05xb23IXN9qb7AWsixfeKTU4L9E_wOl78JQYMUEz9SDQi2_c81UaoPF9j-lZvIcmYfRERLY430nulcLEsLqhd3iDbNiD70cF-6WFQlh6SQhJaTtMkN7g/s320/author.png); width: 16px; height: 16px; display: inline-block; margin: 0 0 -2px 6px; } /*tanggal dan jam*/ .comments .comments-content .datetime {margin-left:6px; } /*kepala komentar*/ .comments .comments-content .comment-header {background:#fff; margin:0; padding:0; } /*tubuh komentar*/ .comments .comments-content .comment-content {background:#fff; text-align:justify; margin:0; padding-top:8px; padding-bottom:8px; } .comments .comments-content .owner-actions { border:1px solid #ccc; } .comments .comments-replybox { height:250px; max-width: 100%; } /*kolom(text area) komentar utama */ .comments .comment-replybox-single { padding:0; margin-top: 5px; margin-left:48px; } /*kolom(text area) yang komentar menjorok ke dalam*/ .comments .comment-replybox-thread { margin-top:5px; } /* link kotak dibawah kolom komentar (nggak ngerti fungsinya buat apaan)*/ .comments .comments-content .loadmore a { background:#fff; display: block; padding: 6px 10px; text-align: center; } /*tulisan balasan*/ .comments .thread-toggle {cursor: pointer; padding:2px; margin-bottom:4px; margin-left:24px; display:block; } .comments .continue { cursor: pointer; } /*tulisan balas 2*/ .comments .continue a { text-align:right; margin-bottom:10px; padding:4px; display:block; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top:12px; } .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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent; } /* kotak tempat avatar */ .comments .avatar-image-container { float: left; width: 42px; max-height: 42px; overflow: hidden; border:2px solid #fff; } /*gambar avatar*/ .comments .avatar-image-container img { width:42px; } /* kotak komentar utama*/ .comments .comment-block { background:#fff; padding:5px; margin-left: 48px; border:1px solid #aaa; }
kodenya panjang banget euy... Tapi tenang, bagi pengguna hp terutama hp java seperti saya, saya sudah sediakan file .txt nya. DOWNLOAD CSS-Threaded.txt.
Langkah selanjutnya adalah masuk ke template sobat dan hapus kode CSS threaded yang lama dengan kode CSS yang sudah saya berikan di atas. Letak kode CSS nya berada di tengah-tengah template dan agak ke bawah sedikit :D. Letak persisnya berada di antara kode <style> dan </style> .
<b:includable id='threaded_comment_css'> <style> - - - - - - - - - - - - - - - - - - - kode CSS yang perlu diganti - - - - - - - - - - - - - - - - - - - - - </style>
Ingat! Kode <style> dan </style> Jangan ikutan dihapus. Jika sudah selesai, tenggal sobat Save template dan lihat hasilnya..
Jika sobat merasa tampilannya masih kurang memuaskan, sobat bisa mengeditnya sendiri. Di situ sudah saya tambahkan keterangan-keterangan supaya memudahkan sobat semua dalam mengedit kodenya.
Semoga Bermanfaat... :D
0 komentar:
Posting Komentar