HALO ! Lama rasanya tak jumpa kawan2 giblog ni . udah berapa bulan ya ?? lama banget dah . Sekarang saya balik bawa berita baru . Menampilkan Facebox sebagai alert / popUp . Postingan sekarang ini sebenarnya dari sebuah pertanyaan pengunjung giblog yg mungkin udah lama tanya baru saya jawab sekarang . (saya lupa nama nya maaf . hehehe..) Kira2 gni deh tanya nya.. "Gimana cara nya buat sebuah alert waktu buka blog tapi dengan tampilan facebox ?" Akhirnya saya tertarik juga untuk mengutak utik nya..
demo facebox alert nya liat disini
untuk cara buat facebox, temen2 bisa liat di sini http://granoblog.blogspot.com/2009/09/menampilkan-gambar-teks-dengan-facebox.html
atau saya bahas lagi sedikit deh..
ini script facebox nya .. masukan di atas tag body..
<script src='http://granoblog.googlecode.com/files/faceboxx.js' type='text/javascript'/>
ini css nya... masukan di tempat css seperti biasa ..
/*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');
}
javascriptnya nih.. taruh dibawah script facebox..
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
lalu html nya..
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>
Kalau membuat facebox dengan mengklik suatu link maka kita akan buat seperti ini
<a href="#info" rel="facebox"<Klik Disini Sob>/a>
sedangkan yang kita bahas disini adalah bagaimana kita tampilkan facebox sebagai ALERT atau pesan selamat datang, caranya kita rubah sedikit javascriptnya yang tadinya seperti ini
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
jadi seperti ini
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox(); $.facebox("#info","facebox",true);
});
})
</script>
selesai deh... kalau semua sudah benar pasti berhasil ko sob...
thanks udah baca yah... comment jangan lupa, thanks juga ke orang yg bertanya tentang ini . saya jadi niat ngeblog lagi . hahaha..
demo facebox alert nya liat disini
DEMO
untuk cara buat facebox, temen2 bisa liat di sini http://granoblog.blogspot.com/2009/09/menampilkan-gambar-teks-dengan-facebox.html
atau saya bahas lagi sedikit deh..
ini script facebox nya .. masukan di atas tag body..
<script src='http://granoblog.googlecode.com/files/faceboxx.js' type='text/javascript'/>
ini css nya... masukan di tempat css seperti biasa ..
/*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');
}
javascriptnya nih.. taruh dibawah script facebox..
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
lalu html nya..
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>
Kalau membuat facebox dengan mengklik suatu link maka kita akan buat seperti ini
<a href="#info" rel="facebox"<Klik Disini Sob>/a>
sedangkan yang kita bahas disini adalah bagaimana kita tampilkan facebox sebagai ALERT atau pesan selamat datang, caranya kita rubah sedikit javascriptnya yang tadinya seperti ini
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
jadi seperti ini
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox(); $.facebox("#info","facebox",true);
});
})
</script>
selesai deh... kalau semua sudah benar pasti berhasil ko sob...
thanks udah baca yah... comment jangan lupa, thanks juga ke orang yg bertanya tentang ini . saya jadi niat ngeblog lagi . hahaha..
.png)
