Custom Design Css Threaded Comments

Custom Design Css Threaded Comments. 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 blogger terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Aktifkan thread comments blogger"

Custom Design Css Threaded Comments

Lihat Demo

Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya. Apa yang harus anda lakukan?

Pertama login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
Cari kode <b:includable id="threaded_comment_css">, kira kira semua kodenya seperti di bawah ini.

<b:includable id="threaded_comment_css">
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.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: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
KARENA KEPANJANGAN, SAYA SINGKAT SAJA KODENYA,
.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>

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVl0ebBwS6B2L5j4fhbfetmFLaAlbp6q8mq_8WvvgHMMgpD1fBPIpqSkPgFe-fUrUgWmHYJJJMLdCKupQgK4FD7JiJdBjpNjzewyS11xaOsnftmJN3Yk9iieXYhlE3_E5kUHHiHvfUXfph/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;
}
}
</style>
</b:includable>

Langkah terahir yaitu simpan template dan lihat hasilnya.

Anda tidak perlu bingung, pokoknya yang di ganti yaitu mulai dari <b:includable id="threaded_comment_css"> sampai </b:includable>

Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin>

Custom Design Css Threaded Comments

Fitur baru blogger ini memang sangat menarik dan terlihat keren di bandingkan fitur komentar sebelumnya. Apalagi jika anda menggunakan Blogger template seo friendly Bamz Style yang saya desain, tentunya akan lebih mudah dalam pengeditan karena saya menggunakan template tersebut sebagai praktek terlebih dahulu :). Ok deh selamat mencoba tips custom design Css Threaded comments ini dan semoga sukses