Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli

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:

Lihat Demo

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:

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

.clearfix {*zoom:1}

.pull-left {
  display:block;
  float:left;
}

.pull-right {
  display:block;
  float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
  margin:3em 0 0;
  font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
  letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
  color:#2143B4;
  text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
  margin:0 0 1em;
  padding:0 0 .7em 0;
  border-bottom:1px solid #eee;
  position:relative;
}

/* comment header */
.custom-comments .comment-header {
  overflow:hidden;
  margin:0 0 1em 0;
}

/* avatar area */
.custom-comments .avatar-box {
  width:65px;
  margin:0 0 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
  border:none;
  padding:0;
  margin:0;
  float:none;
  display:block;
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
}

.custom-comments .avatar-image-container img {
  border:1px solid #ddd;
  padding:4px;
  background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin:0 0 2em 75px}

/* comment reply */
.custom-comments .comment-reply {
  margin:1em 0 0 75px;
  padding:1em 1.2em;
  background-color:#FFF7D1;
  position:relative;
  font-size:11px;
}

.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 white;
}

.custom-comments .comment-reply .user {margin-left:15px}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
  border-color:#EAE5C4;
  background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
  display:block;
  clear:both;
  margin:1em 0 .5em 75px;
  text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
  border:1px solid #ddd;
  outline:none;
  padding:2px .7em 3px .5em;
  margin:0 0 0 4px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
  border-color:#bbb;
  text-decoration:none;
}

.custom-comments .comment-bottom-line a:focus,
.custom-comments .comment-bottom-line a:active,
.custom-comments .cancel-reply-btn:focus,
.custom-comments .cancel-reply-btn:active {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
  margin:1em 0 2em;
  clear:both;
}

.custom-comments .comment-item .custom-comment-form {
  border:1px solid #eee;
  padding:1em .2em 2em 1.5em;
  margin-left:75px;
}

.custom-comments #comment-editor {
  max-width:none;
  width:100%;
  height:250px;
  border:none;
  background:none;
}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
  font-style:italic;
  color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
  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 .paging-control-container .unneeded-paging-control {display:none}
.custom-comments .paging-control-container .paging-control {display:inline}

/* Author Comments Style: Do whatever you want with this! */
.author-comment > .comment-item {}
.author-comment > .comment-reply {}

Kemudian cari kode ini:

<b:includable id='comments' var='post'>

Salin kode ini, dan letakkan di atasnya:

<b:includable id='custom-comments' var='post'>
  <section class='custom-comments' id='custom-comments'>
    <b:if cond='data:post.allowComments'>

    <h4>
      <b:if cond='data:post.numComments == 1'>
        <span>1</span>&amp;nbsp;<data:commentLabel/>
      <b:else/>
        <span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/>
      </b:if>
    </h4>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <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>&#160;
        <data:post.commentRangeText/>&#160;
        <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>

    <div id='comments-area'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.inReplyTo'><b:else/>
          <b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
          <div class='comment-item clearfix' expr:id='data:comment.anchorName'>
            <div class='comment-header clearfix'>
              <strong class='user pull-left'>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if> <data:commentPostedByMsg/>
              </strong>
              <a class='comment-permalink pull-right' rel='nofollow' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
            </div> <!-- comment-header -->
            <div class='avatar-box pull-left'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
            </div> <!-- avatar-box -->
            <div class='comment-body'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <data:comment.body/>
              </b:if>
            </div> <!-- comment-body -->
            <b:loop values='data:post.comments' var='replies'>
              <b:if cond='data:replies.inReplyTo == data:comment.id'>
                <b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
                <div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
                  <div class='comment-header clearfix'>
                    <strong class='user pull-left'>
                    <b:if cond='data:replies.authorUrl'>
                      <a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a>
                    <b:else/>
                      <data:replies.author/>
                    </b:if> <data:commentPostedByMsg/>
                    </strong>
                    <a class='comment-permalink pull-right' rel='nofollow' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
                  </div> <!-- reply comment-header -->
                  <div class='avatar-box pull-left'>
                    <b:if cond='data:replies.favicon'>
                      <img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                    </b:if>
                    <b:if cond='data:blog.enabledCommentProfileImages'>
                      <data:replies.authorAvatarImage/>
                    </b:if>
                  </div> <!-- reply avatar-box -->
                  <div class='comment-body'>
                    <b:if cond='data:replies.isDeleted'>
                      <span class='deleted-comment'><data:replies.body/></span>
                    <b:else/>
                      <data:replies.body/>
                    </b:if>
                  </div> <!-- reply comment-body -->
                  <span class='comment-bottom-line'>
                    <a class='delete-btn' rel='nofollow' data-icon='&amp;times;' expr:href='data:replies.deleteUrl' expr:title='data:top.deleteCommentMsg'>Delete</a>
                  </span>
                </div> <!-- reply comment-reply -->
                <b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
              </b:if> <!-- replies.inReplyTo -->
            </b:loop>
            <span class='comment-bottom-line'>
              <b:if cond='data:comment.isDeleted != &quot;true&quot;'>
                <a class='reply-btn' data-icon='&amp;dArr;' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>Reply</a>
              </b:if>
              <a class='delete-btn' rel='nofollow' data-icon='&amp;times;' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>Delete</a>
            </span>
            <div expr:id='&quot;form-container-&quot; + data:comment.id'/>
          </div> <!-- comment-item -->
          <b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
        </b:if> <!-- comment.inReplyTo -->
      </b:loop>
    </div>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <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>&#160;
        <data:post.commentRangeText/>&#160;
        <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>

    <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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
      <a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</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 != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
        part = originalSource;
    frame.style.height = "50px";
    frame.style.visibility = "hidden";
    frame.src = (id != "cancel") ? 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:if>
  </section>
</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 (beberapa teksnya ada yang terletak jauh di sebelah kanan, mohon gulung kontainer kodenya ke kanan sekali-kali).

Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .author-comment 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:

.author-comment > .comment-item {
  border:5px solid #900;
  background-color:#ff0;
}

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='replies'>
  <b:if cond='data:replies.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.

Selasa, 08 Januari 2013

Mengaktifkan Fitur Komentar Bersarang pada Blogger

Konfigurasi

View more articles

Keyword link

Subscribe via Email

Contact us