Buat Kotak Info di Blogspot

- November 01, 2015

infoalya.com




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 :


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('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; }


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>

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari