How to Add Popup Email Subscribe Form on Blogger? ~ TECH FABIA1

Searching related topic website on Internet after finding and when you click on it after loading page a popup windows appears, unnecessary popup windows makes visitors sometimes irritate.
But, this Popup Email subscribe form, don't irritates regular visitors this will appears only weekly once.
If you want to create it for your blogger blog, then ready to create with simple and easiest methods.
TECH FABIA always a head to all its readers in teaching simplest Ways, just find to make of "Popup Email Subscribe Form" to your blogger blog.

Step1:

Go to Dashboard --> Desing --> Click on "Add a Gadget --> HTML/Javascript
Now copy the below code as given below and paste it and save the Gadget
Note: Replace the Code Blue color High lighted as below "Tech fabia" with your feed burner username.

<link rel="stylesheet" href="http://blogtariff.webs.com/Colorbox/colorbox-css-code-blogtariff.css" />
<style>

/*-----------------------------------------------------------------------------------*/
/*Email Subscribe Box Popup By Tech Fabia @www.freedownloadspczone.blogspot.in
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
color: #666;
height: 355px;
}

#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration: none;
}

.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding: 10px;
line-height: 25px;
font-family: arial !important;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}

#subs-container {
padding: 35px 0 30px 0;
position: relative;
}

a:link, a:visited {
border: none;
}

.demo {
display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://blogtariff.webs.com/Colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"390px", inline:true, href:"#subscribe"});
}
});
</script>


<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<style> .home-featured-right {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
border: 5px solid #fff;
font-size: 16px;
margin: 0px;
width: 320px;
font-family: calibri;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
color: #fff;
text-shadow: #a64242 -1px -1px;
text-align: center;
}

.home-featured-right p {
font-size: 16px;
margin-bottom: 20px;
}

.home-featured-right .widget {
margin: 35px;
}

.home-featured-right h4.widgettitle {
font-size: 26px;
margin-bottom: 20px;
}

.home-featured-right input[type=text] {
-moz-box-shadow: inset 0 1px 2px 1px #eee;
-webkit-box-shadow: inset 0 1px 2px 1px #eee;
background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
border-bottom: none;
border-left: 1px solid #963c3c;
border-right: none;
border-top: 1px solid #963c3c;
box-shadow: inset 0 1px 1px 1px #eee;
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 12px;
padding: 14px 15px 14px 45px;
width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
border: none;
font-size: 0;
height: 28px;
margin: 0 0 0 15px;
line-height: 0;
text-indent: -9999px;
width: 26px;
}

#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
margin-left: -20;
}

#email-news-subscribe .email-box input.email {
background: #FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
color: #333
}

#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: white;
text-shadow: #d08d00 1px 1px 0;
padding: 7px 14px;
margin-left: 3px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline: 0;
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: #FFFFFF;
text-shadow: #d08d00 1px 1px 0
}
</style>

<div class="home-featured-right">
<div id="enews-2" class="widget enews-widget">
<div class="widget-wrap">
<div class="enews">
<h4 class="widgettitle">Sign Up for Free Email Updates</h4>
<p>Get our latest updates direct in your inbox.Just enter your wail address
below....</p>
<p>Your privacy and email address are safe with us!</p>
<div id="email-news-subscribe">

<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post"
target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Tech Fabia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;"
id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="TechFabia" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe"
/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/9fXrd" target="_blank" >Blogger Widgets »</a></span></div></div>
</div>
</div>
</div>

Step2:

Tech Fabia adjusted the value of Popup for Seven days appearing to a particular visitors. If you want to change it to 1 to 6 then you can but, Tech Fabia is recommends you it is better to leave this for seven days so, that visitors won't irritate anymore by gradual appearing of Popup window.

We think that you've enjoyed this Article...so don't forget to comment on this blog. With hope supporting to us always. Tech Fabia.