How to Create Pop Up Widget For Your Website?

How to Install Pop Up widget in your Blogger Template 

Simple Blogger Pop up widget give your Blogger template a stunning look. Use this widget for free and customize your blogger. Google love customized blog and prefer it more than other website. 

Best Blogger Pop up widget. You can use in WordPress and Blogspot. This script have negligible effect on your Blog page loading. Easy to create and if you know some coding then you can edit it.Pop up widget Css in HTML is a popular among all the great bloggers I am not talking about that annoying popup advertisement i also hate them.

Popups will help you to sell better, promote planned occasions, collect feedback , collect user data and much more.

The way pop up works is quite simple, a pop up message will appear when we open a page automatically with a close button to close the message. For those who are curious, let's follow the method below!

Why you should use Popup message in website 

1. You sell better
2. What's New update in your website
3. Completed a Milestone Like 1 million Views.
4. Promote Planned Occasions
5. Giveaway going on your website/Blog.
6. Thanks your Subscribers
7. Event Information

How to add Pop Up window in blogspot/wordpresss

1. Read Steps Carefully
2. Copy Code
3. Edit Page/Post
4. Paste Code
5. View your Popup

First, open Blogger > Then open the Themes menu and click the Edit HTML button >Find code </head> and add below code before </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>

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 this message'>Close</a> <div class='puasa19'> <p> Your Text 1 Here</p> <p> <span class='ramadhan2019'>Your Text 2 Here</span></p> <p> Your Text 3 Here </p> </div> <p> ><a href="https://www.thetechsoff.com/" rel="dofollow" style="color:white">The Techs off</a></p> <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>

Now click the Save theme button and see the results on your blog.