Cara Memasang jQuery Facebox AutoLoad di blog

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.

Test jQuery Facebox
Klik disini untuk melihat 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://chatfriend.co.cc/js/facebox/b.png)}
#facebox .tl{background:url(http://chatfriend.co.cc/js/facebox/tl.png)}
#facebox .tr{background:url(http://chatfriend.co.cc/js/facebox/tr.png)}
#facebox .bl{background:url(http://chatfriend.co.cc/js/facebox/bl.png)}
#facebox .br{background:url(http://chatfriend.co.cc/js/facebox/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:

<link href='http://chatfriend.co.cc/js/facebox/facebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://chatfriend.co.cc/js/facebox/facebox.js' type='text/javascript'/> 
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(&#39;a[rel*=facebox]&#39;).facebox()
})
</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…

Source Code jQuery Facebox Autoload 
Klik disini untuk mengunduh source code jQuery Facebox Autoload

 Selamat mencoba dan semoga berhasil. Happy Blogging