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 gue 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
Baca juga: Font desain keren untuk bulan ramadhan
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
sekian postingan kali ini
semoga bermanfaat
0 comments:
Post a Comment