loading...

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(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/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

44 komentar untuk “Blogger Reply Comment”

  1. wah akan saya terapkan dulu di blog percobaan dech :D

    BalasHapus
  2. saya pilih comment versi kedua deh...

    BalasHapus
  3. kalo saya lebih suka tutorial versi kedua sob, lebih ringan :)

    BalasHapus
  4. You made some good points there. I did a exploration on the matter and found most people will concur with your blog. Thanks for sharing...

    BalasHapus
  5. very informative posts and with great resource. thanks

    BalasHapus
  6. nice info om. ijin blogwalking yah, salam kenal dan salam dofollow

    BalasHapus
  7. Aku simpan dulu kodenya kawand...
    Thanks.

    BalasHapus
  8. wih... mantap banget gan tutorialnya.....

    makasih gan dah dishare...... salam kenal

    BalasHapus
  9. :)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

    BalasHapus
  10. Coba di praktekkin di sini, saya jadi bisa liat hasilnya kayak apa, kalo bagus akan saya terapkan.

    BalasHapus
  11. @Reza Winandar Ini contoh penerapan reply yang kedua....

    BalasHapus
  12. saya lagi coba gabungin kedua replay diatas, namun baru berhasil pada satu halaman saja.. udah ketahuan rumusnya namun belum berhasil menentukan kodenya untuk bisa jalan diseluruh halaman.

    BalasHapus
  13. @OB saya lagi coba gabungin kedua replay diatas, namun baru berhasil pada satu halaman saja.. udah ketahuan rumusnya namun belum berhasil menentukan kodenya untuk bisa jalan diseluruh halaman.

    BalasHapus
  14. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  15. thank U.. tpi sya mo nanya nih.. hehehe ma'lum rada2 gaptek.... blog ID itu apa ya kang? :))

    BalasHapus
  16. saya coba sob, tapi kok semua komentarnya jadi ilang semua yach?
    jadi misalnya artikel X ada 4 orang yang komentar, ada keterangan kalo 4 komentar, tapi komentarnya gak ada, kira2 apanya yach sob??

    Regards,

    Ghustie Samosir
    www.hanyainfo.blogspot.com

    Khusus Dewasa Klik Disini atau Disini

    BalasHapus
  17. Waduh, susah juga... untuk yang ini five thumbs up untuk WP

    BalasHapus
  18. thanks.. waaaaaaah aku bnyak belajar dari sini,,, terimakasih buanyak ya.....

    BalasHapus
  19. Alhamdulillah.. akhirnya saya berhasil menggabungkan kedua replay diatas, sehingga nyaris tidak ada kekurangan.

    BalasHapus
  20. yang pertrama ga bisa kenapa ya pencerahannya dong

    BalasHapus
  21. tenk bozz .....akhirnya saya bisa kasih rplay di blog saya

    BalasHapus
  22. wah kayaknya ribet yah mas, aku udah coba tapi gagal2 terus mas, mohon pencerahannya :)
    salm kenal mas :D

    10 Langkah Mudah Mempercepat Loading Blog Disini!

    BalasHapus
  23. @suramadu kalau boleh tahu, cara yang dipakai cara pertama atay kedua?

    BalasHapus
  24. @Blog Pengembangan Diri cara yang mana yang akan Mas terapkan pada blog Anda?

    BalasHapus
  25. @IHSANtes lagi nih... coba-coba ya???

    BalasHapus
  26. Hello I feel like creating this forum so.. hi :)

    BalasHapus
  27. Visit http://www.dofollowarticles.com to post articles in the following categories: rise, efax, comfortzone, ctr, shape, dangers, router and more...

    BalasHapus
  28. knapa ya komentar saya gak muncul d blog saya sendiri?

    BalasHapus
  29. @bLogger_Jatilawang : Coba kk setting komentar dalam pengaturan blog. Pada point "Penempatan Formulir Komentar", pilih Disemat di bawah entri

    BalasHapus
  30. hahaha... kada kawa yang cara pertama... malah komentar yang terdahulu kada kawa dibaca... nyaman cara yang kedua...
    :P

    BalasHapus
  31. piano music books http://rap.anymusicdownloads.in/persian-rap-zed-bazi villas at whisper rock [url=http://techno.anymusicdownloads.in/techno-eyeopener-song]techno eyeopener song[/url]
    virginia state gospel choir capranica http://soul.anymusicdownloads.in/he-restoreth-my-soul native american ghost dance [url=http://stereo.anymusicdownloads.in/wireless-lan-adapter-reciever-for-home-stereo]soundtrack or video clip from cat on a hot tin roof[/url]
    winamp 2 zvocne http://winamp.anymusicdownloads.in/using-winamp-for-ipod in dash car stereo reviews [url=http://blues.anymusicdownloads.in/stray-cats-blues]stray cats blues[/url]
    you tube lithuanian music http://rock.anymusicdownloads.in/rock-camp-austin kids sheet music [url=http://trance.anymusicdownloads.in/esperanza-trance]chris rock tickets las vegas[/url]
    difference in ipod nano and mini http://gospel.anymusicdownloads.in/gospel-nacional david and bailey and music and brain tumor [url=http://rock.anymusicdownloads.in/lyrics-give-me-the-beat-boys-to-rock-and-roll]lyrics give me the beat boys to rock and roll[/url]
    directions to make a paper horn music http://rap.anymusicdownloads.in/riding-dirty-rap-song columbia boys techno snow [url=http://mp3.anymusicdownloads.in/futuresex-justin-timberlake-free-mp3s]free musical video ecards[/url]

    BalasHapus
  32. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:if" must be terminated by the matching end-tag "".

    kok ada tulsia ngitu y
    maaf masih newbie

    BalasHapus