Modifikasi Kotak Komentar dengan Reply di Blogspot/Blogger

Sebenarnya ada banyak cara mudah untuk membaut kotak komentar di blogspot menjadi seperti wordpress. Triknya yakni mengganti komentar default dengan layanan lain. Untuk komentar pun menjadi lebih mudah dan dinamis. Di blog ini pernah dibahas Disquss dan IntenseDebate. Namun, banyak blogger beranggapan hal ini akan mengibatkan peluang SEO lewat komentar default jadi hilang. Nah, jika Anda beranggapan sama dan tetap ingin menggunakan default blogger, mari ktia modifikasi saja sehingga bisa menggunakan fasilitas reply. Postingan ini bersumber dari Shams Blog dan pernah di psoting di Beben-Koben.

Perhatikan Gambar di bawah ini:

Untuk membuat seperti itu silahkan ikuti tutorial berikut ini
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk mengamnakan template Anda
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; margin-top: 10px;}
.comment-level-1 {margin-left: 25px; margin-top: 10px;}
.comment-level-2 {margin-left: 40px; margin-top: 10px;}
.comment-level-3 {margin-left: 55px; margin-top: 10px;}
.comment-level-gt3 {margin-left: 70px; margin-top: 10px;}
.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(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QKFXhNKI/AAAAAAAACJs/OdCQ1dcrY20/bgcomment_thumb%5B1%5D.png?imgmax=800) no-repeat left; color:#000;}

8. Cari kode berikut 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>

      <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 yang berwarna merah. Ganti dengan alamat profil 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.

Cobalah dahulu di blog ini. Saya berkomentar pertama dengan nama PERCOBAAN. Silahkan Anda reply dengan cara mengawali komentar Anda dengan @PERCOBAAN (yakni nama orang yang akan ditanggapi komentarnya) atau Anda bisa menggunakan id komentar. Klik Lihat Id Komentar di bagian bawah komentar yang akan Anda tanggapi. Untuk menanggapinya awali komentar Anda dengan @idkomentar.

Contoh:
@PERCOBAAN <---- ditulis pada baris pertama (PERCOBAAN bisa diganti dengan nama lain sesuai yang akan ditanggapi)
semangat blogging mas
jangan bosen untuk update setiap hari

Semoga bermanfaat.