How to Create popup Widget for Blogger

popup widget for Blogger

popup for blogger

You might notice in some websites that a popup window opens suddenly without
the knowledge of you which leads to other websites and they do it for some promotional purpose.
today we are going to learn how to add popup box to your blogger blog. when a user visit your blog for first time will get a popup box. popup box are create using visitor cookie information.
Jquery are Used to create popup box..
so let's get start:

How to Create Popup Window/Widget for Blogger:

1. => Login tom your Blogger Account
2. => Go to dashboard ->click on layout -> click on 'add a gadget' form 
sidebar or footer.

Popup Widget for Blogger

3. => Now Select 'HTML/JavaScript' Among the list's.
 

Popup Widget for Blogger

4. => Copy the below codes and paste it on HTML/JavaScript box and Click Save.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{
          display:none;
		  background:rgba(0,0,0,0.8);
          width:100%;
		  height:100%;
		  position:fixed;
		  top:0;
          left:0;
		  z-index:99999;
		  }
#fbox-close{
         width:100%;
		 height:100%;
		 }
#fbox-display{
        background:#eaeaea;
		border:5px solid #828282;
		width:350px;
		height:550px;
		position:absolute;
		top:10px;
		left:37%;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		}
#fbox-button{
     float:right;
	 cursor:pointer;
	 position:absolute;
	 right:0;
	 top:0;
	 }
#fbox-button:before{
     content:"CLOSE";
	 padding:5px 8px;
	 background:#828282;
	 color:#eaeaea;
	 font-weight:700;
	 font-size:10px;
	 font-family:Tahoma;
	 }
#tagline{
  background:green;
  padding:6px;
  font-size:18px;
  font-weight:bold;
  margin-top:15px;
  color:white;
}
#product{
  margin-top:15px;
  margin-left:20px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<div id="tagline">Send Free Email No Credit Card Required</div>
<div id="product">
<a href="https://www.sendinblue.com?tap_a=31406-8ed2f8&tap_s=261344-1bd134" target="_BLANK" rel="nofollow"><img src="https://static.tapfiliate.com/5a95401628da4.jpg?a=31406-8ed2f8&s=261344-1bd134" height="450" width="300px" border="0"></a>
</div>
</div>
</div>

Now open a page of your blog. if you don't any error you will get a popup widget ads after 5 seconds..if don't work try on different's browser.
 Thank you..