Wow! Lagi lagi saya akan membahas widget yang ada hubungannya dengan Facebook. Widget yang akan saya bahas kali ini adalah lightbox blogger yang bergaya Facebook, namanya Facebox. Facebox dibuat oleh Famspam.com dan dipublikasikan oleh Dynamic Drive. Jika kita meng-klik link atau foto maka akan muncul pop-up box. Sebagai contoh, coba anda klik link Contact Me pada bagian TopNavBar blog saya ini. Muncul pop-up box seperti yang ada di Facebook kan? Mau tau cara membuatnya?

Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang Facebox:

Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Nha, sekarang mari kita langsung pada pokok permasalahan...

Berikut Cara Memasang Facebox:

1. Login ke akun Blogger anda

2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </body>, lalu paste kode berikut di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/tbz-facebox.js' type='text/javascript'/>

<script type='text/Javascript'>
function togglediv (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==&quot;divshown&quot;) { whichpost.className=&quot;divhidden&quot;; } else { whichpost.className=&quot;divshown&quot;; }
}
</script>

<script type='text/Javascript'>
function showhide(id) {
var elem = document.getElementById(id);
if (elem.style.display==&quot;none&quot;) elem.style.display = &quot;block&quot;;
else elem.style.display = &quot;none&quot;;}
</script>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$(&#39;a[rel*=facebox]&#39;).facebox()
})
</script>

4. Selanjutnya cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:

.thickstyle{background: silver;}
#facebox .b { background:url(http://tipsbloggerzacky.googlecode.com/files/b.png);}
#facebox .tl { background:url(http://tipsbloggerzacky.googlecode.com/files/tl.png);}
#facebox .tr { background:url(http://tipsbloggerzacky.googlecode.com/files/tr.png);}
#facebox .bl { background:url(http://tipsbloggerzacky.googlecode.com/files/bl.png);}
#facebox .br { background:url(http://tipsbloggerzacky.googlecode.com/files/br.png);}
#facebox { position: absolute;width:100%;top:0;left: 0;z-index: 100;text-align: left;}
#facebox .popup { position: relative;}
#facebox table { margin: auto; border-collapse: collapse;}
#facebox .body { padding: 10px; background: #fff; width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px; margin-top: 10px;
text-align: right;}
#facebox .header {padding-top: 0px; margin-top: 0px; text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px; width: 10px;
overflow: hidden;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;}

5. Klik Save Template.

Selesai untuk pemasangan script. Lalu gimana cara menggunakannya di blog?

Tenang, setelah memasang scipt Facebox, maka kita bisa menggunakannya untuk beberapa hal, yaitu:

1. Menampilkan gambar
Kodenya:

<a href="URL-GAMBAR-ANDA" rel="facebox">NAMA LINK</a>

Contoh:

<a href="http://i45.tinypic.com/kbydxv.jpg" rel="facebox">Rock ' Roll..!!</a>

Hasilnya akan seperti ini.

2. Menampilkan tag DIV
Di dalam tag DIV kita bisa memasukkan kode-kode widget, text, pengumuman, contact form, dll. Tag DIV ini harus ditambahkan atribut style="display:none" supaya isinya tidak muncul sebelum kita meng-klik link Facebox.

Kodenya:

<a href='#ID TAG DIV' rel='facebox'>NAMA LINK DIV</a><div id='ID TAG DIV' style='display:none'>ISI TAG DIV</div>

Contoh:


Maka hasilnya akan seperti Contact Me

3. Menampilkan Halaman External Yang Berekstensi .htm dalam server yang sama
Kodenya:

<a href="External.htm" rel="facebox[.thickstyle]">NAMA LINK</a>

Hmm, anda suka widget ini?
Untuk sementara, silahkan coba dulu... Jika anda punya banyak pertanyaan tentang tips ini, maka akan saya jelaskan lebih lanjut pada sesi tanya jawab tentang Facebox. Sesi tanya jawab akan saya buka setelah ada request pertama di komentar postingan ini. Jadi bagi anda yang mau bertanya tentang Facebox sedangkan sesi tanya jawabnya belum ada, silahkan request dulu disini dan langsung buat pertanyaan anda. Pertanyaan harus detail supaya jawabannya sesuai keinginan anda.

Jangan lupa kasih komentar ya...

Ok, salam blogger!!!