Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli
Pembaruan 2018/05/17: Sintaks dan struktur HTML sudah berubah. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel.

Setelah berhasil menemukan beberapa metode untuk menciptakan komentar bersarang (atau berbalas??) pada Blogger, Saya rasa metode dari bX-NicoNico adalah yang paling bagus. Mengapa?
- Dia tidak menggunakan elemen
<data:post.commentJso/>
sebagai salah satu elemen yang dibutuhkan untuk sistem ini, sehingga markup HTML akan menjadi lebih pendek dari markup HTML pada template dengan fitur komentar bersarang yang masih standar. (Fitur komentar bersarang yang masih standar akan menampilkan JSON komentar sebelum daftar komentar, sehingga jumlah karakter markup HTML pada fitur komentar bersarang yang masih standar akan menjadi dua kali lipat lebih panjang dibandingkan markup komentar biasa. - Layout komentar tertata secara otomatis. JavaScript hanya digunakan untuk mengubah URL pada
iframe
formulir komentar dan juga untuk memindahkan posisinya sesuai dengan ID komentar induk masing-masing. - Karena layout komentar ditata secara otomatis oleh Blogger, maka saat JavaScript dimatikan, tata letak komentar balasan akan tetap berada pada posisi yang benar. Ini berbeda dengan beberapa hack komentar bersarang Blogger yang hanya menggunakan JavaScript (yang juga telah Saya pakai sampai sekarang) untuk memposisikan komentar-komentar balasan, sehingga saat JavaScript dimatikan, layout komentar akan berantakan.
Berikut ini adalah fitur komentar versi Saya yang lebih pendek dan lebih mudah dalam hal instalasi yang Saya buat berdasarkan konsep dari Felipe, yaitu dengan cara menggunakan elemen data
baru bernama <data:comment.inReplyTo/>
untuk menyaring anak-anak komentar yang tampil. Elemen ini berfungsi untuk menampilkan ID komentar induk pada masing-masing komentar balasan. Saya bisa mengatakan bahwa metode ini adalah metode yang paling tepat dan bukan merupakan “hack”, karena kita menerapkan elemen yang ada dari Blogger untuk dimanfaatkan sesuai dengan tugasnya:
Mengaktifkan Fitur Komentar Bersarang pada Blogger
Pertama-tama buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:
/* Begin custom comments */
.comments,
.comment {
margin: 0;
padding: 0;
list-style: none;
letter-spacing: 0;
}
.comments::after,
.comment::after,
.comment-header::after,
.comment-body::after,
.comment-footer::after {
content: "";
display: table;
clear: both;
}
.custom-comments {
margin: 3em 0 0;
font: normal normal 13px/1.4 Tahoma, Helmet, FreeSans, sans-serif;
}
.custom-comments a {
color: #2143b4;
text-decoration: none;
}
.custom-comments a:hover {
text-decoration: underline;
}
.custom-comments .comment {
margin: 0 0 .5em;
padding: 0 0 .75em 0;
border-bottom: 1px solid #eee;
position: relative;
}
.custom-comments .comment-header {
margin: 0 0 1em 0;
}
.custom-comments .comment-author {
float: left;
}
.custom-comments .comment-url {
float: right;
}
.custom-comments .comment-avatar {
width: 65px;
margin: 0;
padding: 0;
background: 0 0;
border: 0;
float: left;
}
.custom-comments .comment-avatar a,
.custom-comments .comment-avatar img {
margin: 0;
padding: 0;
background: 0 0;
border: 0;
display: block;
float: none;
width: 50px;
height: 50px;
min-width: 0;
min-height: 0;
max-width: 100%;
max-height: 100%;
}
.custom-comments .comment-avatar img {
border: 1px solid #ddd;
padding: 4px;
background: #fafafa;
}
.custom-comments .comment-body {
margin: -5px 0 1em 75px;
}
.custom-comments .comment.reply {
margin: 0 0 1em 75px;
padding: 1em 1.2em;
background: #fff7d1;
border: 0;
position: relative;
font-size: 86%;
}
.custom-comments .comment.reply::after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border: 10px solid transparent;
border-color: #fff #f5f2d8 #f5f2d8 #fff;
}
.custom-comments .comment.reply .comment-author {
margin-left: 15px;
}
.custom-comments .comment.reply a {
color: #767643;
}
.custom-comments .comment.reply .comment-avatar img {
border-color: #eae5c4;
background: #f5f0d3;
}
.custom-comments .comment-footer {
margin: 0 0 .125em 75px;
text-align: right;
}
.custom-comments .comment-footer a,
.custom-comments .a-undo {
display: inline-block;
border: 1px solid #ddd;
padding: .15em .65em .2em;
margin: 0 0 0 .25em;
border-radius: 1em;
text-decoration: none;
outline: none;
}
.custom-comments .comment.reply .comment-footer a {
border-color: #eae5c4;
}
.custom-comments .comment-footer .a-reply::before {
content: '\2714';
color: #3db537;
display: inherit;
margin: 0 .25em 0 -.125em;
}
.custom-comments .comment-footer .a-delete::before {
content: '\2718';
color: #b42a21;
display: inherit;
margin: 0 .25em 0 -.125em;
}
.custom-comments .comment-footer a:hover,
.custom-comments .a-undo:hover {
border-color: #ccc;
text-decoration: none;
}
.custom-comments .comment-footer a:focus,
.custom-comments .comment-footer a:active,
.custom-comments .a-undo:focus,
.custom-comments .a-undo:active {
border-color: #aaa;
}
.custom-comments .comment.reply .comment-footer a {
background: #fffad6;
border-color: #e3deb7;
}
.custom-comments .comment.reply .comment-footer a:hover {
border-color: #d6d1aa;
}
.custom-comments .comment.reply .comment-footer a:focus,
.custom-comments .comment.reply .comment-footer a:active {
border-color: #bcb795;
}
.custom-comments .custom-comment-form {
margin: 1em 0 2em;
clear: both;
}
.custom-comments .comment .custom-comment-form {
border: 1px solid #eee;
padding: 1em;
margin-left: 75px;
}
.custom-comments #comment-editor {
max-width: none;
width: 100%;
height: 250px;
background: 0 0;
border: 0;
}
.custom-comments .custom-comment-form .a-undo {
display: none;
}
.custom-comments .comment .custom-comment-form .a-undo {
display: inline-block;
}
.custom-comments .comment .custom-comment-form h4 {
display: none;
}
.custom-comments .custom-comment-editor-wrapper {
background: transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%;
}
.custom-comments-pager {
font-size: 80%;
text-align: center;
width: auto;
height: auto;
line-height: normal;
margin: 1em 0;
float: none;
display: block;
clear: both;
border: 1px solid #eee;
padding: .5em 1em;
overflow: hidden;
}
.custom-comments-pager .unneeded-paging-control {
display: none;
}
.custom-comments-pager .paging-control {
display: inline;
}
/* Author comment style */
.custom-comments .comment.is-author {}
.custom-comments .comment.is-author > .comment-header {}
/* Deleted comment style */
.custom-comments .comment.is-deleted > .comment-body {
font-style: italic;
color: #aaa;
}
/* End custom comments */
Kemudian cari kode ini:
<b:includable id='comments' var='post'>
Salin kode ini, dan letakkan di atasnya:
<b:includable id='custom-comments' var='post'>
<b:with value='{
cancel: "Cancel",
comment: "Comment",
comments: "Comments",
delete: "Delete",
reply: "Reply"
}' var='text'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numberOfComments == 1'>
<span>1</span> <data:text.comment/>
<b:else/>
<span><data:post.numberOfComments/></span> <data:text.comments/>
</b:if>
</h4>
<b:if cond='data:post.numberOfComments > 0'>
<ul class='comments'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='!data:comment.inReplyTo'>
<b:include data='comment' name='custom-comments-comment'/>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include data='post' name='custom-comments-pager'/>
<b:include data='post' name='custom-comments-form'/>
</b:if>
</section>
</b:with>
</b:includable>
<b:includable id='custom-comments-comment' var='comment'>
<li class='comment' expr:id='data:comment.anchorName'>
<b:class cond='data:comment.authorClass' name='is-author'/>
<b:class cond='data:comment.isDeleted' name='is-deleted'/>
<header class='comment-header'>
<strong class='comment-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-url' expr:href='data:comment.url'><data:comment.timestamp/></a>
</header>
<figure class='comment-avatar'>
<img alt='' expr:src='resizeImage(data:comment.authorAvatarSrc, 50)'/>
</figure>
<div class='comment-body'>
<data:comment.body/>
</div>
<b:with value='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='replies'>
<b:if cond='data:replies.size > 0'>
<ul class='comments replies'>
<b:loop values='data:replies' var='reply'>
<b:include data='reply' name='custom-comments-comment-reply'/>
</b:loop>
</ul>
</b:if>
</b:with>
<footer class='comment-footer'>
<b:if cond='!data:comment.isDeleted'>
<a class='a-reply' expr:href='"javascript:replyTo(&quot;" + data:comment.id + "&quot;);"'><data:text.reply/></a>
</b:if>
<a class='a-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><data:text.delete/></a>
</footer>
</li>
</b:includable>
<b:includable id='custom-comments-comment-reply' var='reply'>
<li class='comment reply' expr:id='data:reply.anchorName'>
<b:class cond='data:reply.authorClass' name='is-author'/>
<b:class cond='data:reply.isDeleted' name='is-deleted'/>
<header class='comment-header'>
<strong class='comment-author'>
<b:if cond='data:reply.authorUrl'>
<a expr:href='data:reply.authorUrl' rel='nofollow' target='_blank'><data:reply.author/></a>
<b:else/>
<data:reply.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-url' expr:href='data:reply.url'><data:reply.timestamp/></a>
</header>
<figure class='comment-avatar'>
<img alt='' expr:src='resizeImage(data:reply.authorAvatarSrc, 50)'/>
</figure>
<div class='comment-body'>
<data:reply.body/>
</div>
<footer class='comment-footer'>
<a class='a-delete' expr:href='data:reply.deleteUrl' expr:title='data:top.deleteCommentMsg'><data:text.delete/></a>
</footer>
</li>
</b:includable>
<b:includable id='custom-comments-form' var='post'>
<div class='custom-comment-form' id='custom-comment-form'>
<h4><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script>BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');</script>
<a class='a-undo' href='javascript:replyTo(0);'><data:text.cancel/></a>
</div>
<script>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = id ? document.getElementById('c' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = '50px';
frame.style.visibility = 'hidden';
frame.src = id ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = '250px';
this.style.visibility = 'visible';
};
}
//]]>
</script>
</b:includable>
<b:includable id='custom-comments-pager' var='post'>
<b:if cond='data:post.commentPagingRequired'>
<nav class='custom-comments-pager'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> 
<data:post.commentRangeText/> 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
</nav>
</b:if>
</b:includable>
Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua kode yang tampak seperti ini:
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:
<b:include data='post' name='custom-comments'/>
Klik Simpan Template.
Konfigurasi
Kode-kode yang Saya beri tanda adalah label-label tombol dan bisa Anda ganti teksnya sesuka hati sesuai dengan bahasa pada negara dimana Anda tinggal. Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .is-author
untuk menandai komentar penulis. Sebagai contoh, Saya akan memberikan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan adalah seperti ini:
.comment.is-author {
border: 5px solid #900;
background-color: #ff0;
}
.comment.is-author > .comment-body {
font-size: 200%;
}
Catatan: Bagi Anda yang selama ini telah lama menggunakan fitur komentar bersarang lebih dari dua level (seperti blog Saya), sangat disarankan untuk tidak menerapkan modifikasi di atas, karena Saya hanya menggunakan loop komentar balasan sebanyak satu kali:
<b:loop values='data:post.comments' var='reply'>
<b:if cond='data:reply.inReplyTo == data:comment.id'>
Komentar balasan muncul di sini…
</b:if>
</b:loop>
Seperti yang Anda lihat bahwa Saya hanya membandingkan nilai data:var.inReplyTo
pada komentar balasan dengan ID komentar induk sekali saja (satu kali loop), sehingga jika komentar balasan lama Anda berada di level ke tiga dan seterusnya, komentar-komentar tersebut tidak akan tampil dalam posting Anda dikarenakan ID komentar induknya tidak sempat lolos penyaringan terhadap data:var.inReplyTo
pada anak komentar di level tersebut.
Blog yang masih baru atau blog lama dengan sedikit komentar dan blog dengan fitur komentar yang masih lama bisa melakukan modifikasi ini dengan aman.
145 Komentar
Dixy
Mau nanya nih Mas Taufik, saya kan bukan admin ataupun pemilik dari komentar yang ada dalam blog demo tersebut.
Tapi kok ada tombol hapusnya ya...?
Sepertinya blog Mas Taufik yang ini juga seperti itu.
Kenapa ya...? :)
kamu info
.item-control {
display: none;
}
setahu gw kaya bgitu kalo ngilangin tombol hapus wkwkkw
Beben Koben
memang gitu keadaannya kaleee! gakda yg aneh duong :P
aya-aya wae?
kalo di ilangin, entar kasian dong jika salah komentar, komentator mau hapus kagak bisa?
Unknown
walaupun ada, gak bakalan ngaruh kalo di pencet kalo bukan si pemilik komentar (di luar si admin blog nya yaa) yang hapus sendiri...
Tapi kalo di form thread komentar blogger yang lama, kalo mau menghilangkan tombol itu, widget navbar nya di non aktifkan saja.. kalo form komentar ini, belum nyobaaa.... ^:D
Dixy
nah kan jadi kaya gmaanaa gtu...
Taufik Nurrohman
Lebih bagus kalau ada tombol hapusnya. Lebih bagus lagi kalau ada tombol editnya, jadi penulis komentar bisa mengedit komentarnya. Misalnya karena salah ketik (setidaknya sebelum ada komentator lain yang membalas komentarnya).
Kalau mau menghilangkan tombol hapus di fitur ini, cukup tambahkan CSS ini di atas
]]></b:skin>
Beben Koben
alami saja aaahhh, dah pusing ngotak-ngatik kode :D
kamu info
wah mantap nih mas Threaded Commentsnya \o/
Anonim
mas ,
aku ingin bertanya ,
cara nambahin kata mengatakan itu gimana mas,,.
tampat harus menerapkan komentar ini..?
Sekian mas ,
semoga terbalas , :)
Taufik Nurrohman
kamu info
o iya mas klo misalnya nambahin emotion codenya gmana pada threaded comment yang mas posting ini ? mohon dijawab :)
Taufik Nurrohman
Aktifkan fitur manipulasi komentar ini ⇒ Paket JavaScript Fitur Manipulasi Komentar Blogger
Lalu pada bagian pengaktifan akhir, ganti ID
comment-holder
menjadicomments-area
:kamu info
sip mas :D
Unknown
Jadi ada pilihan untuk merubah Threaded Comments bawaan dari blogger..
mas mau nanya nih..
bisa tidak resolusi gambar avatarx diatur??
seperti diblog http://blog.duypham.info/
Taufik Nurrohman
Saya pakai ini:
Tapi percuma sih sebenarnya, peramban modern biasanya akan tetap mengunduh gambar resolusi aslinya (gambar sebelumnya) meskipun setelah itu URL-nya diganti dengan yang baru (jadi harus memuat gambar dua kali).
Unknown
oh jadi sulit yah mas..
kira2 komentar di blog http://blog.duypham.info/ menggunakan JS seperti di atas untuk merubah url gambarnya ngak mas..
atau menggunakan cara lain untuk memanggil gambarnya
misalnya API blogger..
???
Taufik Nurrohman
Dia cuma memakai cara seperti ini:
Unknown
jadi tambah pusing..
lihat JSnya..
oh ia mas sepertinya masih ada sedikit error di thread comments yang mas buat..
dibagian pembungkus authornya..
saya lihat susunan html balasan/reply nya..
jika author yang komentar pertama maka dibagian balasan akan terbungkus juga dengan div dengan class author-comment..
klo di halaman demo dibagian komentar kang kapuk dan Ahmad Nurfadilah.. di bungkus class author-comment..
Taufik Nurrohman
Sudah diperbaiki. Salin ulang kode XML di atas untuk menggantikan kode yang lama. Trims atas masukannya.
Untuk mengetes komentar administrator bisa memakai kode CSS ini:
Nantinya komentar penulis akan dikelilingi outline berwarna merah.
Unknown
Wah saran diterima..
nanti mau coba implementasikan di blog lain...
karena sudah terlanjur pake yang bawaan blogger dan sudah modif dgn CSS jadi klo mau beralih ke yang satu ini sulit karena perlu rubah lagi CSS agar sesuai template blog..
Kelebihan dari thread comment ini menurut saya dapat membantu dalam mengurangi kesalahan error jika di test dengan valid html, karena elemen htmlnya terbuka tidak seperti bawaan blogger yang terdapat banyak tag yang tidak valid seperti name, kind, t, c..
azewdsignet
Mas taufik numpang tanya`mau cari tutorial merubah komentar kaya mas taufik sbelah mana ya ?
Taufik Nurrohman
Tidak ada.
Damar Zaky
ngakak wkwkkw
uki
wkwkwkwkwk
Unknown
mas tofik kalo mau bikin fungsi yang emotikon di klik terus keluar kodenya ada tutorialnya gak
misal saya klik ":)" yang keluar emotikon :)
ada tutorianya gak mas
Unknown
sory kebalik maksudnya saya kli emotikon :) yang keluar kode ":)" yang di highlight
Taufik Nurrohman
⇒ Emoticon Blogger Otomatis dengan JQuery
Ave Ry
makasih mas,,, bookmarked nih,, saya mau tanya kalo ngaktifin threaded comments tapi pengen yang nggk pop out, gimana ya? soalnya saya nemu yang biasa, yang standar, tp jadina pas klik reply kotak komentarnya mucul pop out,, pengennya muncul di bawah ada
Unknown
apa bisa bagian replynya dibungkus dengan tag div??
klo bisa kira2 bagaimana tag kondisional yang dipakai??
Taufik Nurrohman
Tergantung. Tombolnya atau formulirnya.
Unknown
maksud saya semua bagian komentar balasan dibungkus lagi tag div..
kurang lebih seperti ini htmlnya:
<div class="item komentar">
......
<div class="area-balasan">
<div class="item balas">
.....
</div>
<div class="item balas">
.....
</div>
<div class="item balas">
.....
</div>
</div>
</div>
<div class="item komentar">
......
</div>
<div class="item komentar">
......
<div class="area-balasan">
<div class="item balas">
.....
</div>
</div>
</div>
kira-kira bentuk tag kondisionalnya agar tag div dgn class area-balasan hanya muncul ketika terdapat balasan bagaimana yah mas..
karena saya lihat di http://nicondroid.blogspot.com/p/custom-threaded-comments-in-blogger.html
dia bisa menerapkannya..
Taufik Nurrohman
Kira-kira seperti ini:
Sebelum:
Sesudah:
Tapi area balasan nantinya tetap muncul meskipun isinya kosong seperti ini:
Kalau kita tambahkan
padding
pada area balasan misalnya, walaupun komentar balasannya tidak ada, area balasannya tetap tampak. Hasilnya jadi kurang bagus.Unknown
apa ada tag kondisionalnya agar area balasannya tidak muncul jika tidak ada komentar balasan??
seperti tag div untuk komentar admin yang muncul jika ada admin berkomentar..
<b:if cond='data:comment.author == data:post.author'>....</b:if>
misalnya seperti:
<b:if cond='data:comment.numCommentsReply != 0'>....</b:if>
atau apalah??
Taufik Nurrohman
Tidak ada. Yang mendapat data tambahan itu cuma anak komentar (dapat data berupa ID komentar induk).
Unknown
jadi tidak ada yah mas..
saya juga yang salah mas.
saya kira metode dari bX-NicoNico dpt membuat yang seperti yang saya mau ternyata hanya seperti yang mas tulis hanya langsung membungkusnya dengan tag div..
btw terima kasih atas jawabannya..
sukses selalu mas taufik..
Unknown
Alhamdulillah.....
ketemu juga akhirnya komentar yang hampir persis seperti di blog kak taufik ini, yang terdiri dari beberapa level balasan dan fitur form balas di bawah komentar terkait.
terima kasih banyak kak taufik atas ilmunya ?
Taufik Nurrohman
Lebih lengkap: Kumpulan Blogger Thread Comments Hack
Unknown
Jadinya seperti ini kak :
Kalau tanpa kak taufik mungkin aku gak bisa buat komentar seperti itu, hampir semua code blog aku belajar dari Blog DTE.
Teri kasih yang tiada terkira kak ? :-bd :-bd :-bd
azewdsignet
mas taufik, saya sudah pasang (Threaded Comments) itu berhasil tapi imbasnya emoticon ya ga jadi icon malah code..!!
Taufik Nurrohman
ID komentar ini sudah tidak standar. Coba beberapa selektor ini:
1.
#custom-comments
2.
#comments-area
3.
#custom-comment-form
Anonim
mas taufik kok icon saya yang di tutorial yang ini " http://www.dte.web.id/2012/09/menandai-komentar-admin-pada-thread.html ". hilang ya, setalah pakai ini.... :'(
Taufik Nurrohman
Beda markup, beda tampilan juga. Kalau mau membuat ikon sendiri, harus membuat markup baru yang kemudian harus dibungkus lagi dengan tag kondisional administrator, supaya ikon hanya muncul pada komentar administrator saja. Atau cukup pakai CSS pseudo elemen untuk membuat ikon palsu dari favicon blog, dengan memanfaatkan kelas administrator yang Saya tambahkan di atas. Seperti ini:
Anonim
itu kok display:none pantes gak muncul iconnya pas membalas komentar hehehe...
Anonim
kalo pake lazy load kok avatarnya kadang muncul kadang nggak ya mas o.O
Unknown
ini sudah saya terapkan di blog saya mas, tapi kayaknya ada sistem yang salah pada penandaan komentar admin / author, yaitu kalau user biasa mengomentari komentar author maka komentar dari user tersebut ikut ditandai sebagai komentar author, contohnya seperti di gambar ini mas:
disitu saya menandai komentar admin dengan border-right berwarna biru di header comment nya, tetapi saat user lain mengomentarinya maka komentar tersebut ikut ditandai sebagai komentar admin
solusinya gimana mas?
makasih sebelumnya :)
Taufik Nurrohman
Iya, karena markup komentar balasannya ada di dalam komentar induk, jadi kalau komentar induk itu adalah komentar admin, otomatis anak komentar di dalamnya juga akan diliputi oleh kelas
.author-comment
juga dari kelas admin komentar induk. Harus di-reset ulang tampilannya saat mulai masuk ke dalam, lalu set ulang tampilan komentar admin pada anak komentar:Atau bisa juga memakai selektor direct-children, tapi agak susah:
Pakai kerangka yang pertama saja kalau masih bingung.
Walaupun sebenarnya agak aneh juga. Memangnya untuk apa administrator mengomentari postingnya sendiri dan malah membuat komentar itu menjadi komentar induk?
Terkait: Dasar-Dasar Selektor CSS Bertingkat
Unknown
terimakasih mas sudah dikasih pencerahan lagi,,
saya biasanya mengomentari artikel saya sendiri kalau artikel itu isinya mengalami perubahan atau di update :D
Anonim
senasib bos :D
thx juga atas penjelasan nya bang :)
Unknown
mantap mas taufik, blog saya sebelumnya susah banget diganti menjadi fitur komentar berbalas. Tapi sekarang berkat mas taufik blog saya sudah ada fitur komentar berbalasnya, \o/ :-bd
Unknown
om kenapa pas udah di find script barusan nya gk ada di blog punya saya. kenapa ia,? terus gimana solusinya tuhh, mohon bantuanya ia om.
begitu juga script yang ini
pas di fint th gak ada :) sekali lagi mohon bantuanya ia om
Taufik Nurrohman
Kurang jelas script yang mana. Mungkin maksudnya yang
<b:include>
itu ya?Belum pernah mengalami, tapi mungkin sudah berganti menjadi kode ini pada template-template yang baru:
IRIL SAGITA
Kak taufik, pada blog aku sering terjadi gambar avatar komentar gagal di muat/tdak tampil,biasanya itu terjadi jika jumlah komentar sudah banya, adakah cara mengatasi hal tersebut kak ?
Taufik Nurrohman
Seharusnya itu karena fitur lazy-loading foto profil bawaan dari Blogger. Kalau digulung sampai ke area komentar tertentu baru foto komentator tersebut akan termuat. Jadi tidak ada masalah. Yang penting script yang berada di area
<head>
ini jangan dibuang:IRIL SAGITA
Jadi gitu ya kak, berarti gak ada masalah pada blog aku, karena script yang anda sebutkan tadi masih ada, aku kira kalau ada masalah pada template blog aku, makasih kak !
Unknown
Terima kasih master atas tutorialnya.
Oiya master, delete button nya bisa di lihat hanya oleh admin aja gak?. soalnya yang sekarang kan delete button nya bisa di lihat walaupun oleh bukan admin.
Dan ane juga bingung mengenai pemasangan emoticons karena emoticons ane yg lama jadi tidak berfungsi lagi.
Ane udh coba pasang emoticons yang ada di tutorial master yg ini : http://www.dte.web.id/2012/03/jquery-auto-emoticons-for-blogger.html juga gak bisa.
Kalau master berkenan tolong cek ke blog ane di naruchigo.com
Mohon petunjuk untuk newbie ini master.
Terima kasih.
Taufik Nurrohman
Tidak bisa. Menghapus komentarnya lewat dasbor saja.
alul stemaku
akhirnya yang saya cari" ketemu juga,. \o/ \o/ \o/
makasih banyak mas atas tutorialnya.. :-bd
Yopi Hasopa
Mas Taufik, sepertinya "Fitur Komentar Berbalas" ini ada bug pada saat komentar post sangat banyak (334 komentar). Komentar tidak muncul semuanya, malah ada kotak berwarna abu-abu tua. Mohon pencerahan nya Mas. Thanks :)
Contoh postnya ini : http://percobaan.hsp21.com/2013/01/cara-mudah-nge-root-smartfren-andromax.html
Taufik Nurrohman
Saya inspect memakai Firebug kelihatan kalau CSS default Blogger menyembunyikan tampilan navigasi yang tidak diperlukan dengan
visibility:hidden
, bukandisplay:none
. Dengan menambahkan kode CSS ini, masalah bisa diatasi. Navigasi akan muncul kembali:Kode CSS di atas juga sudah Saya perbaharui ^:D
Yopi Hasopa
:-bd Terima kasih Mas Taufik, masalah sudah teratasi dengan baik \o/
Unknown
Makasih bro...saya izin nginep disini bro baca" artikelnya,,hahahay..
Unknown
oohh iyha,,bro itu cara ngedit biar tombol hapusnya cuman bisa ddilihat adminnya gimana..??
Unknown
gak usah dipasang kode deletenya, kan bisa hapusnya lewat dasbor, he...
Muhammad Zaki Al Aziz
Kang. maaf nih mau sedikit bertanya. Kan saya sudah menerapkan kode ini di blog saya dan Alhamdulillah sudah bisa :)
Tapi koq kenapa kalau saya ketik reply/balas, loadingnya lama?
Apakah ada yang salah pada blog saya atau gimana kang?
Makasih kang :)
Unknown
Coba di cek di blog saya,,soalnya saya juga pake komentar yg diatas dan apakah sama lamanya pas loading..
Taufik Nurrohman
Mungkin itu bukan masalah loading yang lama tapi memang benar-benar gagal loading. Coba di cek lagi kodenya atau ulangi lagi langkah-langkahnya. Mungkin ada yang salah.
Muhammad Zaki Al Aziz
Ok kang, terima kasih :)
Saya cek terlebih dahulu yah. Salam.
MEGAPIXELS MULTIMEDIA
Makasih gan tutornya, sangat sangat membantu~ Tralala ^_^
Putra
lapor, saya coba pasang gak muncul sama sekali. Saya pasang di blog baru, belum ada komentar, bijimana ini? url -> satanic-murder . blogspot . com
Unknown
saya masih menggunakan fitur thread komentar lama,, ketika komentar sudah sampai 200 lebih , yang lebihnya itu ga muncul... sudah pake loadmore tetep ajah ga bisa munucl..
kira" kesalahan terletak dimana ya..???
http://mdf-blog.blogspot.com/p/oot.html
Taufik Nurrohman
⇒ https://productforums.google.com/forum/#!topic/blogger/pdTff0724_o
Unknown
Mas, kalo mau threaded comment yang nggak ada pop upnya gimana? punya saya ada pop upnya tuhh... putraarifprasetyo.blogspot.com
Safar
mas, kok waktu mau balas komentar, nunggu lama bgt ya..keburu di pencet close mas.., ada apa ya?
Anonim
udah dicoba dan sesuai langkah"nya, tapi knapa ya tetep ga muncul tulisan reply'nya..??
Taufik Nurrohman
Kalau cuma tombol balasnya saja yang tidak tampil berarti kemungkinannya itu kesalahan Saya. Tapi kalau tombol balas komentarnya tidak tampil, dan efek CSS di atas juga tidak bekerja (sesuai CSS di atas, font komentar harus berubah menjadi Tahoma), maka itu artinya kamu yang gagal total.
Damar Zaky
mas taufik, bisa bantu saya nggak?, cancel komang di blog saya gagal wkwkwk
Taufik Nurrohman
Pakai Web Console.
Damar Zaky
wah gimana itu, minta bantuan deh :D
Taufik Nurrohman
TypeError: container is null
ID area komentarmu sudah tidak sama dengan markup HTML di atas. Ubah kode JavaScript di bagian ini:
menjadi seperti ini:
Damar Zaky
thx
Damar Zaky
aduh bener juga asem dah, thx wkwkwkwkwk padahal udah aku pake replacer pake notepad++, masih ngadat berarti np++nya xD, btw thx lagi
Anonim
mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..
Ahmad Zaelani
makasih bro.... mantap nih,,,, pertama gagal.. coba lagi terus berhasil... ok bagi yang nyoba jangan lupa templatenya di backup... heheh
Unknown
Saya sudah berhasil menerapkan tutor diatas, tapi ada yang saya ingin tanyakan kepada Mas Taufik, yang saya kirim lewat email ^_^
you
mas taufik komentar di blogsaya avatarnya mau author atau yang komment tetep aja tidak berubah sesuai dengan photo profil masing person. untuk mengatasinya kira kira gimana?
you
contoh bisa diihat di http://www.pabk-4you.com/2012/11/modifikasi-daftar-isi-dengan-j-accordion.html
Taufik Nurrohman
Itu thread comment dari Artisteer Tutorials. Mungkin agak berbeda dengan kode ini. Seharusnya tidak ada masalah kalau kode komentar disalin dari blog asalnya, karena awal-awal Saya juga memakai yang itu. Coba buka halaman ini
you
terima kasih mas.. untuk masalah td saya coba ganti kode
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
menjadi seperti ini
<div class='avatar-image-container vcard'><span dir='ltr'><a class='avatar-hovercard' expr:href='data:comment.authorUrl' onclick='' rel='nofollow'><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='35' width='35'/></a></span></div>
ternyata berhasil.
Satu lagi mas taufik.. pada halaman posting blog saya yang belum memiliki komentar, widget komentar tidak tampil. tetapi pada posting yang sudah dikomentari, widget komentar muncul.. kira2 apa masalahnya ya.
azewBz
mas ko ga jln ya setelah saya pasang slide panel dengan menggunkan komentar berbalas ini..!!
Taufik Nurrohman
Kamu sudah pernah tanya masalah ini, hanya saja kasusnya soal emotikon. Cari komentarmu di halaman ini yang ditulis pada hari Selasa, 29 Januari 2013 05.42.00 WIB. Selektor komentar ini sudah berubah menjadi
#custom-comments
, jadi…Selengkapnya: Membuat Komentar Slide Panel pada Template Blogspot
azewBz
tidak ada perubahan`tetap tidak muncul setelah saya mengikuti langkah belasan kan taufik..!! :(
Unknown
Wah mantap sekali tuts nya, maaf sedikit oot, tapi sepertinya masih dalam object, kalau untuk nonaktifkan link profile komentator kira kira bisa gk yah kang?
Salam :)
Taufik Nurrohman
Ganti kode ini:
dengan ini:
Unknown
Kang kalau mau memasang loop komentar balasan lebih dari dua tingkat dengan tidak memakai hack (maksudnya dengan cara seperti di posting ini) kira-kira ada ga?
Taufik Nurrohman
Pernah coba tapi malah rusak. Sebenarnya caranya sudah benar cuma loop komentar anakannya terlalu banyak :(
Unknown
kalo cara masukin untuk web yang baru diarancang dengan dream weaver, gmna caranya mas, bisa gak?? mhon bantuannya (cara pasangnya).tx
habibi daeng
Alhamdulillah, ijin pakai juga ya mas taufik :)
habibi daeng
tapi kok hasilnya error ya mas?
malah tampilan seluruh blog saya yang masuk ke jendela komentar, beh jadi bingung.
Taufik Nurrohman
Kalau begitu tombol balas gagal menyisipkan URL formulir balasan. Iframe berhasil berpindah, tapi tidak berhasil disisipi URL baru (URL yang masuk kosong/sama dengan halaman yang sedang aktif saat itu).
habibi daeng
ada saran ga mas ya untuk saya? :D
you
apakah custom comment ini bisa ditambahkan syntax.. soalnya saya pake ini.. v syntaxnya ga jalan... bisa kasih pencerahannya mas?
Taufik Nurrohman
⇒ /2012/09/syntax-highlighter-dengan-prism.html?showComment=1362493246789#c8544828114478662092
Alpha Dian Tamalanrea
mau tanya mas, kira2 bisa ngga latar belakangnya dikasih background? biar ngga transparan gitu komentarnya
Taufik Nurrohman
Lah itu kamu bisa bikin screenshoot yang ada gambar latarnya pakai apa? Begini:
Alpha Dian Tamalanrea
itu dari background templatenya :D
oke makasi mas taufik \o/
oiya mas, ijin copy link emoticonnya ya buat di postingan2 blog saya 0:)
Farrij Annafi'u
Mas itu kenapa komentar selain admin kagak ada fotonya????
Taufik Nurrohman
Coba tambahkan fungsi ini sebelum kode
//]]>
GEOKGEOK
Makasih bangat sob... sangat membantu :-bd
Anonim
apakah tingkatannya bisa dimbah mas?
you
Saya memakai fitur komentar ini.
tetapi hampir semua crawl error pada blog saya memiliki url seperti ini
http://....../2013/11/&parentID=4287954423382525820
apakah ada cara untuk mengatasinya mas? biar tidak terindex mbah google.. mhon bantuannya
Taufik Nurrohman
Tambahkan atribut
rel="nofollow"
pada tautan ini:Amazing Sphere
sob, kalo merubah posisi tulisan balas ama hapusnya jd seperti kyk blogmu ini gimana?
Taufik Nurrohman
Saya tidak punya tutorialnya, tapi kalau mau cari itu ada yang bisa memakai komentar bawaan Blogger yang dibuat seperti ini. Biasanya sudah dalam bentuk templat.
Unknown
mas taufik mau tanya kalo cara membuat komentar sendiri bukan dari blog gimana ya yang pake sql dan php
Taufik Nurrohman
→ http://www.google.com/search?q=membuat+fitur+komentar+dengan+mysql+dan+php