Puasa sebentar lagi, beberapa orang memberikan ucapan selamat puasa, ntah itu di sosial media, di sms, atau di blog, beberapa blog biasa nya memberikan pesan singkat "Marhaban ya Ramadhan, Selamat Menunaikan Ibadah Puasa" untuk menyambut bulan yang penuh suci ini
Kali ini saya akan memberikan tutorial, cara membuat pesan dengan modal box, yang akan menghiasi blog kalian di bulan ramadhan, di dalam nya bisa kita isi text apa saja, dan dengan tombol close
Berikut cara memasang nya
1. Letakkan css di bawah ini di atas kode ]]><b:skin
#pesanmodal{background:#8dbb90;position:fixed;width:30%;height:17%;z-index:109;text-align:center;margin:auto;padding:30px;border:10px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15);top:0;left:0;bottom:0;right:0;border-radius:6px;}
#pesanmodal p{color:#fff;font-size:130%;line-height:1.6em;margin:-5px 0 35px}
.pesanclick {
color: #fff;
background: transparent;
border: 1px solid #fff;
border-radius: 3px;
padding: 8px 10px;
text-align: center;
margin: auto;
cursor: pointer;
display: inline-block;
transition: all .3s;
margin-top: -10px;
}
.pesanclick:hover{color:#6f9771;background:#fff}
#pesanoverlay {
position: fixed!important;
position: absolute;
z-index: 108;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.69);
}2. Lalu letakkan kode di bawah ini di bawah kode <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pesanoverlay'/>
<div id='pesanmodal'>
<p>Zynation mengucapkan<br/>
Marhaban ya ramadhan,selamat menunaikan ibadah puasa :)</p>
<div class='pesanclick' onclick='document.getElementById("pesanmodal").style.display="none";pesanoverlay.style.display="none";'>Close</div>
</div>
</b:if>Kata kata nya silahkan di ganti sesuka kalian
Sekarang pesan nya akan muncul di blog kalian
Semoga bermanfaat
0 Comments
Posting Komentar
Ayo berkomentar sesuai dengan topik pembahasan.