Senin, 27 Juni 2011
Integrasi MultiBox di Blogger
MultiBox adalah sebuah aplikasi lightbox sebagai penampil konten seperti gambar, mp3, video, html, ajax, frame, dan lain-lain. yang dapat membuat blog anda terlihat menarik dan dinamis. Aplikasi MultiBox ini, tidak menggunakan Jquery melainkan MooTools.Oeminfo sendiri masih awam soal Jquery. tapi hasil penelusuran di google dengan keyword "jquery vs javascript" Untuk info tentang Jquery dan MooTools Oeminfo menemukan artikelnya disini, ataupun tentang Prototype v.s. jQuery disini.
Bagaimana Memasang/Mengintegrasikan MultiBox di Template Blogger ?
Langkahnya adalah sebagi berikut :
Pertama
- Login ke Blogger
- di Dashboard kita langsung ke Rancangan atau Design Lalu pilih Edit HTML
- Cari kode </head>
- Letakan kode MultiBox di bawah ini, diatas kode </head>
<link href="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/multibox.css" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/mootools.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/overlay.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/multibox.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/mootools.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/overlay.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/multibox.js" type="text/javascript"></script>
- Cari kode </body>
- Letakan kode JS di bawah ini, diatas kode </body>
<script type=”text/javascript”>
var box = {};
window.addEvent(‘domready’, function(){box = new MultiBox(‘mb’, {descClassName: ‘multiBoxDesc’, useOverlay: true}); });
</script>
- Simpan Templatevar box = {};
window.addEvent(‘domready’, function(){box = new MultiBox(‘mb’, {descClassName: ‘multiBoxDesc’, useOverlay: true}); });
</script>
Sampai tahap ini anda telah berhasil memasang MultiBox di Blogger.
Untuk menerapkan pada postingan, cobalah buat sebuah postingan, terus upload sebuah gambar.
tambah kan :
id="mb1" class="mb" title="Image Title"
lihat gambar.tambahkan kode di bawah untuk memberikan deskripsi gambar:
<div style="display: none;" class="multiBoxDesc mb1">This is my descrition text 1. It can support html.</div>
sehingga tampak seperti pada gambar dibawah :Terakhir Pratinjau hasil kerjanya, jika sudah benar maka Publish atau Terbitkan Entri
Untuk Demonya bisa di lihat disini atau di Blog Oemar yang www.oem4r.co.cc, Oemar pake MultiBox ini untuk penampil gambar dan Widget ChatBox atau buku tamu.
Dowload MultiBox
Source : virtuosomaster
Langganan:
Posting Komentar (Atom)
wow nice tips sobat terima kasih sudah share di sini
BalasHapusseeep... sama2 sob. just share. and thank kunjungan dan komentarnya. :D
BalasHapus