Cara Membuat Popup Pesan Ramadhan Melayang di Blog - Part #2

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan yang lalu saya sudah bagikan tentang Cara Membuat Popup Pesan Ramadhan Melayang di Blog, nah di post kali ini saya publikasi lagi artikel yang hampir sama namun dengan hasil yang berbeda. Untuk Popup Pesan Ramadhan dibagian ke-2 ini memiliki tampilan popup sebagai berikut :

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 :
<style type='text/css'>
/* Kurazone Pop Up Ramadhan */
@keyframes kuraslidedownn{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#kurapuasaramadhan{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:99;min-height:325px;padding:20px;border-radius:10px;animation:kuraslidedownn 2s}#kurapuasaramadhan .kuraposo{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)}#kurapuasaramadhan .kuraposo p{margin:10px auto;font-style:italic;font-family:Georgia}#kurapuasaramadhan .kuraposo .ramadhantibakurazone{font-size:2.5rem;font-style:normal}#kurapuasaramadhan a.close-popup{background:#428bca;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;border:1px solid #3885c7;transition:all 0.3s}#kurapuasaramadhan a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#kurapuasaramadhan a.close-popup:active{opacity:.9}
.kuraketupat{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}.kuraketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#kurapuasaramadhan .kuraposo{font-size:1rem}#kurapuasaramadhan .kuraposo .ramadhantibakurazone{font-size:1.5rem}#kurapuasaramadhan{min-height:260px;left:20px;right:20px}}
</style>

<div id='kurapuasaramadhan'>
<div class='kuraketupat'></div>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='kuraposo'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhantibakurazone'>Ramadhan 1440 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='kuraketupat duaa'></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#kurapuasaramadhan").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
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 - Part #2", selamat mencoba dan semoga bermanfaat. Goodluck!!

Referensi : https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html


Close

Selamat Menunaikan Ibadah Puasa

Ramadhan 1440 H

Mohon Maaf Lahir Batin

Tags





أحدث أقدم