Facebox, Blogger Lightbox ala Facebook

Kalau sebelumnya telah dibahas tentang litebox, maka kali ini saya akan menjelaskan 'Bagaimana cara' memasang Lightbox 'facebox' pada blogger.

Seperti apa sih lightbox itu?
Jika kita meng-klik link atau foto maka akan muncul pop-up box. Sebagai contoh klik aja link berikut ...

Click

Gimana, penasaran khan! 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.

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://154h.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://154h.googlecode.com/files/154h-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:

/*Facebox*/
.thickstyle{background: silver;}
#facebox .b {
background:url(http://154h.googlecode.com/files/b.png);
}

#facebox .tl {
background:url(http://154h.googlecode.com/files/tl.png);
}

#facebox .tr {
background:url(http://154h.googlecode.com/files/tr.png);
}

#facebox .bl {
background:url(http://154h.googlecode.com/files/bl.png);
}

#facebox .br {
background:url(http://154h.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 mengeksekusinya di blog?


1. Menampilkan gambar
Kodenya:

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

Contoh:

<a href="http://lh3.ggpht.com/_ytCvkG2LFAg/TO9sYt0JepI/AAAAAAAAAPg/35W0UmvnSA8/MenujuTKPbesar.gif" rel="facebox">Menuju TKP ....</a>

Hasilnya seperti ini Menuju TKP ....

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 :

<a href='#oneday' rel='facebox'>OST.OP - One Day</a><div id='oneday' style='display:none'>
<object width="400" height="224" ><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://www.facebook.com/v/1452352705014" /><embed src="http://www.facebook.com/v/1452352705014" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224"></embed></object>
</div>

Hasilnya seperti ini OST.OP - One Day

Untuk mengganti "Brought to you by 154h" silahkan rubah javascripnya http://154h.googlecode.com/files/154h-facebox.js sesuai keinginan dan upload di tempat hostingan masing2, recomendasi di googlecode atau megabyte.

Sekian ilmu yg didapat hari ini, semoga bermanfaat ^^