Membuat facebox alert / onload seperti di Facebook


Postingan sekarang ini sebenarnya dari sebuah pertanyaan pengunjung Selalu Ada Untukmu | http://www.aku-disini-unutkmu.co.cc yg mungkin udah lama tanya baru saya jawab sekarang . (saya lupa nama nya maaf . hehehe..) Kira-kira berikut pertanyaan nya.. “Gimana cara nya buat sebuah alert waktu buka blog tapi dengan tampilan facebox ?” Akhirnya saya tertarik juga untuk mengutak-atik nya..

DEMO

facebox alert nya liat bagian atas blog ini, cari kalimat (ChatBox)

atau saya bahas lagi sedikit deh..

ini script facebox nya .. masukan di atas tag </body>..

<script src=’http://granoblog.googlecode.com/files/faceboxx.js&#8217; 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


Klik Disini Sob

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…
trima kasih sudah baca artikel saya… comment jangan lupa dan trima kasih juga kepada orang yg bertanya tentang ini . saya jadi niat utak-atik source code facebook lagi . hahaha.. (Q’pedia)

Iklan