Menambahkan CSS Untuk Thread Comment di Blogspot (Custome Threaded Comment Blogspot)

Untuk kesekian kalinya saya ngebahas lagi tentang Threaded Comment Blogspot tapi untuk yang kali ini insya Allah berbeda dengan artikel saya yang sebelumnya.
Di artikel saya ini akan mencoba bagi tips custom threaded comment blogspot dengan CSS.
Nah, dengan menambahkan CSS ini sobat bisa merubah dari segi tampilan kotak komentar blognya supaya sedikit berbeda dari tampilan sebelumnya atau juga berbeda dari kotak  komentar teman-teman blogger lainnya.

Saya rasa pengantarnya sudah cukup.
Oh iya, 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.

Cara mengaktifkan thread comment ini juga berbeda dari yang sebelumnya.
Cara yang satu ini manual (Edit HTML).
Tapi bagi sobat blogger yang tidak mau dibikin pusing sama kode HTML bisa langsung ke artikel yang sebelumnya cukup klik link berikut Aktivasi Thread Comment Blogspot.


Langkah 1 (Aktivasi Thread Comment)
Sebelumnya saya sarankan template sobat di backup terlebih dulu, ini cuma sebagai anti-wanti 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='&quot;comment-author-thread &quot; + 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 &lt; 200'>
<a class='reply-action' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Reply</a><br/>
<b:else/>
<script type='text/javascript'>
var indexc = &#39;<data:post.numComments/>&#39;
var indexcomment = &#39;<data:comment.id/>&#39;
//<![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(&quot;" + indexcomment + "&quot;);return false;' href='#'>Reply</a><br/>";
if(indexl!=-1)if(indexc<indexpage*200)document.write(replyAction);
//]]>
</script>
</b:if>
<div class='contenedorreply' expr:id='&quot;contenedorreply-&quot; + 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 == &quot;item&quot;'>
<script type='text/javascript'>var flagItem = 0;</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>var flagItem = 1;</script>
</b:if>
<script type='text/javascript'>
  
var indexa = &#39;<data:top.id/>&#39;;
var indexb = &#39;<data:post.id/>&#39;;
//<![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>

Sobat bisa mengganti nilai 250px pada bagian yang sudah di sorot untuk ukuran yang sesuai dengan template sobat.

Langkah 4
Tambahkan kode CSS di bawah ini di bagian CSS template sobat.

.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!

Selamat mencoba fitur thread comment blognya :)

Gabung ke group:

Follow @aditya_m_r

Share