Membuat Kotak Dialog Sederhana dengan jQuery

Membuat Kotak Dialog Sederhana dengan jQuery - kemarin kami menjumpai sebuah postingan di sosial media facebook tentang Bagaimana Cara Membuat Kotak Dialog dengan menggunakan JQuery? banyak sekali yang memberikan solusi namun hasilnya nihil . lalu saya buatkan artikel ini untuk beliau juga  untuk saling belajar bersama tentang cara membuat kotak dialog sederhana dengan jquery . itulah tujuan kami membuat artikel yang satu ini .




Mungkin diluar sana sudah banyak yang membahas tutorial yang semacam ini namun ada juga yang ribet bikin tutorial tapi tenang saja sobat ,Disini saya akan menjelaskan step by step cara pembuatannya. Untuk membuat kotak dialog yang berbeda dengan tutorial ini, setidaknya harus memahami tentang CSS, HTML dan jQuery (akan tetapi kalau pemula tidak juga tidak apa-apa ).

Dibawah ini adalah step by step Membuat Kotak Dialog Sederhana dengan jQuery , silahkan anda  simak baik-baik :

1. Login ke Blogger
2. Pilih Blog yang akan ditambahkan Kotak Dialog
3. Pada menu sebelah kiri, klik Template> Edit Template > tekan CTRL+F Lalu cari kode ]]></b:skin> atau </style> 
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> 

/* Kotak Dialog Box */<br /> .box {<br /> width: 600px;<br /> height: 200px;<br /> background-color: #2c3e50;<br /> border-radius: 5px;<br /> position: absolute;<br /> left: 50%;<br /> margin-top: -150px;<br /> margin-left: -300px;<br /> top: -9999px;<br /> z-index: 1000;<br /> box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);<br /> }<br /> .box .pesan {<br /> position: absolute;<br /> top: 30px;<br /> right: 10px;<br /> bottom: 10px;<br /> left: 10px;<br /> padding: 5px 10px;<br /> overflow: auto;<br /> background-color: #1abc9c;<br /> color: #fff;<br /> text-align: left;<br /> line-height: 1.5em;<br /> font-size: 14px;<br /> border-radius: 0 0 5px 5px;<br /> }<br /> .pesan .ttd:after {<br /> content: "Kang DeNsuz";<br /> position: relative;<br /> float: right;<br /> }<br /> .close:after {<br /> content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieuiza3IAJva-UiwJrSQEMjOqZurEM5d9Ztde-iUhyadbUIQiBA7TzVs9DBtBHrmk4VwdYLCCxuHuBq7p7ASb6JgAk2-3tJyhEdKb_hX8PCXxGzDCIL9IAEz-MuMHrVcYRDwwdktue6RM/s1600/delete4.png');<br /> position: absolute;<br /> top: -10px;<br /> right: -10px;<br /> background: #ecf0f1;<br /> border-radius: 100%;<br /> padding: 10px;<br /> z-index: 1000;<br /> cursor: pointer;<br /> }

       5. 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>

         6. Kemudian simpan template anda .

Note: Supaya kotak dialog box diatas muncul di blog anda» Silahkan anda masukan kode HTML berikut ini kedalam widget blog sobat.

( tata letak >> add widget >> HTML/JAVA SCRIPT )

Dibawah ini adalah kode pemanggilnya :

<button class='info'>Info</button><br /> <div class='box'> <div class='pesan'> <b>Selamat datang di Blog Kang DeNsuz. Tempatnya Berbagi Tutorial ,Widget Blogger Free template blogger responsive dan lain-lain . Untuk membuatnya, Anda boleh menyalin artikel dalam blog ini, dengan cara bagaimanapun, untuk tujuan apapun selama tidak melanggar hukum. Jangan cuma disimpan, sebar luaskan apa yang telah Anda salin. Jika hendak menerbitkan atas nama Anda sendiri, gantilah redaksinya. Jika malas, sertakan tautan ke sini agar Anda bisa melempar tanggungjawab bila terjadi sesuatu nanti.</b><br /> <br /> <span class='ttd'></span><br /> </div> <div class='close'> </div> </div>

Screenshoot ilustrasi

Keterangan:

=========================================
1. Silahkan anda Ganti kalimat yang sesuai kebutuhan anda .
=========================================
Example : *\\ Selamat datang di Blog Kang DeNsuz. \\
=========================================


Demikian artikel mengenai Membuat Kotak Dialog Sederhana dengan jQuery  apabila ada terdapat kesalahan pada artikel ini kami mohon maaf , semoga bermanfaat . Sekian dan terima kasih .

Tweet