Cara Membuat kotak Komentar Keren

Cara Membuat kotak Komentar Keren di tahun 2013 blues anpel - Kali ini saya ingin membuat postingan pesanan teman saya, ia ingin membuat tampilan komentar blog nya lebih menarik, mungkin tampilan komentar saya menarik menurut beliau, makanya beliau bertanya kepada saya, Ok saya akan membuat postingan Cara membuat Tampilan Komentar Lebih menarik dan pasti nya Cantik. Tanpa basa basi langsung saja ke cara pembuatan nya Ini Priview nya Login ke akun blogger dan masuk ke Edit HTML Untuk berjaga-jaga, ada baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga, nanti yang nyesal kan kita juga kalau ada apa-apa… hehehe Siapkan mental anda, jangan sampai salah langkah, karena salah satu titik script aja maka akan bahaya… (nakut2 in aja :P) Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]> /*------------- START jelekoke.blogspot.com 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; } } /*------------- End jelekoke.blogspot.com Blogger Threaded Comments -------------*/ Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOL nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan di bawah ]]> OK selesai, coba lihat bagaimana tampilan komentar anda…! Jangan Lupa tinggalkan Komentar sobat2 ya...!