Cara membuat "Dialog Box" dengan tombol "Info" di Blogger

HaiSob apa kabar 😀? Ok sobat mungkin tutorial cara membuat Dialog Box ini sudah tidak asing lagi, karena sudah banyak dibahas dibanyak Blog maupun Website.

Dialog Box ini sudah banyak digunakan di blog-blog diluar sana untuk menampilkan info atau pengumuman di blog tersebut. Ketika tobol infonya di klik maka dialog box ini akan muncul.

Membuat Dialog Box sederhana ini memang sangat mudah untuk kamu yang sudah biasa utak atik template. Tapi bagi kamu yang baru belajar juga pasti bisa membuat dialog box ini.  Disini saya akan bagikan cara membuatnya, mungkin saja ada diantara kamu yang ingin mencobanya di blog.

Dialog Box


Dialog Box
Dialog Box


Membuat Dialog Box Di Blogger


1. Di Blog Bloger 😊
2. Pilih menu Template ➔ Edit HTML
Cara membuat "Dialog Box" dengan Tombol "Info" di Blogger
Template - Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </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; }

4. Letakan script di bawah ini di atas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<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. Hapus script kode jQuery warna hijau diatas jika sudah ada, atau sejenis atau ganti dengan jQuery terbaru.
6. Save template.
7. Supaya kotak dialog box diatas muncul blog sobat, Silahkan masukan kode 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.haisob.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>
8. Ganti tulisan warna kuning diatas dengan pesan yang ingin sobat sampaikan.

Selesai. Ok sekian dan selamat mencoba.
Join This Site