How to Install Ramadan Fasting Congratulations Pop Up Greetings Widget In Blogger
Fasting is one of the most advantageous strict formalities and exercises to happen to a human body. There is not long away stretch of Ramadan in 2020 has shown up. We are entering the heavenly month of almighty gift. We need some special for our visitor to congratulate them at our sites. In today blog I will share with all who love Ramadan and think to greet some different ways. How to Install Ramadan Greeting Pop Up Widget in blogger or word press.
Quit worrying about that the long stretch of Ramadan in 2020 have shown up a favored blessed month arrive. Ramadan is one of the most anticipated twinkling by Muslims all through the world. The period of Ramadan is one of the most foreseen snapshots of Muslims around the globe. As of now numerous advantages and uncommon things that constantly felt by Muslims. This is the month numerous advantages and exceptional things constantly experienced by Muslims. At the time of Ramadan show up that unique month consistently be invited with happiness. time of Ramadan showing up the uncommon month constantly celebrated with lot of excitements.
Bellow is the list witch I am sharing how to
- How to install Ramadan Fasting Greeting in Blogger
- Word Press User How to Install Ramadan Fasting Greeting
To invite this favored heavenly month Tech Spot will give tips on the best and easy way to introduce a Fasting Congratulations Pop Up. To praise this favored sacred month, Tech Spot will give tips on How to Install Pop Up Fasting Safe Speech. The popup I will provide codes it works is very basic. A spring up message will show up after we open a page in the blog. This pop-up easily can closed with close button. The installing process and exploding work is basic a message shows up with opening a page in a blog with button to close it.
How Many Types of Pop Up Can Create
For the people who have interested they should follow the bellow instructions. I will explain how to create Ramadan Greeting with single card and double card as well. Anyone with double card can celebrate with two languages. This will looks amazing and with multi languages means you care for your visitor. For those of you who interested, follow the method underneath!
Let’s Start How to Install Ramadan Greeting Pop Up Widget
Widget Installation in Blogger Blog. You can show Ramadan Greeting two ways in blogger.
- Only show Ramadan Greeting to main front page (Home Page).
- All your pages, visitor open any page he will be greeted with Ramadan Greeting.
There are two methods to install Ramadan Greeting widget
- First to Blogger and log in your blogger account.
- Left side dashboard slide down and find Theme.
- Go to the Themes menu and click the Edit HTML button.
- Press anywhere in the HTML Code Area, press and hold CTRL + F key.
- Search bar will appear in code corner side, write </head> and hit Enter to search.
- Past this code above </head>.
CSS CODE
<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%)}}
#NobelQuran_popup{line-height:1.55;display:block;background:#ff6;position:fixed;top:15%;right:0;left:0;margin:auto;text-align:center;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);max-width:600px;z-index:1;min-height:360px;padding:20px;border-radius:10px; animation:slideDown 3s}
.NobelQuran_Massage{position:absolute;color:#222;font-size:1.8rem;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)}
.NobelQuran_Massage p{margin:10px auto;font-style:italic;font-family:Georgia}
.NobelQuran_Massage .NobelQuran_ramadan{font-size:2.5rem;font-style:normal}
.close-popup{background:#428bca;position:absolute;bottom:10px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:6px;display:inline-block;font-size:16px;padding:3px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}
.NobelQuran_url{float:left;position:absolute;bottom:20px;left:20px;color:#222;opacity:0.3;text-align:center;cursor:pointer;z-index:99;display:inline-block;font-size:13px;min-width:60px;transition:all 0.3s}
.close-popup:hover, .NobelQuran_Close1:hover{background:#fff;color:#3885c7;border-color:#3885c7}
.NobelQuran_url:hover{opacity:1; color:blue}
.NobelQuran_box{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 8px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.NobelQuran_box.Duaa{top:initial;bottom:3px}
.NobelQuran_Close1{background:#428bca;bottom:3px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:6px;display:inline-block;font-size:22px;padding:3px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}
@media screen and (max-width:568px)
{.NobelQuran_Massage{font-size:1.3rem}
.NobelQuran_Massage .NobelQuran_ramadan{font-size:1.7rem}
#ramdan_popup, #ramdan_popup_ar{min-height:255px;left:20px;right:20px}}
.NobelQuranModal_en{opacity: 1;transition: 2s;}
.NobelQuranModal_en{opacity: 0;}
</style>
</b:if>
There is some CSS Code
.NobelQuranModal_en{opacity: 1;transition: 2s;}
.NobelQuranModal_en{opacity: 0;}
This code give opportunity to model transition timing 2 second, you can change it as you like. Some template not support transition function and under model link not working. That case must use .NobelQuranModal_en{display:none} in CSS function instead of Opacity.
If you wish to disappear this model block suddenly after pressing close button. Change both line code with bellow one.
.NobelQuranModal_en{display:none}
HTML CODE
HTML Code past below the <body> anywhere.
<b:if cond='data:view.isHomepage'>
<div id="NobelQuran_pu" >
<div id='NobelQuran_popup'>
<div class='NobelQuran_box'></div>
<button class='NobelQuran_Close1 hide-popup' onclick="myFunctionClose()" title='Close This Massage'>Close Popup</button>
<button class='close-popup hide-popup' onclick="myFunctionClose()" title='Close This Massage'>Close</button>
<div class='NobelQuran_Massage'>
<p>Ramadan Kareen Mubarak</p>
<p><span class='NobelQuran_ramadan'>Ramadan 1441 H <br/> Ramadan 2020 G</span></p>
<p>Allah Accept Our Fasting</p>
</div>
<a class='NobelQuran_url' href="https://nobelquran.com" target="_blank" style="text-decoration:none;" title="Visit Nobel Quran Website">NOBEL QURAN</a>
<div class='NobelQuran_box Duaa'></div>
</div>
</div>
</b:if>
Java Script Code
Java Code placed above the </body> in Theme HTML Code
<script>
function myFunctionClose() {
var popup = document.getElementById("NobelQuran_pu");
popup.classList.toggle("NobelQuranModal_en");
}
</script>
May you are using JQuiry as bellow in your blog, remove the CSS Code
.NobelQuranModal_en{opacity: 1;transition: 2s;}
.NobelQuranModal_en{opacity: 0;}
Remove upper Java script Code and Past bellow Jquiry related Code
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#NobelQuran_pu").animate({top:"25%"},1e3),
$(".hide-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
That’s all save your template (theme) welcome your visitors with wishing Ramadan Greetings.
If you want to show this massage it is very simple, in the layout add any place HTML widget and past all these code inside. Save your widget, click on layout save arrangement button.
How to Install Ramadan Greeting Pop Up Widget
