Cara Membuat Modal Pop Up Ucapan Selamat Berpuasa Di Blog

Seotechman.com, Bogor 07/05/2019. Berhubung pada bulan ini adalah bulan suci Ramadhan, maka dari itu disini saya akan sharing tentang tutorial cara membuat pop up ucapan selamat berpuasa di blog sobat.

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.

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

Baca Juga

Yang pertama seperti biasa, masuk ke Blogger --> Click Tema --> Edit Html
Setelah itu copy CSS di bawah ini, dan pastekan 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 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.