Tutorial Membuat “Comment Form Inside Post” di Blogger

Jika sepintas dilihat, penampilan blog di atas (http://blackquanta.blogspot.com) sama persis dengan penampilan blog saya ini. Tapi perhatikan baik-baik, blog itu BERBEDA dengan blog ini. Sejak saya memutuskan untuk benar-benar ngeblog, saya mulai rajin blogwalking ke para blogger di Indonesia. Blog palsu di atas sengaja saya buat untuk “menjebak” orang-orang yang nyasar ke profil Blogger saya sehingga mereka merasa seakan berada di blog saya ini. Korban pertama saya - tikabanget - tertarik dengan bagaimana saya membuat form komentar Blogger bisa menyatu dalam postingan kita sehingga membuat teman-teman kita semakin rajin mengisi komentar di blog kita di Blogger. Berikut ini tutorial lengkapnya buat kalian semua.

Sebenarnya tutorial ini sudah dibuat oleh JackBook beberapa bulan lalu, tutorial aslinya bisa dibaca di sini. Tapi saya akan menulisnya kembali di sini dengan versi saya karena tutorial aslinya mbulet dan berbahasa inggris. Saya juga menyederhanakan beberapa kode yang digunakan. Sebenarnya idenya sangat sederhana, yaitu memasukkan halaman komentar Blogger ke dalam sebuah iFrame yang terletak di halaman postingan kita di Blogger. Mungkin buat yang mengerti bahasa pemrograman HTML bisa langsung memahami ide tersebut, buat yang mungkin awam dengan HTML, silahkan mengikuti beberapa petunjuk di bawah ini.

Pertama

Jangan lupa login dulu ke account Blogger kalian untuk menuju Dashboard. Pilih menu Setting > Comments atau Pengaturan > Komentar. Berikan pilihan “Ya” pada bagian untuk menampilkan komentar dalam sebuah window popup. Kemudian tekan tombol Simpan (Save Settings).

Kedua

Pilih menu Template > Edit HTML dan centang pada bagian Expand Template Widget atau Expand Widget Templates. Temukan kode di bawah ini,

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='dataost.allowComments’>
<h4>
<b:if cond=’dataost.numComments == 1′>
1 <data:commentLabel/>:
<b:else/>
<dataost.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id=’comments-block’>
<b:loop values=’dataost.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

<p class=’comment-footer’>
<a expr:href=’dataost.addCommentUrl’ exprnclick=’dataost.addCommentOnclick’><dataostCommentMsg/></a>
</p>

</b:if>

<div id=’backlinks-container’>
<div expr:id=’data:widget.instanceId + “_backlinks-container”‘>
<b:if cond=’dataost.showBacklinks’>
<b:include data=’post’ name=’backlinks’/>
</b:if>
</div>
</div>
</div>
</b:includable>

Ganti dengan kode di bawah ini,

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='dataost.allowComments’>
<h4 id=’comments’>Comments for this post</h4>
<div id=’comment-frame’ style=’border: medium none ; background: transparent none repeat scroll 0%; display: block; height:750px; width: 98%; margin-bottom: 2px; ‘>
<iframe expr:src=’dataost.addCommentUrl’ frameborder=’0′ height=’100%’ scrolling=’auto’ style=’border:none; background: transparent none repeat scroll 0%; ‘ width=’100%’/>
</div>
</b:if>
</div>

<div id=’backlinks-container’>
<div expr:id=’data:widget.instanceId + “_backlinks-container”‘>
<b:if cond=’dataost.showBacklinks’>
<b:include data=’post’ name=’backlinks’/>
</b:if>
</div>
</div>
</div>
</b:includable>

Ketiga

Temukan kode di bawah ini,

<a class='comment-link' expr:href='dataost.addCommentUrl’ exprnclick=’dataost.addCommentOnclick’>

Ganti dengan kode di bawah ini,

<a expr:href='dataost.url + “#comments”‘>

Tekan Simpan Template atau Save Template untuk menyimpan perubahan yang sudah kalian lakukan.

Catatan:

Tutorial ini telah diuji coba dulu sebelum di-publish di blog ini. Jika kalian menemukan error, silahkan ulangi petunjuk di atas dengan teliti.