Membuat Kotak Komentar Pada Blogspot/Blogger dengan Model Reply

Trik ini digunakan Untuk Memodifikasi Kotak komentar dengan tampilan ada Reply, jadi memungkinkan untuk saling membalas komen. Langkah langkahnya Sbb:

Untuk membuat seperti itu silahkan ikuti tutorial berikut ini

1. Login blogger
2. Tata Letak
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk jaga2 seandainya gagal, kita bisa kembali ke template sebelumnya.
5. Centang Expand Template Widget
6. Cari kode <b:skin> Lalu letakkan kode di bawah ini di atasnya kode tadi

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

7. Cari kode ]]></b:skin> Lalu letakkan kode berikut ini di atas kede tersebut

.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/AVvXsEhLYHhhQT5LUdc77y9UpgL6kkGx0mRqdfwppf-2AMnIRZKqUxHxor3RZNNgg9MQmNAfDuYh1amfB5rsq61oyV64mYWSKQiw3PCxUVcfEJe_B04mf82kZCYG7MT4QSGdTTCIQ152bbo_Sa4/?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 sampai dg script yg dibawahnya karena script yang panjang jadi tidak saya tulis. Gunakan yang berwarna merah untuk mempermudah menemukannya.
Jika sudah ketemu, ganti semua kode di atas tadi 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 > 0'>
        
              </b:if>

      
      <b:loop values='data:post.comments' var='comment'>
        <div expr:id='"comment-body-" + data:comment.id' style='display: none;'>
          <data:comment.body/>
        </div>
      </b:loop>
      
      <script type='text/javascript'>
        // Use this if you have just one author like this blog :)
        var BLOG_AUTHOR = 'http://www.blogger.com/profile/17415677888745046033';
        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' +
           ' 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 + "_backlinks-container"'>
        <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 kamu untuk membuat komentar Anda nantinya berbeda warna. Jika sudah jangan lupa Simpan Template.

Dengan trik ini Jika biasanya list komen berurutan yang paling dahulu berkomentar akan berada di list paling atas daftar komentar dan yang terakhir paling bawah. Dengan model ini meski kamu berkomentar terakhir kamu bisa mengambil tempat di tengah-tengah atau paling atas sekalipun dengabn menjawab komen seseorang. Semoga berhasil....

Sumber:www.MasDoyok.co.cc

IZED ZONE

Instant mesej