Buat Kotak Info di Blogspot

Buat Kotak Info di Blogspot

Buat Kotak Info di Blogspot

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('https://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 On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×