Cara Membuat Komentar Bisa Di Reply Di Blogspot

Cara Membuat Komentar Bisa Di Reply Di Blogspot - Belum menjadi Blogger, kalau belum bisa "ngoprak-ngoprek" CSS atau Kode HTML. Pusing, Jlimet tapi Funny. Nah, postingan kali ini adalah Blogging Trik, Bagaimana Agar Komentar Bisa Di Reply Di Platform Blogspot.

Jika teman Blogger, nge-Blog dengan Platform Wordpress, mungkin tidak mengalami kesulitan dengan Reply ini, tapi kalau teman yang menggunakan Hosting Blogspot, sangat sulit. Terus, apasih Kegunaan dari Komentar bisa di Reply?

Kegunaanya : Dengan bisanya di Reply Komentar sobat, maka Komentar akan terasa lebih interaktif, teman blogger lain langsung bisa memberi sanggahan terhadap komentar lain, dsb.

Baiklah, tanpa berlama-lama lagi, mari kita praktekkan, Cara Membuat Komentar Bisa Di Reply Di Blogspot (KHUSUS BLOGSPOT) saja :

1. Masuk dulu ke akun ID Blogger sobat
2. Kemudian Klik Desain /Rancangan, kemudian Klik Edit HTML
3. Jangan lupa Centang Download Expand Widget
4. Kemudian Tekan Keyboard Sobat CTRL + F, Ketik <b:skin>
5. Setelah Ketemu, Letakkan Kode CSS dibawah ini diatas kode <b:skin>

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

6. Kemudian dengan CRTL + F, cari kode ]]></b:skin>
7. Setelah ketemu, Letakkan Kode CSS ini Diatas kode ]]></b:skin>

.comment-segment {margin-top: 10px; margin-right: 10px;}
.comment-level-0 {margin-left: 10px; margin-top: 10px;}
.comment-level-1 {margin-left: 25px; margin-top: 10px;}
.comment-level-2 {margin-left: 40px; margin-top: 10px;}
.comment-level-3 {margin-left: 55px; margin-top: 10px;}
.comment-level-gt3 {margin-left: 70px; margin-top: 10px;}
.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. Kemudian cari Kode ini dengan CRTL + F,

<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.

9. Jika sudah ketemu, ganti Kode Diatas dengan Kode 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/17415677888745046033&#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>

10. Silakan Ganti Alamat Profil yang berwarna Biru di kode CSS diatas dengan Alamat Profil Sobat (Di Dashboard Blogger Sobat, Buka Profil dan COPAS alamat nya dan Ganti Alamat Diatas)

11. Jika sudah, jangan lupa SIMPAN Template. Selesai.

Catatan : Untuk dapat me-Reply komentar, silakan Sobat, Reply salah satu komentar, kemudian Klik LIHAT ID KOMENTAR, Kemudian Masukkan COPAS Kode ID nya di Form Komentar dan di awali dengan @. Jadinya seperti ini : @8745641756681240311.0 (MASUKKAN KOMENTAR) --> Contoh

Bagaimana, mudah bukan membuat Menu Reply di Form Komentar di Blogspot. Silakan mencoba, jika ada kesulitan, silakan kita diskusi disini. Contoh Blogspot yang memiliki Form Komentar di Reply dapat dilihat di Blog teman saya DISINI . Terima kasih. Happy Blogging.




Artikel Lain :

29 komentar:

  1. Waduh, Gan, saya sudah terapkan petunjuk ini, tapi mengapa ID Komentarnya tetap tidak berubah seperti (@8745641756681240311.0 )....

    BalasHapus
  2. @Cah Ndeso : Mungkin ada kurang kali kode nya, atau ada kesalahan di kode point 8.. Backup dulu aja kang, ngeri gak jadi..

    BalasHapus
  3. manthab... mimpiku akan menjadi nyata.
    makasih
    salam superhangat, Kang.

    BalasHapus
  4. Wah banyak bener kodenya ya.. bisa nambah berat juga nih..

    BalasHapus
  5. banyak banget kodenya.. ampe pusing lihatnya bos.. hahaa... but thx.. coba dulu ya..

    BalasHapus
  6. wah, masih bingung mainan scriptnya nih, yg saya butuh cuma id komentarnya aja , caranya gmn yah??

    heheee

    BalasHapus
  7. Udah, ane, coba, , Kacau Abies :(

    BalasHapus
  8. waduhhh , makasihh bgt kang bedul infonya , bener - bener sangat bermanfaat bagi saya yang masih newbie *hhe

    BalasHapus
  9. Tks ya untuk infonya, salam kenal...

    BalasHapus
  10. ok juga nih, semoga makin sukses saja yah ngeblog nya

    BalasHapus
  11. Terima kasih atas informasinya Mas. ini yang saya cari cari selama ini. Akan segera saya terapkan di Blog saya.
    Sekali lagi terima kasih.

    BalasHapus
  12. Waduh, Gan, saya sudah terapkan petunjuk ini, tapi mengapa ID Komentarnya tetap tidak berubah seperti (@8745641756681240311.0 )....

    BalasHapus
  13. thanx infonya gan,..
    ai coba praktekin dulu,.. meskipun agak ribet juga scriptnya..
    newbie gan...

    BalasHapus
  14. bingung nih, di blog saya belum berhasil

    BalasHapus
  15. Wah banyak bener kodenya ya.. bisa nambah berat juga nih..

    BalasHapus
  16. Tks ya untuk infonya, salam kenal...

    BalasHapus
  17. sekarang suda langsung bisa kok kayaknya , hehe

    BalasHapus
  18. makasih gan artikelnya sangat bermanfaat...........?

    BalasHapus
  19. makasih solusinya gan, artikelnya sangat membantu salam kenal

    BalasHapus
  20. makasih solusinya gan, artikelnya sangat membantu salam kenal

    BalasHapus
  21. semua yang telah price toyota etios valco dihadirkan oleh website ini sangat sempurna,baik tampilan dan artikelnya..penuh warna dan penuh makna.. semua specification honda cb500f yang telah dihadirkan oleh website ini sangat sempurna,baik tampilan dan artikelnya..penuh warna dan price honda freed penuh makna.. price honda cbr250

    BalasHapus