Di artikel saya ini akan mencoba bagi tips yang dapat referensi dari mas Adityas tentang custom threaded comment blogspot dengan CSS.
Dengan menambahkan CSS ini Anda bisa merubah dari segi tampilan kotak komentar blognya supaya sedikit berbeda dari tampilan sebelumnya atau juga berbeda dari kotak komentar blogger lainnya.
Bagi yang belum Enable Thread Comment Blogspot bisa lebih dulu mengikuti langkah-langkah di bawah ini.
Bagi yang sudah mengaktifkan bisa langsung ke tahap pemasangan CSSnya.
Langkah 1 (Aktivasi Thread Comment)
Sebelumnya saya sarankan template sobat di backup terlebih dulu, ini takutnya kalo seandainya ada error saat pengeditan nanti.
Masuk ke Edit HTML >> Expand Widget Content kemudian temukan kode id='comment-form-thread' persis seperti tag yang sudah di highlight di bawah ini:
<b:includable id='comment-form' var='post'>
<div class='comment-form' id='comment-form-thread'>
.....kita tidak akan menghapus kode di area ini.....
</div>
</b:includable>
Langkah 2
Temukan kode loop diantara kode di atas.
<b:loop values='data:post.comments' var='comment'>
............................
</b:loop>
Tambahkan kode di bawah ini setelah kode
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><!--FIX--><b:else/>
Selanjutnya tambahkan kode di bawah ini di atas kode </b:loop>
<div class='replies-container'>
<b:loop values='data:post.comments' var='childComment'>
<b:if cond='data:childComment.inReplyTo == data:comment.id'>
<div class='comment-replies' expr:id='data:childComment.id'>
<div expr:class='"comment-author-thread " + data:childComment.authorClass' expr:id='data:childComment.anchorName'>
<b:if cond='data:childComment.favicon'>
<img expr:src='data:childComment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:childComment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:childComment.authorAvatarImage/>
</b:if>
</div>
<div class='reply-to'>
<b:if cond='data:childComment.authorUrl'>
<a expr:href='data:childComment.authorUrl' rel='nofollow'><data:childComment.author/></a>
<b:else/>
<data:childComment.author/>
</b:if>
replied...
<div class='comment-body-thread'>
<b:if cond='data:childComment.isDeleted'>
<span class='deleted-comment'><data:childComment.body/></span>
<b:else/>
<p><data:childComment.body/></p>
</b:if>
</div>
<div class='comment-footer-thread'>
<span class='comment-timestamp'>
<a expr:href='data:childComment.url' title='Comment permalink'>
<data:childComment.timestamp/>
</a>
<b:include data='childComment' name='commentDeleteIcon'/>
</span>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<b:if cond='data:post.allowNewComments'>
<b:if cond='data:post.numComments < 200'>
<a class='reply-action' expr:onclick='"reply('" + data:comment.id + "');return false;"' href='#'>Reply</a><br/>
<b:else/>
<script type='text/javascript'>
var indexc = '<data:post.numComments/>'
var indexcomment = '<data:comment.id/>'
//<![CDATA[
var indexpage = indexc/200;
indexpage = Math.ceil(indexpage);
var indexl = window.location.href;
indexl = indexl.indexOf("commentPage=" + indexpage + "");
var replyAction = "<a class='reply-action' onclick='reply("" + indexcomment + "");return false;' href='#'>Reply</a><br/>";
if(indexl!=-1)if(indexc<indexpage*200)document.write(replyAction);
//]]>
</script>
</b:if>
<div class='contenedorreply' expr:id='"contenedorreply-" + data:comment.id'/>
</b:if>
</b:if>
Langkah 3 Tambahkan kode javascript di bawah ini setelah kode
<b:includable id='comments' var='post'> <b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>var flagItem = 0;</script>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<script type='text/javascript'>var flagItem = 1;</script>
</b:if>
<script type='text/javascript'>
var indexa = '<data:top.id/>';
var indexb = '<data:post.id/>';
//<![CDATA[
flagItem="0"==flagItem?"&postID=":"&pageID=";
function replyOriginal() {
var b = document.getElementById("comment-editor").getAttribute("src"), a = b.indexOf("#"), b = b.substring(a), a = document.getElementById("comment-editor");
a.parentNode.removeChild(a);
a = document.getElementById("replypost");
a.parentNode.removeChild(a);
b = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";
a = document.createElement("iframe");
a.setAttribute("id", "comment-editor");
a.setAttribute("name", "comment-editor");
a.setAttribute("src", b);
a.setAttribute("height", "250px");
a.setAttribute("width", "100%");
a.setAttribute("frameBorder", "0");
a.setAttribute("allowtransparency", "true");
document.getElementById("comment-form-thread").appendChild(a)
}
function reply(b) {
var a = document.getElementById("comment-editor").getAttribute("src"), c = a.indexOf("#"), a = a.substring(c), c = document.getElementById("comment-editor");
c.parentNode.removeChild(c);
a = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";
c = document.createElement("iframe");
c.setAttribute("id", "comment-editor");
c.setAttribute("name", "comment-editor");
c.setAttribute("src", a);
c.setAttribute("height", "250px");
c.setAttribute("width", "100%");
c.setAttribute("frameBorder", "0");
c.setAttribute("allowtransparency", "true");
document.getElementById("contenedorreply-" + b + "").appendChild(c);
document.getElementById("replypost") || (b = document.createElement("a"), b.innerHTML = "Add a comment", b.setAttribute("id", "replypost"), b.setAttribute("href", "javascript:void(0)"), b.setAttribute("class", "LoadMore"), document.getElementById("comment-form-thread").appendChild(b));
var clickOn = document.getElementById("replypost");
clickOn.addEventListener ? clickOn.addEventListener("click", replyOriginal, !1) : clickOn.attachEvent("onclick", replyOriginal);
}
//]]>
</script>
Langkah 4 Tambahkan kode CSS di bawah ini di bagian CSS template Anda
.comment-replies {margin:1.3em 0;line-height: 1.2em;padding: 12px;}
.comment-author-thread {float:left;}
#comments .replies-container .avatar-image-container {position:static;}
.replies-container {margin-left:50px;}
.comment-body-thread {padding:0.5em 0;margin-bottom:0.4em;}
.comment-body-thread p {margin:0;word-wrap: break-word;}
.comment-footer {margin: 0.5em 25px 1em;}
.reply-action {display:block;font-weight:bold;}
#comment-editor {border:0;}
Simpan Template dan Selesai
