TopBottom

Berlangganan Artikel

Facebook Twitter Google Buzz Digg Yahoo! Bookmarks Google Bookmarks Technorati

Enter your email address:

Delivered by FeedBurner

Fasilitas Reply di Kotak Komentar Blogspot (Terbaru)

Posted by Tiar Bahtiar at Senin, 01 Maret 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

[+]Klik Gambar
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://s989.photobucket.com/albums/af13/vikost/?action=view&current=1267436847_001_05.png")
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. 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 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.


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.


Contoh :
@tiar <--ditulis pada baris pertama lalu tekan enter(tiar bisa diganti dengan nama lain sesuai yang akan ditanggapi)-->

Jangan Bosan bosan untuk Mengunjungi Blog gakadajudulnya.blogspot.com  dan Jangan Malu-malu untuk Berkomentar..SEmoga bermanfaat
Share
Share/Save/Bookmark

Artikel Menarik:



Posting Komentar

Semakin banyak anda berkomentar, semakin banyak backlink yang anda dapatkan dan tentu saja Search Engine akan semakin cinta terhadap blog anda.