Cara Membuat Threaded Comments Blogger
Threaded Comments Blogger atau Komentar Bertingkat
Nofantz.com - Threaded Comments lebih mundahnya kita menyebutnya atau mengartikannya sebagai komentar berbalas. Mirip dengan komentar pada Facebook. Tutorial ini sukses saya terapkan pada Template Mostheme, dan mungkin bisa di terapkan di template yang lainnya.Langkah-langkahnya
- Masuk ke Dashboard Blogger kamu.
- Pilih Tema, kemudian Edit HTML.
- Ubah Tag <head> dan </head> seperti aslinya.
ubah menjadi<head> atau <!--<head>--><head>
kemudian, cari kode berikut<head>
ubah menjadi</head> atau <!--</head>--></head>
</head> - Ubah juga Tag </body>
Cari kode ini
ubah menjadi<!--</body>--></body>
</body> - Cari kode berikut.(Ctrl+F)
Ganti dengan code ini<b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if><b:if cond='data:blog.pageType == "static_page"'> <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comment_picker'/> </b:if> - Cari Kode seperti ini:
ganti dengan kode ini<b:includable id='comment_picker' var='post'>...</b:includable>
<b:includable id='comment_picker' var='post'> <b:if cond='data:post.commentSource == 1'> <b:include data='post' name='iframe_comments'/> <b:else/> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </b:includable> - Temukan kode ini:
atau kode seperti ini<b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if>
ganti dengan kode ini<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if>
<b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </li> - Untuk mempercantik tampilan komentar, silahkan copy kode berikut dan taruh di atas
- Terakhir, Simpan Template.
/* CSS Tambahan untuk komentar */
.comment-thread .user a{font-weight:700;color:#000;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .user a:hover{color:inherit}
.comment-thread .user{font-weight: bold;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .datetime {font-weight: normal;font-size:11px;}
.comment-thread .user {padding:0;font-size:13px;font-weight:bold;position:relative;}
.comment-thread .datetime {color: #a9a9a9;font-size:12px!important;margin-top:-3px;}
.comment-thread .datetime a{text-decoration:none;color: #a9a9a9;font-size:12px!important;font-weight:normal;}
.comment-thread .datetime a:hover{color: #000;}
.comment-content {line-height: 1.5em;margin:4px 0 5px;color: #444;font-weight:normal;font-size: 13px;word-wrap:break-word;padding:0;}
a.comment-reply, .item-control a{color: #aaa !important;font-size:12px!important;font-weight:normal!important;}
a:hover.comment-reply, .item-control a:hover{color:#000 !important;}
.item-control{margin-left:0px} /* tombol delete comment */
.thread-chrome a.comment-reply{margin-top:20px!important;border:1px solid #eee;text-align:center;border-radius:5px}
.thread-chrome a:hover.comment-reply{border-color:#bbb}
.comment-block{margin-left:65px;padding:10px;text-align:left;border:1px solid #f5f5f5;border-radius:5px;position:relative;display:block}
#comments .comments-content .icon.blog-author{
width: 16px;height: 16px;margin-left: 5px;vertical-align: 2px;display: inline-block;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z' fill='%23118ff9'/></svg>") center center no-repeat;}Silahkan cek di blog kamu, apakah sudah berubah?
Kamu juga bisa menemukan artikel lainnya yang berkaitan dengan Komentar blogspot, diantaranya:
Memperbaiki Tombol Replay Error pada Komentar Blogspot
Mengubah tampilan komentar blogspot versi lama menjadi versi baru
Selamat mencoba.