Cara Membuat Kotak Komentar Dengan Fungsi Reply

Beberapa hari yang lalu saya memodifikasi template saya dan mengadakan perombakkan besar-besaran terhadap situs saya ini. dan hasilnya bisa anda lihat sendiri bukan? salah satunya dan yang merupakan yang paling mencolok adalah kotak komentar saya. ya, kotak komentar situs saya memang sangat berbeda dengan kotak komentar situs lainnya. bukan apa-apa sih, semua itu saya lakukan demi kenyamanan anda selama anda mampir di gubuk saya ini.
Kotak komentar saya ini memiliki fasilitas replay yang akan sangat berguna jika anda ingin membalas komentar orang lain langsung. posisi komentar anda pun akan berada tepat dibawah komentar yang akan anda balas komentarnya. jadi anda pun tidak perlu berebutan pertamaxx untuk menempati posisi pertama pada komentar ini. karena anda bisa melangkahi komentar yang lainnya.

Lihat gambar dibawah sebagai contohnya.

Lalu bagaimana cara membuat kotak komentar seperti itu?
berikut step by stepnya:

1. Login blogger
2. pergi ke Tata Letak
3. Edit HTML
4. Namun sebelumnya, download terlebih dulu template anda untuk berjaga-jaga.
5. Centang Expand Template Widget
6. Letakkan kode biru di bawah ini di atas <b:skin>

<script src='http://komenbalas.googlecode.com/files/commentreply%282%29.js' type='text/javascript'/>

7. Letakkan kode berwarna biru berikut ini di atas ]]></b:skin>

.comment-segment {margin-top: 10px;margin-right: 10px;}
.comment-level-0 {margin-left: 10px;}
.comment-level-1 {margin-left: 25px;}
.comment-level-2 {margin-left: 40px;}
.comment-level-3 {margin-left: 55px;}
.comment-level-gt3 {margin-left: 70px;}
.blog-author-comment {background-color: #DFE6EF;border: 1px solid #7296E2;}
.blog-nonauthor-comment {background-color: #ffffff;border: 1px solid #000000;}
.deleted-comment {color: gray; font-STYLE: italic}
.delete-comment-icon {background: url("http://www.blogblog.com/rounders3/icon_delete13.gif") no-repeat;}
.comment-time {font-size: 80%;margin: inherit;padding-left: 10px;padding-bottom:10px;}
.reply-guide {background-color: #FFFFFF;border: #076a93 1px dotted;display: none;
padding-right: 10px;padding-left: 10px;padding-bottom: 0.75em;padding-top: 5px;margin-right: 10px;margin-bottom: 10px;}
.reply-guide-header {color: #076a93;padding-top: 10px;}
.reply-guide-list {list-style: none;padding-left: 2px;margin-left: 2px;}
.reply-guide-example {font-size: 85%;margin-right: 5px;margin-bottom: 10px;float: right;border: 1px dotted #076a93;padding: 5 5 5 5;}
.trackback { padding:9px 0 0 26px; margin:10px 0 0 0;  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjINijPUBxUms7UlkhYRSv0iouA2PhsJbyaDAxcyVPcA7tiMs5kUbQeEIhBwsEmRntnkaWwLtq97A1j8E4Fp638Oy1wA3C9sK_1ZqPuoIUm8KOtbfD0D7qoMo61TnGKTUn0tSmHwhiYX6c/?imgmax=800) no-repeat left; color:#000;}

8. Cari kode berikut ini

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
bla............ bla.................. bla.....................
</div>
</b:includable>

Tulisan bla... bla... bla... pada tengah-tengah script di atas menunjukkan script yang sangat panjang, oleh sebab itu saya tidak tulis dan menggantinya dengan bla... bla... bla.... Gunakan script berwarna merah untuk mempermudah menemukan lokasinya.

Jika anda sudah menemukannya, ganti keseluruhan kode di atas dengan kode di bawah ini

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:
        <b:else/><data:post.numComments/><data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond='data:post.numComments &gt; 0'>
        <!-- Include a post comment link before rendering the comments -->
              </b:if>

      <!-- Loop through the comments adding the comment bodies in a hidden div -->
      <b:loop values='data:post.comments' var='comment'>
        <div expr:id='&quot;comment-body-&quot; + data:comment.id' style='display: none;'>
          <data:comment.body/>
        </div>
      </b:loop>
      <!-- Now create the comment using our javascript -->
      <script type='text/javascript'>
        // Use this if you have just one author like this blog :)
        var BLOG_AUTHOR = &#39;http://www.blogger.com/profile/17415677888745046033&#39;;
        var BLOG_POST_COMMENT_LINK = &#39;<data:post.addCommentUrl/>&#39;;

        var eCommentDelete = false;
        var eAuthorUrl = &#39;&#39;;
        <b:loop values='data:post.comments' var='comment'>
          eCommentDelete = false;
          eAuthorUrl = &#39;&#39;;
          <b:if cond='data:comment.authorUrl'>
            eAuthorUrl = &quot;<data:comment.authorUrl/>&quot;;
          </b:if>
          <b:if cond='data:comment.isDeleted'>
            eCommentDelete = true;
          </b:if>
      
          buildComment(&quot;<data:comment.author/>&quot;, eAuthorUrl,
            &quot;<data:comment.id/>&quot;, &quot;<data:comment.timestamp/>&quot;, eCommentDelete,
            &quot;<data:comment.deleteUrl/>&quot;, &quot;<data:top.deleteCommentMsg/>&quot;,
            document.getElementById(&#39;comment-body-<data:comment.id/>&#39;).innerHTML);
        </b:loop>
        // <![CDATA[
        var eCommentTemplate = '' +
           '<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
           '  <a name="comment-${COMMENT.ID}"></a>' + '\n' +
           '  <span style="float: right; margin-right: 5px; " >' + '\n' +
           '  <a href="#" ' + '\n' +
           '    onclick="toggleElementDisplays(this, ' +
           '[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
           '[\'both\', \'both\', \'hide\']); return false;" >[hide]</a>' + '\n' +
           '  </span>' + '\n' +
           '  <span class="comment-author" >' +
           '${COMMENT.AUTHOR.URL.EXISTS.START}' +
           '<a   href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
           '${COMMENT.AUTHOR.URL.EXISTS.END}' +
           '${COMMENT.AUTHOR.NAME}' +
           '${COMMENT.AUTHOR.URL.EXISTS.START}' +
           '</a>' +
           '${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
           '  mengatakan... ' + '\n' +
 '  <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
           '  <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
                     '  <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
           '     <span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
           '     <p class="reply-guide-header">Id Komentar ini : ${COMMENT.ID}</p>' + '\n' +
           '  </div>' + '\n' +
           '  <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
           '    <span><a ' +
           'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Lihat Id Komentar</a></span> ' + '\n' +
      
           '    <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" >Hapus</span></a></span>' + '\n' +
           '  </div>' + '\n' +
           '</div>' + '\n';
     
        applyCommentTemplate(eCommentTemplate);
        // ]]>

      </script>
      <p class='comment-footer'>
       <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:include data='post' name='comment-form'/>
          <b:else/>
            <b:if cond='data:post.allowComments'>
              <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
        </b:if>
        </p>
      </p>
    </b:if>
    <div id='backlinks-container'>
      <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
        <b:if cond='data:post.showBacklinks'>
          <b:include data='post' name='backlinks'/>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>

Pada script panjang di atas, perhatikan script yang berwarna biru. Ganti dengan alamat profil blogger Anda untuk membuat komentar Anda berbeda warna. Jika sudah selesai,  Simpan Template.

Trik yang cukup panjang dan sangat sulit nampaknya, namun setelah saya praktikan ternyata tidak begitu sulit.
Jika pada pada komentar biasa umumnya yang paling dahulu berkomentar akan berada di list paling atas daftar komentar dan yang terakhir berada paling bawah, Dengan model ini meski Anda berkomentar terakhir Anda bisa mengambil tempat di tengah-tengah dengan menjawab komentar seseorang.

Jika ingin mencobanya, silahkan komentar di artikel ini....