Mau kasih Judul agak bingung, tapi kira-kira begini maksudnya, saat ada yang datang berkunjung ke blog kita, entah mereka datang dari mana kemudian memmbuka home maka akan muncul kotak atau boks dari atas menu (home) meluncur kebawah,

Nah, kotak ini ada tombol close-nya, tapi jika pengunjung tidak meng-klik tanda clouse selama 5 detik (bisa diset sesuai keinginan) maka boks tersebut akan menghilang otomatis.

Boks atau kotak ini bisa kita isi macam-macam kode sesuai dengan keinginan misalnya gambar, iklan atau Facebook Fans dll. Kotak atau boks ini bisa kita munculkan di home, atau dipostingan atau keduanya, tinggal kita sesuaikan saja ingin dimunculkan dimana dengan mengatur properti pada HTML.

Ada dua versi pembuatan kotak ini yaitu yang dapat muncul dan menghilang otomatis seperti yang diulis diatas dan ada yang harus menutupnya dengan meng klik tombol close jika ingin menghiangkan boks tersebut. Contohnya seperti gambar dibawah ini


Okey nggak usah basa basi ini kodingnya :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
     <script>
    $(function() {
        $( "#dialog_box" ).dialog({
            modal: true,
   width:400});
    });

 setInterval(function(){AutoClose()},5000);//JQuery UI Dialog box will auto close after 5 seconds.
 function AutoClose()
 {
 $(function() {
 $( "#dialog_box" ).dialog( "close" ).fadeOut(1000);// //Auto Close Dialog Box.
 });
 }
 </script>

<div id="dialog_box" title="Topik pilihan dari admin Oyin">
Letakan disini kode iklannya
</div>

Sampean bisa mengubah tampilan boksnya dari kode CSS, untuk mengubah tampilan boks tentu harus di unduh dulu Cssnya (http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css) lalu diedit dengan notepad sesuai keinginan misalnya diganti warnanya. setelah itu cssnya silahkan di host lagi misalnya di google kode atau dikopikan diatas ]]></b:skin>


 width:400}); 
Adalah lebar kotak bisa disesuaikan dengan gambar atau tulisan. Sedangkan untuk tingginya sudah diset auto.

{AutoClose()},5000);
Adalah waktu yang digunakan untuk menutup secara otomatis 5000 (mili scon) = 5 detik

Huruf hijau adalah isi Boks silahkan sesuaikan sendiri.
Huruf ungu adalah judul Boks, silahkan sesuaikan sendiri.

Catatan :
Tutorial ini berasal dari blog luar (aku lupa catat alamatnya) hehehe.