Formulir Komentar Dengan Efek Wadah iBox

Labels: •
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...
Formulir Komentar Dengan Efek Wadah iBox
Sebelum mencoba tips-n-trik blogger hack kali ini, kita harus sudah mencoba 2 artikel berikut:

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