How to Install Fasting Congratulations Pop Up Greetings Widget

Not feel the month of Ramadan in 2019 has arrived, we will enter the holy month of blessing soon. Never mind that the month of Ramadan in ...

Not feel the month of Ramadan in 2019 has arrived, we will enter the holy month of blessing soon. Never mind that the month of Ramadan in 2019 has arrived, a blessed holy month will soon be upon us. Ramadan is one of the most awaited moments by Muslims throughout the world. The month of Ramadan is one of the most anticipated moments of Muslims around the world. Because at this time many benefits and special things that are always felt by Muslims. Because this is where many benefits and special things are always experienced by Muslims. So when Ramadan arrives, that special month will always be welcomed with joy. So when Ramadan arrives, the special month is always celebrated with joy.

To welcome this blessed holy month TipRicks will provide tips on how to install a Fasting Congratulations Pop Up. To celebrate this blessed holy month, TipRicks will provide tips on How to Install Pop Up Fasting Safe Speech. The way it works is quite simple, a pop-up message will appear when we open a page in the blog that is equipped with a close button to close the message. The way it works is simple, a message appears when we open a page in a blog with a close button to close it. For those who are curious, let's follow the way below! For those of you who are curious, follow the procedure below!

How To Install Fasting Pop Up Greetings How To Install A Fast Greeting Pop Up

     1. First, go to Blogger
     2. Then go to the Themes menu and click the Edit HTML button
     3. Add code below before </head>

[<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadan*/
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#tipricks-fasting{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}#tipricks-fasting .fasting19{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)}#tipricks-fasting .fasting19 p{margin:10px auto;font-style:italic;font-family:Georgia}#tipricks-fasting .fasting19 .ramadan2019{font-size:2.5rem;font-style:normal}#tipricks-fasting 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}#tipricks-fasting a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#tipricks-fasting a.close-popup:active{opacity:.9}
.diamond{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}.diamond.dua{top:initial;bottom:3px}
@media screen and (max-width:768px){#tipricks-fasting .fasting19{font-size:1rem}#tipricks-fasting .fasting19 .ramadan2019{font-size:1.5rem}#tipricks-fasting{min-height:260px;left:20px;right:20px}}
</style>
</b:if>]

     4. Then add the code below before </body>

[<b:if cond='data:view.isHomepage'>
<div id='tipricks-fasting'>
<div class='diamond'></div>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='fasting19'>
   <p>Congratulations on Fasting</p>
   <p><span class='ramadan2019'>Ramadan 1440 H</span></p>
   <p>Forgive my Body and Soul</p>
</div>
<div class='diamond dua'></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#tipricks-fasting").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>]

     5. If so, click the Save theme button and see the results on your blog.

• [message]
• ##fa-info-circle## Info
• By default, I add a special conditional tag for the main page. So if you want this pop up to appear on all pages, please remove the conditional tag.

[Result]

One Time Event by Adding Cookies

If you want to add this code and want to show this message only once in the browser, use this code:

     1. Add the code below before </head>

[<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up ramadan */
@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}#tipricks-fasting{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}#tipricks-fasting .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)}#tipricks-fasting .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#tipricks-fasting .puasa19 .ramadan2019{font-size:2.5rem;font-style:normal}#tipricks-fasting 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}#tipricks-fasting a.close-popup:hover{background:#336d9e;color:#fff}#tipricks-fasting a.close-popup:active{opacity:.9}
.diamond{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}.diamond.dua{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}.powerfailure{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){#tipricks-fasting .puasa19{font-size:1rem}#tipricks-fasting .puasa19 .ramadan2019{font-size:1.5rem}#tipricks-fasting{min-height:260px;left:20px;right:20px}}
</style>
</b:if>]

     2. Then add the code below before </body>

[<b:if cond='data:view.isHomepage'>
<div id='myModal'>
<div id='tipricks-fasting'>
<div class='diamond'></div>
<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='puasa19'>
   <p>Congratulations on Fasting</p>
   <p><span class='ramadan2019'>Ramadan 1440 H</span></p>
   <p>Forgive my Body and Soul</p>
</div>
<div class='diamond dua'></div>
</div>
<div class='powerfailure'></div>
</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 TipRicks_COOKIE="cookietipricks",hideMe=document.getElementById("myModal"),cookie=getCookie(TipRicks_COOKIE),cookietipricks=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(TipRicks_COOKIE,cookietipricks,100),hideMe.style.display="block"===cookietipricks?"none":"block",cookietipricks=hideMe.style.display},hiding.onclick();
//]]>
</script>
</b:if>]

• [message]
• ##fa-info-circle## Info
• This message will reappear if the user clears cookies in their browser

     3. Click the Save theme button and see the results on your blog.

[Result]

Well, that's all from TipRicks and happy fasting. Wassalam.

This article "How to Install Fasting Congratulations Pop Up Greetings Widget" is protected by