Formulir Komentar Dengan Efek Wadah iBox

Tips-n-trik blogger hack kali ini akan membahas satu efek iBox yang sebelumnya pernah dibahas, perbedaannya pada artikel sebelumnya Blogger Tune-Up hanya membahas efek iBox untuk Gambar. Pada artikel kali ini kita akan memberikan efek iBox container pada Formulir Komentar (iBox Container for Comment Form). Kerja efek iBox pada form komentar sebenarnya sama dengan efek yang ditampilkan pada gambar, ketika pengunjung meng-klik link komentar maka formulir komentar akan ditampilkan seperti dalam jendela baru dengan wadah iBox. Sedangkan bagian belakang formulir komentar akan ditutup dengan warna hitam transparan. Penasaran ingin mencoba lebih dulu? Silahkan kunjungi blog Kotretan Hendriono dan silahkan coba klik icon komentar, maka formulir komentar akan segera ditampilkan. Jika merasa cocok dengan efek tersebut, silahkan baca tips-n-trik blogger hack dibawah ini...

Sebelum mencoba tips-n-trik blogger hack kali ini, kita harus sudah mencoba 2 artikel berikut:

• Formulir Komentar Di Bawah Posting/Artikel
• Membuat Wadah iBox (iBox Container)

Langkah integrasi efek iBox pada Formulir Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Check "Expand Template Widget"
Langkah 4

Cari kode dibawah ini (kode dibawah ini adalah kode penempatan kotak komentar dibawah artikel):

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

Langkah 5
Tambahkan kode dibawah ini:

<a href='#formibox' rel='ibox&amp;width=505' title='Silahkan tinggalkan komentar anda'><data:postCommentMsg/></a>
<div id='formibox' style='display:none;'>
...
...disini kode pada langkah 4...
...
</div>

Sehingga jika kode dilihat semua setelah penambahan kode iBox efek, akan menjadi seperti dibawah ini:

<a href='#formibox' rel='ibox&amp;width=505' title='Silahkan tinggalkan komentar anda'><data:postCommentMsg/></a>
<div id='formibox' style='display:none;'>
<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>
</div>

Jika malas memasukan kode manual, silahkan timpah (replace) kode pada langkah 4 dengan kode diatas

Langkah 6
Simpan template dan preview blog anda...

Perhatian!

• Efek iBox Container hanya akan bekerja jika kita telah meng-integrasi-kan kode iBox seperti pada artikel "Membuat Wadah iBox (iBox Container)"
• Formulir komentar harus ditempatkan dibawah artikel, baca artikel "Formulir Komentar Di Bawah Posting/Artikel"
• Atur lebar iBox dengan mengatur nilai 505 pada kode width=505 secara manual (lihat kode pada langkah 5 baris 1)
• Jika ingin mengganti link komentar dengan gambar, ubah kode <data:postCommentMsg/> (lihat kode pada langkah 5 baris 1) dengan kode <img src="http://urlgambar/iconkomentar.png"/>

Selamat mencoba dan semoga berhasil. Happy Blogging... :)