Cara Membuat Pop Up Ucapan Selamat Berpuasa

Cara Membuat Pop Up Ucapan Selamat Berpuasa - Halo sobat TrikS semoga diawal bulan puasa ini diberikan banyak pahala di bulan romadhan ini, sekali lagi saya ucapkan selamat menunaikan ibadah puasa Ramadhan 1440 H Mohon Maaf Lahir dan Batin 🙏🙏🙏.

Pada bulan yang mulia ini saya akan share ke pada pengunjung setia blog triksimple.com bagai mana cara membuat pop up ucapan selamat berpuasa yang tentunya responsive di mobile friendly.

See the Pen
Pop Up Selamat Menunaikan Ibadah Puasa 1440 H by MajidJM (@MajidJM)
on CodePen.

Cara Membuat Pop Up Ucapan Selamat Berpuasa

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian tambahkan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#trksmplpuasa2019ku{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:slideDown 2s}#trksmplpuasa2019ku .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)}#trksmplpuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#trksmplpuasa2019ku 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}#trksmplpuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#trksmplpuasa2019ku 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}
@media screen and (max-width:768px){#trksmplpuasa2019ku .puasa19{font-size:1rem}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#trksmplpuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

Jika sudah tambahkan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:view.isHomepage'>
<div id='trksmplpuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#trksmplpuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Kalau sudah memasang semua kode diatas klik Simpan.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Pop Up Ucapan Selamat Berpuasa Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.