How To Add Popup Email Subscription Form Widget for Blogger?

<style>

#backgroundPopup{ display:none; position:fixed;
_position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%;
top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999;
}

#popupContact{ display:none; position:fixed;
_position:absolute; /* hack for internet explorer 6*/ height:350px;
width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999;
padding:8px; font-size:13px; }

#popupContactClose{
background:url(http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG)
no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}

#description {
color: #AAAAAA;    font-family:
times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }

#description img {
float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }

#btntfollowForm {  padding:
15px; }

#btntfollowForm img {
border:none; }

#btntfollowForm p {
margin: 0 0 10px;}

#btntfollowForm input:not([type=”checkbox”]){
width: 93%; margin-top: 10px;
margin-bottom: 20px; padding: 10px 5px 10px 25px;  border: 1px solid rgb(178, 178, 178);
-webkit-appearance: textfield; -webkit-box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168,
168, 0.6) inset;    -moz-box-shadow: 0px
1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-shadow: 0px 1px 4px 0px rgba(168,
168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }

#btntfollowForm
input:not([type=”checkbox”]):active,

#btntfollowForm
input:not([type=”checkbox”]):focus{ border: 1px solid rgba(91, 90,
90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px
0px rgba(168, 168, 168, 0.9) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168,
168, 168, 0.9) inset;}

#btntfollowForm .button input{    background: none repeat scroll 0 0
#3D9DB3;    border: 1px solid
#1C6C7A;    border-radius: 3px 3px 3px
3px;    box-shadow: 0 1px 6px 4px rgba(0,
0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: ‘Arial Narrow’,Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0,
0.5);    width: 30%;    float: right; }

#btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none;
}

#btntfollowForm .button input:active,

#btntfollowForm .button input:focus{ background: rgb(40,
137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76,
87);   -webkit-box-shadow: 0px 1px 6px
4px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0,
0, 0.2) inset; }

.btntFollowFooter {
color:#222;  text-align:
center;    font: 10px Tahoma, Helvetica,
Arial, Sans-Serif;    padding: 7px
0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }

.btntFollowFooter a {
color: #222;    text-decoration:
none; }

.btntFollowFooter a:hover {    color: #fff; }

<!–[if lt IE 7]>

#btnt-container a.btntCloseImg {    background:none;    right:-14px;    width:22px;
height:26px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG’,sizingMethod=’scale’);
}

#btntfollowForm
input{ padding: 10px 5px 10px 32px;
width: 93%; }

#btntfollowForm
input[type=checkbox]{ width: 10px; padding: 0;}

<![endif]–>

</style>

<div id=”backgroundPopup”>

<div id=”popupContact”>

<a href=””
id=”popupContactClose”>x</a>

<div id=”btntfollowForm”>

<img alt=”Subscribe” border=”0″
float=”center”
src=”http://1.bp.blogspot.com/-gub7sIrf3NE/VXtJQbzhPjI/AAAAAAAAB94/1DHhB-zQHic/s1600/never-miss-update.png”
/>

<div id=”description”>

<img alt=”email” border=”0″
src=”http://2.bp.blogspot.com/-Zxy5MKH1X9U/VXtNRmZRVtI/AAAAAAAAB-U/EG5x5Gi7U0c/s1600/mail.png”
/>Subscribe to our mailing list to get the updates to your email
inbox…</div>

<form
action=”http://feedburner.google.com/fb/a/mailverify”
method=”post”
onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=learnseo/DZVb‘, ‘popupwindow’,
‘scrollbars=yes,width=550,height=520’);return true”
target=”popupwindow”>

<input name=”email” placeholder=”Enter
Your Email…” required=”required” type=”text”
/><input name=”uri” type=”hidden” value=”learnseo/DZVb” /><input
name=”loc” type=”hidden” value=”en_US” />

<div class=”button”>

<input type=”submit”
value=”Subscribe” /></div>

</form>

</div>

<div class=”btntFollowFooter”>

Delivered by <a
href=”http://feedburner.google.com/”
target=”_blank”>FeedBurner</a> | powered by <a
href=”http://www.learnseo.pro” rel=”dofollow”
target=”_blank”>LearnSEO.pro</a></div>

</div>

</div>

<script
src=”http://yourjavascript.com/24315621361/jquery.cookie.js”
type=”text/javascript”>

</script>

<script type=”text/javascript”>

     var popupStatus =
0;

//this code will load popup with jQuery magic!

function loadPopup(){

    //loads popup only
if it is disabled

if(popupStatus==0){

$(“#backgroundPopup”).fadeIn(“slow”);

$(“#popupContact”).fadeIn(“slow”);

        popupStatus =
1;

    }

}

//This code will disable popup when click on x!

function disablePopup(){

    //disables popup
only if it is enabled

if(popupStatus==1){

$(“#backgroundPopup”).fadeOut(“slow”);

$(“#popupContact”).fadeOut(“slow”);

        popupStatus =
0;

    }

}

//this code will center popup

function centerPopup(){

    //request data for
centering

    var windowWidth =
document.documentElement.clientWidth;

    var windowHeight =
document.documentElement.clientHeight;

    var popupHeight =
$(“#popupContact”).height();

    var popupWidth =
$(“#popupContact”).width();

    //centering

$(“#popupContact”).css({

“position”: “absolute”,

        “top”:
windowHeight/2-popupHeight/2,

“left”: windowWidth/2-popupWidth/2

    });

    //only need force
for IE6

$(“#backgroundPopup”).css({

“height”: windowHeight

    });

}

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){

    if
($.cookie(“anewsletter”) != 1) {

        //centering
with css

        centerPopup();

        //load popup

        loadPopup();

    }

    //CLOSING POPUP

    //Click the x
event!

$(“#popupContactClose”).click(function(){

disablePopup();

$.cookie(“anewsletter”, “1”, { expires: 7 });

    });

    //Press Escape
event!

$(document).keypress(function(e){

if(e.keyCode==27 && popupStatus==1){

disablePopup();

            $.cookie(“anewsletter”,
“1”, { expires: 7 });

        }

    });

});

</script>

Step 4. Replace the Feedburner Usersname ( learnseo/DZVb ) Given in Red with your own Feedburner Username. And you are done…