Blogger Reply Comment

Sebenarnya ini bukan tutorial yang baru bagi pada blogger mania, akan tetapi dalam artikel ini saya akan menyajikan sekalian dua tutorial tentang reply comment pada blogspot.
Ya, memang ada dua pada saat ini untuk membuat kolom komentar pada blogspot bisa diaplikasikan reply comment, oke kita mulai saja....

Reply Comment Pertama

Pada tutorial pertama ini akan menyajikan cara yang sedikit ribet karena kita harus merombak semua CSS dan HTML pada kotak komentar blog kita.
Kelebihannya : reply comment bakal mirip seperti pada blog wordpress, yaitu kolom balas komentar langsung terletak pada kolom yang ingin kita balas.
Kekurangan : kita harus terlebih dahulu memasukkan ID blog komentar jika ingin membalas komentar...


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 di bawah ini dibawah ]]></b:skin>

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

Catatan : sebaiknya anda melihat postingan tentang membuat kolom komentar blog, lalu hapus kode Komentar pada CSS cara pertama dan kode HTMLnya juga..

7. 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: #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/AVvXsEjuSi-mQ4PjXSHO3g5rD1gZt5u54CN4DGZwgU00CQjYYMg2Y2CN01ir3kZbcc5gKX2toagJyajr4iqZPJF_TTjC7Jbs1fxjRFzRMZQdkQu9V0gMyJKPaz6D2FBAhn-J-iiWUAb8HP9xoFs/?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/YOURBLOGID&#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 dengan menjawab komentar seseorang.

Reply Comment Kedua

Nah kalau cara yang ini lebi simple lagi karena kita tidak terlalu banyak mengacak-acak kode komentar yang ada pada blog kita..
Kelebihan : scriptnya sedikit dan tidak merubah total kolom komentar pada blog kita
Kekurangan : reply comment tidak bisa langsung terletak dibawah komentar yang kita balas, melainkan tetap terletak pada kolom paling bawah.

Oke, kita mulai saja ya...

cara 1 sampai 5 sama seperti diatas..

6. Cari kode seperti yang dibawah ini:

<data:commentPostedByMsg/>

7. Kemudian Copy dan Paste kode berikut tepat dibawah kode yang diatas :

<span class="comment-reply"><a expr:href="&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;" href="" onclick="javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;">[Reply to comment]</a></span>

8. Pada kode diatas ada tulisan yang berwarna biru (Your Blog ID) isi dengan ID Blogger sobat pada blog yang akan di install tombol reply. setelah semua settingan benar, kemudian save template sobat.

contoh penerapan reply comment kedua ini bisa anda lihat pada blog RudyAzhar ini.

Oke, begitulah cara membuat blogspot kita bisa reply comment, masing-masing ada kelebihan dan kelemahannya karena tutorial ini adalah hasil modifikasi dari pada blogger mania yang senang dengan utak atik blog.

Semoga kedepannya blogger.com bisa mengaplikasikan reply comment pada blogspot...

Selamat mencoba, dan jika masih kurang paham bisa langsung menuliskan unek-uneknya pada kotak komentar dibawah ini....

Original Post :

Reply Comment pertama : Shams blog
Reply Comment kedua : thisichen.com