Pop Up Ucapan Ramadan 2023 di Median UI Template

Table of Contents

Pop Up Ucapan Idul Fitri 2023 di Median UI - Sekali lagi saya ucapkan selamat hari raya idul mohon maaf lahir batin, di malam takbiran ini saya akan memberikan tutorial lagi kepada kalian yaitu Pop up Ucapan Idul Fitri 2023.

Sebenarnya script ini dari Arlina Design akan tetapi sakarang coba di blog ini dan ternyata masih work. 

Langsung aja berikut ini adalah tutoria nya. 

Pop Up Ucapan Ramadan 2023 di Median UI Template

Masuk Blogger > Edit HTML kemudian cari aja </style> letakkan kode CSS berikut ini diatasnya. 

<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}#popup2023{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}#popup2023 .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)}#popup2023 .puasa23 p{margin:10px auto;font-style:italic;font-family:Georgia}#popup2023 .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#popup2023 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}#popup2023 a.close-popup:hover{background:#c0392b;color:#fff}#popup2023 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 .puasa23{font-size:1rem}#popup2023 .puasa23 .ramadhan2023{font-size:1.5rem}#popup2023{min-height:260px;left:20px;right:20px}}
</style>
  </b:if>

Setelah itu cari kode </body> letakan kode HTML ini tepat di atasnya.

<b:if cond='data:view.isHomepage'>
<div id='popup2023'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa23'>
   <p>Selamat Merayakan Hari Raya</p>
   <p><span class='ramadhan2023'>Idul Fitri 1444 H</span></p>
<p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#popup2023").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Apabila ingin melihat demo nya langsung aja dibawah ini

Selamat mencoba, apabila menemukan bug langsung aja kontak saya di atas.