Membuat Wadah iBox (iBox Container)

Efek yang satu ini lebih universal, maksudnya bisa digunakan untuk berbagai keperluan tidak terbatas hanya untuk menampilkan efek pada gambar. Berbeda dengan efek-efek sebelumnya yang pernah Blogger Tune-Up bahasa, seperti; efek Magnify, efek FancyZoom, efek Zoom, dan efek LightBox yang hanya terfokus untuk memberikan efek pada gambar (image effect). Makanya efek ini disebut iBox Container oleh iBegin Labs Project sebagai developernya.

Blogger Tune-Up telah mencobanya di Kotretan Hendriono dan hanya digunakan untuk memberikan efek pada gambar, jika ingin melihat previewnya sebelum mencoba memasangnya pada blog. Wadah iBox dapat diterapkan untuk berbagai keperluan, diantaranya:

• Memberikan efek pada gambar
• Memanggil sekaligus wadah document lain (Loading External File HTML dengan AJAX)
• Wadah Vidoe YouTube

Efek iBox Container

Langkah integrasi iBox Container pada Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"

Tata Letak - Edit HTML

Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='http://www.ibegin.com/labs/ibox/ibox/ibox.js' type='text/javascript'/>
<script type='text/javascript'>iBox.setPath(&#39;http://www.ibegin.com/labs/ibox/ibox/&#39;);</script>

Langkah 5
Simpan template...

Modifikasi kode gambar pada artikel
Langkah A
Upload sebuah gambar pada artikel
Langkah B
Edit kode gambar melalui mode Edit HTML

Mode Edit HTML

Langkah C
Cari dan perhatikan kode dibawah ini (utamakan kode dengan warna biru):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600-h/SampleUserLicense.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>

Langkah D

Tambahkan kode iBox Container seperti dibawah ini (kode warna biru):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600-h/SampleUserLicense.jpg" rel="ibox" title="Keterangan Gambar"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>

Jika gambar tidak mampu diload buang kode -h pada kode gambar, sehingga kode menjadi seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600/SampleUserLicense.jpg" rel="ibox" title="Keterangan Gambar"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>

Kode -h dan Kode iBox

Langkah E
Terbitkan artikel...

Keterangan:

Jika ingin mengenal lebih jauh mengenai fungsi iBox Container silahkan kunjungi iBegin Labs Project dan khusus untuk mempelajari iBox Container silahkan download disini.

Selamat mencoba dan semoga berhasil. Silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)