Cara membuat Dialog Box Dengan jQuery

( By Kang Ismet  )

Kampoeng iLmu2 - Cara membuat Dialog Box Dengan jQuery, Dialog Box Dipasang Diblog Biasanya Untuk Memberikan pesan kepada Pengujung Blog Itu. Kegunaanya Ada yg mengangapnya Sangan Penting dan ada juga tidak ,biasanya di gunakan untuk mengucapkan Hari Raya Idul Fitri ,Ramadhan dll.

Berikut Cara Membuatnya : 

Pertama Kamu Buka Dasbor Blog Kamu !

Kedua Klik TEMPLATE >> EDIT HTML 

Ketiga Cari Kode ]]></b:skin> Lalu Copy Kode CSS Dibawah Pastekan Tepat Diatasnya Kode Tadi :

#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:white;
    background-color:#174a87;
    border:8px solid #0a2e58;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    font:normal 12px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:5px;
    z-index:1000;
}

Keempat Copy Juga Kode CSS Untuk Tombol Close Pemasangannya Sama Diatas :

.close {
    background:#0a2e58;
    color:#d9e0e9;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#041f3e
} 

Kelima Cari </body> lalu Copy Kode CSS Dibawah Dan Pastekan Tepat diatasnya :

<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-box'>
    Selamat Hari Raya Idul Fitri 1435 H Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
</div>

 Nah itulah ,Cara membuat Dialog Box Dengan jQuery ,Semoga Bermanfaat .Baca Juga : CEK PAGE RANK BLOG

Share this :