jQuery Facebox AutoLoad - Facebox Otomatis Tampil

Beberapa pertanyaan masuk ke inbox dan komentar yang menanyakan tentang plugin Facebox. (Ma'af untuk yang belum mendapat tanggapan bukan berarti tidak ditanggapi tapi belum tertanggapi atau belum ditemukan jalan keluarnya. Mohon bersabar ya?). Plugin Facebox selain digunakan sebagai container/wadah gambar sebenarnya bisa digunakan sebagai container hal lain, seperti ajax, html, dan hal lainnya.

Dapat pula difungsikan sebagai alert (pemberitahuan)/warning (perhatian)/ads popup (iklan popup) yang tampil secara otomatis ketika pengunjung masuk kedalam halaman blog kita. Sebenarnya teknik penggunaan plugin Facebox hampir sama saja dengan artikel yang pernah di bahas disini. Sedangkan sekarang kita akan mencoba melakukan modifikasi pada script Facebox agar mampu autoload/autoshow tanpa klik ketika pengunjung membuka halaman blog kita.

Demo jQuery Facebox Autoload

Integrasi Plugin Facebox pada template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

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

#facebox .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#facebox .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#facebox .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#facebox .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#facebox .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#facebox {position: absolute;top: 0;left: 0;z-index: 99999999;text-align: left;}
#facebox .popup {position: relative;}
#facebox table {border-collapse: collapse;}
#facebox td {border-bottom: 0;padding: 0;text-align:justify;}
#facebox .body {padding: 10px;background: #fff;width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;margin: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px;margin-top: 10px;text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px;width: 10px;overflow: hidden;padding: 0;}
#facebox_overlay {position: fixed;top: 0px;left: 0px;height:100%;width:100%;}
.facebox_hide {z-index:-100;}
.facebox_overlayBG {background-color: #000;z-index: 99;}
* html #facebox_overlay { /* ie6 hack */position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 5:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
$.facebox('#informasi','facebox',true);
});
</script>

Bagi yang sudah memasang framework jQuery maka tidak perlu memasangnya lagi
Langkah 7
Simpan template...

Membuat Alert/Warning/Ads Popup dengan Facebox

Setelah integrasi plugin Facebox pada template Blogger selesai, lanjutkan membuat alert/warning/ads popup seperti dibawah ini:

Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<div id="informasi" style="display:none;">
<!-- Masukan isi pemberitahuan/pengumuman/perhatian/kode iklan disini -->
</div>

Langkah 10
Simpan template dan preview blog anda...

Unduh jQuery Facebox Autoload

Sedangkan untuk settingan Facebox pada gambar silahkan baca artikel "Pratinjau Gambar dengan Efek jQuery Facebox" pada bagian "Setting Efek jQuery Facebox pada Artikel". Selamat mencoba dan semoga berhasil. Happy Blogging :)