Metode Sederhana Membuat Dialog Box Keren

Gambar hanya Pemanis :)

Metode Sederhana Membuat Dialog Box Keren - Dialog Box adalah salah satu widget yang bisa kita gunakan untuk menampilkan pesan kepada para pengunjung blog kita. Artikel kali ini saya buat untuk anda yang ingin menampilkan pesan tertentu atau hanya ingin menyapa pengunjung blog anda dengan sebuah pesan.

Pada artikel sebelumnya saya juga pernah membuat tutorial tentang Bagaimana Cara Menampilkan Pesan pada Jam Tertentu. untuk anda yang mungkin belum membacanya saya saran untuk membacanya juga untuk menambah pengetahuan anda. :)

Baiklah, untuk menghemat waktu :v untuk anda yang sudah tidak sabar ingin mencoba tutorial kali ini, Bisa ikuti langkah-langkah dibawah ini :

1. Masuk ke Akun Blogger anda
2. Pilih Template > Edit HTML
3. Copy Kode CSS berikut dan simpan di atas tag ]]></b:skin>

 .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: "Mgs Rama Dony";
  position: relative;
  float: right;
}
.close:after {
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQs9aCF6Dzxvb36n0RwZdNH4JGyB605bWz0P77uNX4QXJqHHEdXCTq36E82ETbsMG-A8JSFxOIBokEejECkvR0DwIPrXz7XtypAk5BL84jLH_dJ_rkR8oNd-XLp9XJ0lByCgiSf64rEvw/s1600/delete4.png');
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ecf0f1;
  border-radius: 100%;
  padding: 10px;
  z-index: 1000;
  cursor: pointer;
} 

Note! untuk content: "Mgs Rama Dony"; bisa anda ganti dengan nama anda atau Author blog.

4. Lalu Copy kode jQuery berikut dan letakkan diatas tag </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> 

5. Simpan Template

6. Setelah itu, buat kode HTML yang nantinya di tambahkan dengan tombol pemanggil yang berfungsi untuk membuka Dialog Box tersebut.

 <button class='info'>Info</button>
<div class='box'>
  <div class='pesan'>
Selamat datang di Blog Semua Tutorialku. 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> 

Note! Untuk isi pesan bisa anda sesuaikan sesuka hati anda. :)

7. Selesai, anda dapat melihat hasilnya.

Metode Sederhana Membuat Dialog Box Keren - Bagaimana? mudah bukan cara membuat dan penerapan tutorial kita kali ini, namun jika anda masih bingung atau memiliki sebuah pertanyaan silahkan ajukan dikotak kometar dibawah ini. Semoga bermanfaat, dan Sampai jumpa. :)