Untuk pemasangannya
sendiri sobat lihat step by step di bawah ini.
1. login
ke blogger sobat
2. klik
template >> Edit HTML
3. cari
kode ]]></b:skin> dengan bantuan Ctrl+f dan terapkan kode CSS dibawah
ini tepat diatasnya.
/* Kotak Dialog Box */
.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: "Irvan Efendy";
position: relative;
float: right;
}
.close:after {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1nUJVpWsMuStzWyu4gF3YCH16dF7dfiIJefULYiaVLyjYcZbArBKW5cdpDei2tFrS571arRrBmslVYQhv5cM1ffiIfFc8BVBiH5-qdnLwjiZz18G-4PQKUIcsKzM93wv1MJsaQpCh1k/s1600/delete4.png');
position: absolute;
top: -10px;
right: -10px;
background: #ecf0f1;
border-radius: 100%;
padding: 10px;
z-index: 1000;
cursor: pointer;
}
4. Cari
kode </body> dengan bantuan Ctrl+F dan letakan script tepat diatas kode
</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>
Kemudian simpan
template
Dan berikut
penerapan dalam blog:
Supaya dialog
box ini muncul diblog sobat, silahkan pasang kode HTML di bawah ini di widget
blog sobat:
<button class='info'>Info</button>
<div class='box'>
<div class='pesan'>
Selamat datang di Blog sederhana SAMBLOG. Ini adalah contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan amati tutorialnya dengan seksama.<br />
<span class='ttd'></span>
</div>
<div class='close'></div>
</div>
Terakhir simpan
template
Semoga bermanfaat
2 komentar