CSS Happy Eid Mubarak

CSS Happy Eid Mubarak
Monday, May 25, 2020


1. Go to Blogger> Themes> Edit HTML
2. Put the following CSS directly above the code </head>

<style type='text/css'>
  /* Pop Up Idul Fitri */
@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}#firefudh2020fitri{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:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#firefudh2020fitri .puasa20{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)}#firefudh2020fitri .puasa20 p{margin:10px auto;font-style:italic;font-family:Georgia}#firefudh2020fitri .puasa20 .ramadhan2020{font-size:2.5rem;font-style:normal}#firefudh2020fitri 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;transition:all 0.3s}#firefudh2020fitri a.close-popup:hover{background:#336d9e;color:#fff}#firefudh2020fitri 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:#3979b0;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:#336d9e;color:#fff}.matilampu{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}
@media screen and (max-width:768px){#firefudh2020fitri .puasa20{font-size:1rem}#firefudh2020fitri .puasa20 .ramadhan2020{font-size:1.5rem}#firefudh2020fitri{min-height:260px;left:20px;right:20px}}
</style>
3. Find the last code // <! [CDATA [...... //]]> place the following code after // <! [CDATA [...... //]]>

<div id='myModal'>
<div id='firefudh2020fitri'>
<div class='ketupat'/>
<a class='close-popup' href='javascript:void(0);' onclick='document.getElementById(&apos;myModal&apos;).style.display=&apos;none&apos;;return false;' title='Close this message'>Close</a>
<div class='hidemodal' id='hiding'><span title='Do not show this message again'>&#215;</span></div>
<div class='puasa20'>
<p>Happy Eid Al-Fitr 1441 H</p>
<p><span class='ramadhan2020'>Minal &#39;Aidin Wal faidzin</span></p>
<p>Forgive me body and soul</p>
</div>
<div class='ketupat duaa'/>
</div>
<div class='matilampuku'/>
</div>
<script type='text/javascript'>
//<![CDATA[
function setCookie(e,i,o){var n=new Date;n.setDate(n.getDate()+o);var a=escape(i)+(null==o?"":"; expires="+n.toUTCString());document.cookie=e+"="+a}function getCookie(e){var i,o,n,a=document.cookie.split(";");for(i=0;i<a.length;i++)if(o=a[i].substr(0,a[i].indexOf("=")),n=a[i].substr(a[i].indexOf("=")+1),(o=o.replace(/^s+|s+$/g,""))==e)return unescape(n)}var Firefudh_COOKIE="cookiefirefudh",hideMe=document.getElementById("myModal"),cookie=getCookie(Firefudh_COOKIE),cookiefirefudh=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(Firefudh_COOKIE,cookiefirefudh,100),hideMe.style.display="block"===cookiefirefudh?"none":"block",cookiefirefudh=hideMe.style.display},hiding.onclick();
//]]>
</script>

4. Save


See the Pen PopUp Selamat Idul Fitri 2020 by Firefudh (@firefudh) on CodePen.

0 Response to "CSS Happy Eid Mubarak"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel