How to make fasting greeting pop ups on blogs

Hello, I have shared a tutorial on how to make fasting greeting pop ups on a blog that you can install on your blog.

The concept and workings of the Happy New Year Greeting pop up is very simple, this pop up message will be displayed when a visitor opens a page on our blog and you determine which page this pop up will appear on, as in the example in this tutorial I use the tag special conditional so that this pop up appears on the homepage / blog home only.

Tutorial on How to Install Congratulations Fasting Pop Up on this blog I quoted from a famous blogger ( Arlina ) and I have personally used this tutorial on my other blogs.

For tutorials, please check directly below:

How To Make Fasting Greeting Pop Ups On Blogs

Login to Blogger> Template> Edit HTML> and save the following code before the code </head>

<b:if cond='data:view.isHomepage'>

<style type='text/css'>

/* Pop Up Ramadhan */

@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}

#arlinapuasa2019ku{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}#arlinapuasa2019ku .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)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku 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}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku 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}

@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}

</style>

</b:if>

By default, the css above is enclosed in a special main page conditional tag. So if you want this pop up to appear on all pages, please remove the conditional tag.Or to set the page where you will display it, you can immediately check it onLatest Blogger Conditional Tags

Then add the code below before </body>

<b:if cond='data:view.isHomepage'>

<div id='arlinapuasa2019ku'>

<div class='ketupat'/>

<a class='close-popup' href='#' title='close'>Close</a>

<div class='puasa19'>

   <p>Selamat Menunaikan Ibadah Puasa</p>

   <p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>

   <p>Mohon Maaf Lahir Batin</p>

</div>

<div class='ketupat duaa'/>

</div>

<script type='text/javascript'>

//<![CDATA[

$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});

//]]>

</script>

</b:if>

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

That's How To Make Pop Up Congratulations Fasting on thisblog, hopefully useful and good luck

 

Source: Arlinadzgn