Pembaharuan 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 membuat komentar bersarang (atau berbalas??) pada Blogger, Saya rasa metode dari bX-NicoNico ialah yang paling bagus. Mengapa?
- Dia tidak memakai elemen
<data:post.commentJso/>sebagai salah satu elemen yang diharapkan 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 huruf 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 dipakai untuk mengubah URL pada
iframeformulir komentar dan juga untuk memindahkan posisinya sesuai dengan ID komentar induk masing-masing. - Karena layout komentar ditata secara otomatis oleh Blogger, maka ketika JavaScript dimatikan, tata letak komentar jawaban akan tetap berada pada posisi yang benar. Ini berbeda dengan beberapa hack komentar bersarang Blogger yang hanya memakai JavaScript (yang juga telah Saya pakai hingga sekarang) untuk memposisikan komentar-komentar balasan, sehingga ketika JavaScript dimatikan, layout komentar akan berantakan.
Berikut ini ialah fitur komentar versi Saya yang lebih pendek dan lebih gampang dalam hal instalasi yang Saya buat menurut konsep dari Felipe, yaitu dengan cara memakai elemen data gres berjulukan <data:comment.inReplyTo/> untuk menyaring belum dewasa komentar yang tampil. Elemen ini berfungsi untuk menampilkan ID komentar induk pada masing-masing komentar balasan. Saya sanggup menyampaikan bahwa metode ini ialah metode yang paling sempurna dan bukan merupakan “hack”, alasannya ialah 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 lalu cek Expand Template Widget. Temukan isyarat ini:
]]></b:skin>
Salin isyarat CSS ini dan letakkan di atasnya:
/* Start 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; float:left; } .custom-comments .comment-avatar a, .custom-comments .comment-avatar img { margin:0; padding:0; background:none; border:none; 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:white #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:none; border:none; } .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 isyarat ini:
<b:includable id='comments' var='post'>
Salin isyarat ini, dan letakkan di atasnya:
<b:includable id='custom-comments' var='post'> <b:with value='{ delete: "Delete", reply: "Reply", undo: "Cancel Reply" }' var='text'> <section class='custom-comments' id='custom-comments'> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> <span>1</span> <data:commentLabel/> <b:else/> <span><data:post.numComments/></span> <data:commentLabelPlural/> </b:if> </h4> <b:if cond='data:post.comments.size > 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.undo/></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.oldestLinkUrl'><data:post.oldestLinkText/></a>  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>  <data:post.commentRangeText/>  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </nav> </b:if> </b:includable>Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua isyarat yang tampak ibarat ini:
<b:include data='post' name='threaded_comments'/>
atau ibarat ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan isyarat itu, segera ganti dengan isyarat ini:
<b:include data='post' name='custom-comments'/>Klik Simpan Template.
Konfigurasi
Kode-kode yang Saya beri tanda ialah label-label tombol dan sanggup Anda ganti teksnya sesuka hati sesuai dengan bahasa pada negara dimana Anda tinggal. Fitur penanda komentar direktur juga ada. Untuk mengaktifkannya, Anda sanggup memakai selektor-selektor CSS yang tercantum di atas, lalu awali dengan kelas .is-author untuk menandai komentar penulis. Sebagai contoh, Saya akan memperlihatkan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan ialah ibarat 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 usang memakai fitur komentar bersarang lebih dari dua level (seperti blog Saya), sangat disarankan untuk tidak menerapkan modifikasi di atas, alasannya ialah Saya hanya memakai loop komentar jawaban sebanyak satu kali:
<b:loop values='data:post.comments' var='reply'> <b:if cond='data:reply.inReplyTo == data:comment.id'> Komentar jawaban muncul di sini… </b:if> </b:loop>Seperti yang Anda lihat bahwa Saya hanya membandingkan nilai data:var.inReplyTo pada komentar jawaban dengan ID komentar induk sekali saja (satu kali loop), sehingga bila komentar jawaban usang 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 gres atau blog usang dengan sedikit komentar dan blog dengan fitur komentar yang masih usang sanggup melaksanakan modifikasi ini dengan aman.