Siapa sih yang gak kenal Facebook? Jejaring Sosial buatan Mark Zuckernberg yang paling diminati saat ini.
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!
#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');
}
Untuk membuat pop up, pertama kita harus bikin wadah pop upnya terlebih dahulu
Kodenya
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
Contohnya
Coba Klik Disini
Selain cara diatas, pemasangan pop up ini bisa bervariasi sesuai kebutuhannya!
Untuk popup halaman iframe
Mudah kan? Silahkan berkomentar!
Hebat! Aku sendiri cukup terkesan dengan trik ini hingga akhirnya aku pasang permanen di blog ini (gak cuma diposting ini doank)
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 .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!
Untuk membuat pop up, pertama kita harus bikin wadah pop upnya terlebih dahulu
Kodenya
<div id="info" style="display:none;">Kode hijau silahkan ganti sesuai keinginan
Isi tulisan atau kode yang ingin ditampilkan dalam pop up
</div>
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
<a href="Alamat Tujuan" rel="facebox">Klik Disini Sob</a>Contohnya seperti ini Coba Klik Disini
Mudah kan? Silahkan berkomentar!
Hebat! Aku sendiri cukup terkesan dengan trik ini hingga akhirnya aku pasang permanen di blog ini (gak cuma diposting ini doank)
1 komentar:
Leave a Reply