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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLqeOpa1p83Up3Z7WX7y8uXg91bNVI0HPrii5sbAQJ2H_7x5lifhI74PyK7C3Wq5ZumVmgXw0d0SpBXJP3WKBYa1RmqM5AbAzpR9K0vArPe2fDi16qRATMw2_1F5k7bm8icoFKUKAc9U/?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.

Tweet

Artikel Lain :