Cara Membuat Modal Pop Up Ucapan Selamat Berpuasa Di Blog

Berhubung pada bulan ini, tepatnya dari hari senin kita sudah mulai menjalankan ibadah puasa untuk seluruh umat muslim. Disini saya akan sharing sedikit bagaimana cara membuat pop up ucapan selamat berpuasa di blog kalian.

Caranya sangat mudah, dan script ini saya temukan pertama kali di blog nya Arlinadzgn. Karena menurut saya pop up seperti ini lumayan sangat bagus dan simple, dan timbulah niat untuk membantu membagikan nya untuk kalian semua.

Jika ingin memasangnya di blog kalian, mari ikuti langkah-langkahnya berikut ini:

Yang pertama seperti biasa, masuk ke Blogger -> Click Tema -> Edit Html
Setelah itu copy paste Css di bawah ini tepat di atas kode </head>.

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

Jika sudah, jangan beralih dulu. Masih pada edit html, copy paste lagi kode html berikut ini dan tempelkan di atas kode </body>

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

Nah, setelah semuanya sudah selesai, barulah kalian save/simpan tema. Dan lihat hasilnya seperti apa!

Bagaimana menurut kalian, mudah bukan? Jika tertarik dan ingin memasang nya, silahkan dan selamat mencobanya.