Seocips.com - Baiklah kawan mungkin tutorial cara membuat dialog box ini sudah tidak asing lagi untuk anda karena sudah banyak dibahas dibanyak website. Dialog box ini juga banyak digunakan di template-template diluar sana untuk menampilkan info disatu blog. jadi ketika tobol infonya di klik maka dialog box ini akan muncul.

Cara Membuat Kotak Dialog

Sebelumnya juga seocips telah membagikan tentang cara membuat tombol demo dan download efek slide di blog. Membuat Dialog Box sederhana ini memang sangat mudah untuk anda yang memahami tentang CSS, HTML dan jQuery. Untuk Demonya sobat dapat menekan tombol info dibawah ini:



Selamat datang di Blog Seocips. Ini hanya contoh dialog box sederhana dengan jQuery. Anda Disini di Ijinkan untuk mengutip sebagian tulisan di blog ini tetapi tidak boleh seluruhnya dengan menyebutkan link dan sumber. Apabila ditemukan coppis seluruh artikel akan diajukan ke MIB atau dihapus dari Bloler. Buat sahabat Blog seocips yang merasa mencopis Artikel silahkan sertakan sumbernya. Sebelum anda mendapat PERINGATAN dari Wilsmot...

Terima Kasih


Membuat Kotak Dialog Di Blog

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
.box { width:600px; height:200px; background-color:#2c3e50; border-radius:5px; position:absolute; left:50%; margin-top:-150px; margin-left:-300px; top:-9999px; z-index:1000; box-shadow:0 1px 1px rgba(0,0,0,0.4) inset,0 1px 0 rgba(255,255,255,0.2); }
.box .pesan { position:absolute; top:30px; right:10px; bottom:10px; left:10px; padding:5px 10px; overflow:auto; background-color:#1abc9c; color:#fff; text-align:left; line-height:1.5em; font-size:14px; border-radius:0 0 5px 5px; }
.pesan .ttd:after { content:"SEOCIPS.COM"; position:relative; float:right; }
.close:after { content:url('http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png'); position:absolute; top:-10px; right:-10px; background:#ecf0f1; border-radius:100%; padding:10px; z-index:1000; cursor:pointer; }
5. selanjutnya Tekan Ctrl+F cari kode </body> Lalu masukan script di bawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
//tampilkan kotak dialog saat muncul dengan class info
    $('.info').click(function () {
        $('.info').hide();
        $('.box').css({top: '50%',position: 'fixed'})
        $('body').css({background: '#123',transition: 'all 5s'}) //efect body berubah warna
    });
//sembunyikan kotak dialog dengan class close
    $('.close').click(function () {
        $('.box').hide()
        $('body').css({background: '#ecf0f1',transition: 'all 5s'}) //efect body berubah warna
    })
});
//]]>
</script>
Simpan template anda. 
Supaya kotak dialog box diatas muncul blog sobat, Silahkan masukan kode HTML berikut ini kedalam widget blog atau di tempat yang sobat inginkan.
<button class='info'>Info</button>
<div class='box'>
  <div class='pesan'>
Selamat datang di www.seocips.com . Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan pahami sedikit demi sedikit, jangan terburu-buru.<br />
 <span class='ttd'></span>
  </div>
<div class='close'></div>
</div>
Selesai. Oh iya cara membuatnya agar lebih lengkap dan mudah dipahami, silahkan cek di blognya KANGISMET. Ok sekian dan selamat mencoba.
0 Komentar untuk "Cara Membuat Kotak Dialog Dengan Tombol Di Blog"