Cara Membuat Popup Pesan Ramadhan Melayang di Blog

KURAZONE ~ Halo sahabat Kurazer, di bulan Ramadhan ini rasanya kurang lengkap jika blog tidak memiliki pesan ucapan "Selamat Menunaikan Ibadah Puasa". Menampilkan pesan tersebut di blog menandakan bahwa Pemilik blog juga menjalani ibadah puasa serta blog akan terkesan ramah dan terlihat update sesuai event ramadhan yang berlangsung.

Berbicara mengenai pesan ramadhan, kali ini saya bagikan sebuah widget yang digunakan untuk menampilkan pesan ramadhan di blog. Penampakan pesan ramadhan tersebut akan terlihat seperti dibawah ini :

TAMPILAN VIA DESKTOP


TAMPILAN VIA MOBILE


Untuk membuat Pesan Ramadhan tersebut, pastikan dulu bahwa template kalian sudah memiliki 2 amunisi dibawah ini :
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Sekarang waktunya memasang Pesan Ramadhan
1. Buka akun Blogger
2. Masuk ke Menu Tata Letak >> Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy 1 paket CSS, HTML dan JavaScript dibawah ini :
<div id='kurapuasa'>
<a class='kurapenutup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='kurapesanz'>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='kuraromadhon'>Ramadhan 1440 H</span></p>
</div>
<div class='kurapegunungan'></div>
<div class='kurapegunungan behind'></div>
<div class='kuradayz'>
<div class='kuramendung'></div>
<div class='kuramendung invert'></div>
<div class='kurasun'></div>
</div>
<div class='kuramalamhari'>
<div class='kurastars'>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
<div class='kurarbintangs'></div>
</div>
<div class='kurarembulan'></div>
</div>
</div>

<script type="text/javascript">
$(window).bind("load",function(){$("#kurapuasa").animate({top:"25%"},1e3),$("a.kurapenutup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>

<style type="text/css">
/* Kurazone Keyframe Ramadhan */
@keyframes matahari{0%{top:50px}20%{top:-30px}25%{top:-30px}40%{top:50px}}
@keyframes kuraslide{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
@keyframes kuradays{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}
@keyframes kuragantiwarna{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}
@keyframes kurabulan{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
@keyframes kuranight{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}

/* Kurazone Pop Up Ramadhan */
#kurapuasa{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:999;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:kuragantiwarna 5s infinite linear,kuraslide 2s}
#kurapuasa .kurapesanz{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}
#kurapuasa .kurapesanz p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#kurapuasa .kurapesanz .kuraromadhon{font-size:3rem;font-weight:700}
#kurapuasa a.kurapenutup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}
#kurapuasa a.kurapenutup:hover{color:#fff}
#kurapuasa a.kurapenutup:active{opacity:0}
#kurapuasa a.kurapenutup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#kurapuasa a.kurapenutup:hover i{transform:rotate(360deg)}
.kurapegunungan{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.kurapegunungan.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.kuradayz{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:kuradays 5s infinite linear}
.kuradayz .kuramendung{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}
.kuradayz .kuramendung:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}
.kuradayz .kuramendung.invert{top:60px;left:250px}
.kuradayz .kuramendung.invert:before{left:50px}
.kuradayz .kurasun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:matahari 5s infinite linear}
.kuramalamhari{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:kuranight 5s infinite linear}
.kuramalamhari .kurastars .kurarbintangs{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.kuramalamhari .kurastars .kurarbintangs:nth-child(1){top:50px;left:50px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(2){top:200px;left:70px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(3){top:100px;left:300px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(4){top:50px;left:220px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(5){top:160px;left:320px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(6){top:150px;left:230px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(7){top:180px;left:400px}
.kuramalamhari .kurastars .kurarbintangs:nth-child(8){top:50px;left:360px}
.kuramalamhari .kurarembulan{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:kurabulan 5s infinite linear}
@media (max-width:800px){#kurapuasa{top:100px!important;left:10px;right:10px;min-height:250px}#kurapuasa .kurapesanz{font-size:1.1rem;top:0}#kurapuasa .kurapesanz .kuraromadhon{font-size:2.5rem}.kurapegunungan{display:none}.kuradayz,.kurastars,.kuramalamhari .kurarembulan{display:inline}#kurapuasa a.kurapenutup {z-index:999999}}
</style>
5. Paste ke bagian isi Gadget, pada bagian kolom Judul dikosongi saja
6. Simpan Gadget
7. Selesai

Lihat hasilnya...
Jika Ramadhan sudah berakhir, maka tinggal hapus aja Gadget nya. Paham kan maksudnya..? :v Untuk demonya, silakan refresh halaman ini.
Itulah informasi mengenai "Cara Membuat Popup Pesan Ramadhan Melayang di Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!

Sumber : dari berbagai sumber

Selamat Menunaikan Ibadah Puasa

Ramadhan 1440 H









Lebih baru Lebih lama