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

49 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. Wah, betul... enakan yang kedua

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

    BalasHapus
  13. 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. @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
  15. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  17. 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
  18. Waduh, susah juga... untuk yang ini five thumbs up untuk WP

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

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

    BalasHapus
  21. yang pertrama ga bisa kenapa ya pencerahannya dong

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

    BalasHapus
  23. 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
  24. @suramadu kalau boleh tahu, cara yang dipakai cara pertama atay kedua?

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

    BalasHapus
  26. makasih infonya,
    salam kenal..
    need IT??
    http://www.linovtech.com

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

    BalasHapus
  28. Very Interesting!
    Thank You!

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

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

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

    BalasHapus
  32. @IHSANIkut dund..........

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

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

    BalasHapus
  35. travel trailers used in il http://qipp.eu/vacation-packages/vacation-package-from-kansas-city-to-san-francisco cannot travel east or west 2 places on earth [url=http://qipp.eu/plane-tickets/best-day-of-week-to-get-cheap-plane-tickets]best day of week to get cheap plane tickets[/url]
    best airline travel search engine http://qipp.eu/tour/city-sights-bus-tour-nyc-ny travel trails preserve i 280 miles mill activities [url=http://qipp.eu/adventure/how-to-make-health-poition-in-adventure-quest]tango travel trailers[/url]
    bonair travel tralers http://qipp.eu/expedia/expedia-plane mississippi travel [url=http://qipp.eu/expedia/expedia-australia]expedia australia[/url]
    ultimate travel blazer http://qipp.eu/car-rental/budget-rental-car-offer-code travel channel cash treasure [url=http://qipp.eu/disneyland/disneyland-tokyo-prices]travel desk car kid[/url]
    what is the travel info mailing address for grand camen http://qipp.eu/flight/air-force-flight-maneuvres ok travel agency [url=http://qipp.eu/tour/tour-companies-machu-picchu]tour companies machu picchu[/url]
    charokee travel http://qipp.eu/airlines/braniff-airlines-history travel projector dlp [url=http://qipp.eu/flight/bocas-del-toro-flight]pet travel england[/url]

    BalasHapus
  36. 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
  37. 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
  38. [url=http://najgraj.pl]Gry[/url]

    http://najgraj.pl/kategoria,gry,5,0.html
    http://najgraj.pl/kategoria,gry,11,0.html
    http://najgraj.pl/kategoria,gry,24,0.html
    http://najgraj.pl/kategoria,gry,15,0.html
    http://najgraj.pl/tagi,Mario

    BalasHapus
  39. Utitarsklub egy olyan közösség, mely segít hogy utazásod ne legyen magányos | Találj új barátot a következo nyaraláshoz ebben segít az utitárs kereso : [url=http://www.utitarsklub.hu/]utitárs keresés[/url]

    BalasHapus