Cara Membuat Popup Pesan Ramadhan Melayang di Blog

Pilihan Editor :

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




BACA JUGA ARTIKEL MENARIK LAINNYA:

2 komentar :

  1. Keren nie...tapi kok ilangnya agak lama..harus diklik beberapa kali si 🤔

    BalasHapus
    Balasan
    1. Ya begitulah.. Melatih kesabaran 😹

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.