Pop Up Ucapan Ramadan 2023 di Median UI Template

Pop Up Greetings of Ramadan 2023 on the Median UI Template

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. 

Post a Comment

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.