ALoKi Blogger's: Membuat "Facebox" Pop Up Bergaya Facebook (JQuery)

Membuat "Facebox" Pop Up Bergaya Facebook (JQuery)

Facebook memiliki tampilan web yang cukup khas dengan warna putih biru, dan salah satu ciri paling unik dari Facebook adalah tampilan pop up yang minimalis tapi menarik.
Popup ini tentunya memberi PR tersendiri bagiku untuk mengetahui cara pembuatannya.
Caranya Simple kok!

Login dulu ke akun Blogger kamu
Masuk ke menu "rancangan" pilih submenu "edit HTML"
Copy kode CSS dan seperti biasa dipaste diatas ]]></b:skin>

/*Facebox*/
#facebox .b {
background:url(http://i31.tinypic.com/2dreyva.jpg);
}
#facebox .tl {
background:url(http://i32.tinypic.com/ta3p53.jpg);
}
#facebox .tr {
background:url(http://i28.tinypic.com/2wf639t.jpg);
}
#facebox .bl {
background:url(http://i27.tinypic.com/ea1o1x.jpg);
}
#facebox .br {
background:url(http://i26.tinypic.com/20fcisk.jpg);
}

#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}

#facebox .popup {
position: relative;
}

#facebox table {
border-collapse: collapse;
}

#facebox td {
border-bottom: 0;
padding: 0;
}

#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');
}

Pasang script JQuery di bawah ini dengan mempastenya diatas

<script src='http://mangetsu.googlecode.com/files/faceboxx.js' type='text/javascript'/>

Copy lagi script ini dan paste dibawah kode JQuery tadi

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

Simpan Template!

Mana? Kok gak terjadi apa-apa? Sabar dunk! Pasang link popupnya aja belum!
Untuk membuat pop up, pertama kita harus bikin wadah pop upnya terlebih dahulu
Kodenya

<div id="info" style="display:none;">
Isi tulisan atau kode yang ingin ditampilkan dalam pop up
</div>

Kode hijau silahkan ganti sesuai keinginan
Kode tadi bisa dipaste di bawah <body>
Atau bisa juga ditambahkan ke gadget seperti biasa
Lalu tinggal membuat link supaya pop up muncul jika diklik kodenya

<a href="#info" rel="facebox">Klik Disini Sob</a>

Lihat kode warna merah harus disamakan dengan id="info" pada pop up yang ingin dimunculkan
Contohnya
Coba Klik Disini
Selain cara diatas, pemasangan pop up ini bisa bervariasi sesuai kebutuhannya!
Untuk popup halaman iframe