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.
