Cara Modivikasi Css Threaded Comments Blogspot

Untuk mempercantik atau memper indah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blog terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Cara Mengaktifkan Threaded Comments Pada Blogspot"


Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya sebagai berikut :

1. Login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan).

2. Cari kode seperti berikut :

<b:includable id="threaded_comment_css">
<style>
.comments {
.......
.......
.......
.......
</style>
</b:includable>

3. Silahkan anda ganti semua kode tersebut dengan kode di bawah ini :

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
marfin-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 .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#5AB1E2; 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; border: 1px dotted #DDD;
}
.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 .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;
margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.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 .commdnt-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: block;
padding: 0.5em;
font-weight: bold;
}
.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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.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;
}
}
</style>
</b:includable>

4. Langkah terahir yaitu simpan template dan lihat hasilnya.

Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste 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 .comment .comment-actions a {background:#1F9EE5;cursor:pointer;color:#ffffff;padding:2px 3px; margin-right:10px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:9px sans-serif; border:1px solid#1F9EE5;}
.comments .comment .comment-actions a:hover {text-decoration: none;background:#5AB1E2;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-bontent .comment-replies {margin-top: 1em;margin-left: 40px;font-size:12px;background:#EBF5FE; border: 1px dotted #DDD;}
.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 .icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 -4px 6px;}
.comments .comments-content .datetime {background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;margin-left:6px; padding-left:20px; font-size:10px; float:right;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px;}
.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 .commdnt-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: block;padding: 0.5em;font-weight: bold;}
.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;width: 36px;max-height: 36px;overflow: hidden;}
.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;}}

Selamat mencoba, dan semoga berhasil !

sumber : tutorial sagita