Menambah Fasilitas Reply di Kotak Komentar Blogspot

Mungkin ini adalah salah satu kekurangan dari penyedia blog gratis blogger, karena belum adanya fasilitas reply komentar seperti adanya di wordpress. Tapi tenang, dengan sedikit trik kita dapat memodifikasi kotak komentar default blogger sehingga kita bisa menggunakan fasilitas reply. Sebenarnya cara ini pernah juga dipostingkan oleh master blog kita yaitu Mas Doyok, tetapi karena ada satu pertanyaan di kotak komentar saya yang menanyakan tentang ini dari Cool Blogmaka mau tidak mau saya memberikan jawabannya melalui postingan kali ini.

Contoh modifikasi kotak komentar seperti gambar berikut ini :

Kotak komentar dengan fasilitas reply

Untuk membuatnya ikuti tutorial berikut ini, walaupun agak sedikit panjang :

1. Login ke akun bloggermu

2. Tata Letak > Edit HTML

3. Download Template Lengkap dahulu untuk berjaga-jaga jika ada kekeliruan.

4. Beri tanda centang pada Expand Template Widget

5. Letakkan kode di bawah ini di atas <b:skin>

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

6. Setelah itu, letakkan kode 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: #F0F0BE;
border: 1px solid #FFFF99;
}
.blog-nonauthor-comment {
background-color: #B4C8F0;
border: 1px solid #7296E2;
}
.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;
}

7. Lalu, cari kode script ini :

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

Tanda titik-titik di tengah script di atas menunjukkan script yang panjang jadi tidak saya tulis. Gunakan yang berwarna merah untuk mempermudah menemukan lokasi.

Jika sudah ketemu, 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>


       <!-- 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 = 'http://www.blogger.com/profile/17873204507008562358';
        var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';
        var eCommentDelete = false;
        var eAuthorUrl = '';
        <b:loop values='data:post.comments' var='comment'>
          eCommentDelete = false;
          eAuthorUrl = '';
          <b:if cond='data:comment.authorUrl'>
            eAuthorUrl = "<data:comment.authorUrl/>";
          </b:if>
          <b:if cond='data:comment.isDeleted'>
            eCommentDelete = true;
          </b:if>
          
          buildComment("<data:comment.author/>", eAuthorUrl, 
            "<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete, 
            "<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>", 
            document.getElementById('comment-body-<data:comment.id/>').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' +
           '  said... ' + '\n' +
           '  <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
           '  <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\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' +
           '     <h4 class="reply-guide-header">How to Reply to this comment</h4>' + '\n' +
           '     <span>' + '\n' +
           '     To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' +
           '     <ul class="reply-guide-list">' + '\n' +
           '<li>@${COMMENT.ID}</li>' + '\n' +
           '<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
           '     </ul>' + '\n' +
           '     is the <b>first line</b> of your comment. ' + '\n' +
           '     <br />' + '\n' +
           '     <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
           '     >Click here to enter your reply</a>' + '\n' +
           '     </span>' + '\n' +
           '  </div>' + '\n' +
           '  <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
           '    <span><a ' +
           'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Reply</a></span> ' + '\n' +
           '    <span><a href="#comment-${COMMENT.ID}">Permalink</a></span> ' + '\n' +
           '    <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon"> </span></a></span>' + '\n' +
           '  </div>' + '\n' +
           '</div>' + '\n';
         
        applyCommentTemplate(eCommentTemplate);
        // ]]>
      </script>
<!-- Include a post comment link before rendering the comments -->
      <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'><bold>Bagaimana Pendapatmu?</bold></a>
</b:if>
</b:if>
</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 yang berwarna merah. Ganti dengan alamatprofil blogger Anda untuk membuat komentar Anda nantinya berbeda warna. Jika sudah Simpan Template.

Trik ini memang sedikit panjang namun dijamin hasilnya sangat bagus. Jika biasanya berurutan yang paling dahulu berkomentar akan berada di list paling atas daftar komentar dan yang terakhir paling bawah. Dengan model ini meski Anda berkomentar terakhir Anda bisa mengambil tempat di tengah-tengah dengabn menjawab komen seseorang.

Cara Penggunaannya 
Anda bisa mencobanya langsung diblog ini, jika Anda ingin menanggapi komentar seseorang cukup dengan mengawali komentar anda dengan @Nama yang akan ditanggapi lalu tekan enter. Sering juga ada beberapa nick yang sama, maka Anda bisa menggunakan gunakan id komentar, id komentar berbeda disetiap komentar. Caranya Klik Lihat Id Komentar di bagian bawah komentar yang akan Anda tanggapi. Untuk menanggapinya awali komentar Anda dengan @idkomentar lalu tekan enter juga tanpa diberi titik dua.

Lihat ID Komentar

Contoh :

@VAN <--ditulis pada baris pertama lalu tekan enter(VAN bisa diganti dengan nama lain sesuai yang akan ditanggapi)-->
makasih infonya sob..

moga bermanfaat...

Semoga bermanfaat dan terimakasih kepada MasDoy dan Kang Beben atas referensinya.

Artikel Terkait:

Categories: Tutorial Blogger