Buat Kotak Info di Blogspot

Assalamu'alaikum, kali ini admin info alya.com akan berbagi sedikit mengenai langkah membuat kotak info di blogger, atau biasa disebut dengan dialog box. Berikut cara membuatnya :

DEMO

Masuk ke template editor, temukan ]]></b:skin> atau </style> kopi tempel CSS berikut tepat diatasnya

.box { width:600px; height:200px; background-color:#BDBDBD; 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:#FFFFFF; color:#000000; text-align:left; line-height:1.5em; font-size:14px; border-radius:0 0 5px 5px; }
.pesan .ttd:after { content:".: INFOALYA.COM :."; position:relative; float:right; }
.close:after { content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ub2VUsLwqyNRsz9SbWe2zISnsL6SEqluetuSa7KbmL67P0MaxC1BParrWysvgCH6DdQH2XzXlzTgbtXe_bMxkuJYqRY3-Z1XK0YWFYFeqbYfUTxTQDHX1ZYzPldXUp6lPtbnNv7EyTc/s1600/delete4.png'); position:absolute; top:-10px; right:-10px; background:#ecf0f1; border-radius:100%; padding:10px; z-index:1000; cursor:pointer; }

Selanjutnya letakkan script berikut ini diatas tag </body> jika selesai simpan template.

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

Untuk memanggil dialog boxnya gunakan HTML berikut ini

<button class='info'>Info</button>
<div class='box'>
  <div class='pesan'>
Selamat datang di www.infoalya.com . Ini contoh dialog box sederhana dengan jQuery.<br />
 <span class='ttd'></span>
  </div>
<div class='close'></div>
</div>

Buat Kotak Info di Blogspot

Contact Form