Selamat hari raya Idul Fitri 1440 H, taqabalallahu minna wa minkum, minal aidin wal faidzin, mohon maaf lahir dan batin
Buat kawan-kawan blogger yang sedang mencari tutorial ini, silahkan langsung di simak aja ya.
Sebelumnya, kawan bisa cek dulu demonya di bawah ini.
*Ada masalah dengan link demo di atas? coba opsi lain, lihat demo dengan klik menu Home dari blog ini.
1. Buka menu Edit HTML blogger.
2, Letakkan kode CSS di bawah ini di atas /head atau di bawah /style. Guna lebih cepat pakailah Ctrl+ F.
Kode CSS
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:100;min-height:325px;padding:20px;border-radius:10px;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:slideDown 1s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#e74c3c;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#c0392b;color:#fff}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}#hiding{background:#d54738;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#c0392b;color:#fff}.matilampu{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:99;animation:zoomIn 1s}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>
3. Letakkan kode JS di bawah ini tepat di atas /body. Guna lebih cepat pakailah Ctrl+ F.
Kode JS
<b:if cond='data:view.isHomepage'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
<p>Selamat Merayakan Hari Raya</p>
<p><span class='ramadhan2019'>Idul Fitri 1440 H</span></p>
<p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>
Kata-katanya dapat anda sesuaikan atau menambahkan baris lagi dengan format seperti ini.
<p>Tulis teks di sini</p>
Atur pula kode CSS jika kurang pas setelah nambahin baris. Salah satunya dengan mengurangi angka pada kode line-height:1.55 untuk mengurangi jarak antar kalimat.
4. Simpan perubahan template dengan klik Simpan (Save). Lihat hasilnya di blog.
Kode CSS dan JS di atas merupakan modifikasi dari kode CSS dan JS Arlina Design. Kawan bisa lihat di atas masih ada tema-tema puasanya kan. Lihat aja ID nya masih arlinapuasa2019ku. Silahkan ganti sendiri ID nya jika kawan mau.
Itulah cara membuat Pesan Popup Melayang Selamat Hari Raya Idul Fitri 1440 H. Semoga bermanfaat.
*preview/demo hanya tersedia di waktu tertentu
#Sumber code: https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html