Home » Tutorial » Membuat Fasilitas Reply di kotak komentar Blog

Membuat Fasilitas Reply di kotak komentar Blog

Rabu, 20 April 2011 |

Diposting oleh filemmove |

Edit Entri

Mungkin ini adalah salah satu kekurangan blog gratis Blogger ( Blogspot ), Karena Belum adanya fasilitas Reply / Komentar seperti adanya di Wordpress.Tapi tenang, dengan sedikit sentuhan trik kita dapat memodifikasi kotak komentar default Blogger sehingga kita dapat menggunakan fasilitas Reply.

Untuk Membuatnya ikuti tutorial berikut ini walaupun agak sedikit panjang :

Login Ke blogger
Tata Letak >>> Edit html
Download Templete Lengkap dahulu untuk jaga jaga jika terjadi kesalahan
Letakkan Kode dibawah ini di atas kode <b:skin>

Setelah itu letakkan kode di bawah ini tepat di atas kode ]]></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;
}

Lalu cari kode script di bawah ini

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

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: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/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' +
               '' + '\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}"></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>
    
          <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 + "_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 Anda untuk membuat komentar Anda nantinya berbeda warna. Jika sudah Simpan Template